Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Améliore accessibilité des champs avec autocomplétion #787

Merged
merged 3 commits into from
May 23, 2024

Conversation

florimondmanca
Copy link
Collaborator

@florimondmanca florimondmanca commented May 22, 2024

Cette PR met en conformité nos champs autocomplete avec les attendus du pattern Editable combobox with list autocomplete

En fait le stimulus-autocomplete faisait déjà pas mal de choses, mais pas forcément correctement. J'ai dû ajouter / corriger quelques attributs et comportements clavier.

Pour faire annoncer le statut "Chargement en cours..." / "N résultats trouvés", il était important que l'élément <li role="status> ne change pas de référence dans le DOM, donc .innerHTML = '...' ne fonctionnait pas. Je suis passé par idiomorph (librairie qui sera utilisée dans Turbo dans la prochaine version, auquel cas on pourrait alors passer par Turbo Streams).

Aperçu

Screenshot 2024-05-22 at 17-19-26 Arrêté temporaire TEST-1 - DiaLog

Pour tester

Sur Linux Mint (pour Mathieu), activer le lecteur d'écran : Paramètres système > Accessibilité > Lecteur d'écran

(Pour afficher une icône de raccourci dans la barre de tâches, cliquer droit dessus puis "Applets" et cocher "Accessibilité")

Important De mon côté j'ai eu besoin de redémarrer Firefox pour que le lecteur d'écran commence à énoncer les pages

Pour la review

Dispo pour parcourir de vive voix les changements si besoin

@florimondmanca florimondmanca force-pushed the fix/autocomplete-a11y branch 3 times, most recently from 4230b5e to d581676 Compare May 23, 2024 11:01
@codecov-commenter
Copy link

codecov-commenter commented May 23, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.47%. Comparing base (ae7f36d) to head (fcf00cb).

Additional details and impacted files
@@            Coverage Diff            @@
##               main     #787   +/-   ##
=========================================
  Coverage     99.47%   99.47%           
  Complexity     1127     1127           
=========================================
  Files           211      211           
  Lines          4786     4786           
=========================================
  Hits           4761     4761           
  Misses           25       25           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@florimondmanca florimondmanca force-pushed the fix/autocomplete-a11y branch from d581676 to 169ab29 Compare May 23, 2024 11:06
@florimondmanca
Copy link
Collaborator Author

@mmarchois Ready

@florimondmanca
Copy link
Collaborator Author

@aureliebaton Tu peux tester le comportement ici si tu veux https://dialog-staging-pr787.osc-fr1.scalingo.io/

Tous les champs autocomplete ont été modifiés (Ville, Voie, Intersection début, Intersection fin, N° de RD)

@florimondmanca florimondmanca requested a review from mmarchois May 23, 2024 14:20
@florimondmanca florimondmanca force-pushed the fix/autocomplete-a11y branch from 8c838cd to fcf00cb Compare May 23, 2024 14:26
Copy link
Collaborator

@mmarchois mmarchois left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'approuve d'avance 👍

@florimondmanca florimondmanca merged commit bbe8422 into main May 23, 2024
2 of 3 checks passed
@florimondmanca florimondmanca deleted the fix/autocomplete-a11y branch May 23, 2024 15:25
@aureliebaton
Copy link
Collaborator

@florimondmanca je viens de tester sur la prod et c'est nickel !
Ca améliore l'expérience utilisateur je trouve donc c'est top.

@florimondmanca
Copy link
Collaborator Author

Merci du test @aureliebaton :)

Oui je trouve aussi que ça améliore l'UX, et d'ailleurs pour tout le monde (notamment avec la navigation clavier qui est plutôt pratique)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Les champs autocomplete ne sont pas accessibles
4 participants