Ariane

ar-charcounter gère les annonces et états sémantiques sans intervention de votre part :

• Le composant ajoute automatiquement son id à l’attribut aria-describedby du champ observé — et le retire au disconnectedCallback. Si le composant ne possède pas d’id, un identifiant unique est généré. Les ids déjà présents sur le champ sont préservés.
• Une région aria-live="polite" annonce le passage en état warning avec le nombre de caractères restants et le label pluralisé — par exemple “1 caractère restant” ou “12 caractères restants”.
• Une région aria-live="assertive" annonce le dépassement avec son ampleur dès que l’état error est atteint — par exemple “Limite dépassée de 1 caractère” ou “Limite dépassée de 3 caractères”.
• Les régions aria-live sont vidées au retour à l’état normal (ou lors de la transition error → warning), ce qui garantit la ré-annonce si l’utilisateur repasse dans le même état.
• L’attribut data-ar-char-state ("warning" ou "error") est posé sur le champ observé et sur ses <label> liés — retiré automatiquement au retour à l’état normal. Il vous permet de styler le champ en réponse à l’état sans JavaScript supplémentaire.

Les critères WCAG suivants sont implémentés :

• le compteur est lié programmatiquement au champ via aria-describedby géré automatiquement (WCAG 1.3.1 ↗ (ouvre dans un nouvel onglet)Info and Relationships : le compteur lié via aria-describedby est disponible programmatiquement pour les technologies d'assistance.)
• les régions aria-live annoncent le passage en avertissement et le dépassement de limite sans déplacer le focus (WCAG 4.1.3 ↗ (ouvre dans un nouvel onglet)Status Messages : les régions aria-live annoncent warning et error sans déplacer le focus.)

• ar-charcounter ne pose pas aria-invalid sur le champ. Ce comportement est laissé à votre charge car l’invalidité sémantique doit généralement être déclenchée à des moments précis — au blur ou à la soumission du formulaire — et non en temps réel. Pour signaler l’erreur à la soumission :

form.addEventListener('submit', (e) => {
    if (textarea.value.length > max) {
        e.preventDefault();
        textarea.setAttribute('aria-invalid', 'true');
    }
});

• L’état warning et error ne doivent pas être communiqués uniquement par la couleur (WCAG 1.4.1 ↗ (ouvre dans un nouvel onglet)Use of Color : la couleur n'est pas utilisée comme le seul moyen de transmettre de l'information.) : les slots warning-icon et error-icon permettent d’insérer un signal visuel supplémentaire. Les icônes doivent porter aria-hidden="true" pour éviter un doublon d’annonce — l’information est déjà transmise par aria-live.