[RGAA] Compteur de caractères non accessible

Le compteur de caractères n’est pas restitué aux lecteurs d’écran. Les personnes aveugles ne
disposent donc pas du nombre de caractères autorisés et restants.
Le code actuel doit être revu pour implémenter une propriété aria-live="polite".

Cela concerne les champs de formulaires en front-office, et les formulaires spécifiques (réponse à une offre d'emploi par exemple, ou d'inscription à un événement).

Code actuel sans le compteur

<p class="obligatoire">
    <label for="VILLE">Ville: (*)</label>
    <input type="hidden" name="#FORMAT_VILLE" value="2;0;0;50;LIB=Ville:;11">
    <input required="" type="text" id="VILLE" name="VILLE" value="" maxlength="50" form="1473412456281" ariarequired=" true" data-original-title="" title="" class="valid">
</p>

Code actuel avec le compteur

<p class="obligatoire">
    <label for="VILLE">Ville: (*)</label>
    <input type="hidden" name="#FORMAT_VILLE" value="2;0;0;50;LIB=Ville:;11">
    <input required="" type="text" id="VILLE" name="VILLE" value="" maxlength="50" form="1473412456281" aria-required="true" data-original-title="" title="" class="valid" aria-invalid="false">
    <div class="tooltip fade right in" style="display: block; top: 1530.72px; left: 719.817px;">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">3 / 50 caractères autorisés</div>
    </div>
</p>

Note : il n’est pas possible qu’une balise <p> contienne une balise <div>.

• Transformer la balise <div> en <span>.

Pour que la propriété aria-live fonctionne, il faut que le contenu soit déjà présent dans le code
HTML :

1. Positionner la tooltip et la masquer avec la propriété display: none ;
2. Ajouter la propriété aria-live avec la valeur polite sur la div.

Lorsque la tooltip doit être affichée, passer la valeur display: à block et insérer le texte.