Modale "Service près de moi" - formulaire de recherche non accessible

[Marie-a11y]

Description
Un formulaire doit pouvoir :

• avoir son message d'erreur relié à son champ
• avoir l'indication que le champ est en erreur pour les lecteurs d'écrans
• (bonus hors conformité) avoir le focus déplacé sur le champ en erreur après validation du bouton de soumission d'un champ erroné
• (bonus hors conformité) avoir le focus déplacé sur les résultats de recherche après validation du bouton de soumission

Reproduction
Etapes à suivre pour reproduire le bug

1. Aller à sur toutes les pages du site https://code.travail.gouv.fr/
2. ouvrir la modale "Trouver les services près de chez moi" en bas de page
3. Inspecter le champs de recherche
4. soumettre une recherche valide et invalide

Comportement attendu

• Ajouter un id sur la balise <p> du message d'erreur, sa valeur doit être similaire à celle de l'attribut aria-describedby présent sur la balise <input> : id="input-:Rile9ukq:-desc-error"
• Lorsque le champ est en erreur : ajouter un attribut aria-invalid="true" à la balise <input> (lorsuqe le champ n'est pas en erreur, retirer l'attribut)
• (bonus) lorsque le bouton de soumission est activé avec un champ en erreur : déplacer le focus sur la balise <input>
• (bonus) lorsque le bouton de soumission est activé et un résultat s'affiche : déplacer le focus sur le lien présent dans le résultat
• (bonus) si la balise div#input-:Rile9ukq:-messages-group contenant un attribut aria-live n'est pas utilisée, elle peut être retirée du code

Pour obtenir :

<input maxlength="3" class="fr-input max-w_280px" aria-describedby="input-:Rile9ukq:-desc-error" type="text" id="input-:Rile9ukq:" aria-invalid="true">
[...]
<p class="fr-error-text fr-text--md" id="input-:Rile9ukq:-desc-error">Aucun service de renseignement n'a été trouvé pour ce département.</p>

Screenshots

[Marie-a11y]

issue fixed