feat(a11y): logo + onglets tous/chronodose accessibles+ ... #58

CovidTrackerFr / vitemadose-front

Interface utilisateur de l'outil ViteMaDose

https://vitemadose.covidtracker.fr

Other

80 stars 51 forks source link

feat(a11y): logo + onglets tous/chronodose accessibles+ ... #58 #195

Closed bilelz closed 3 years ago

bilelz commented 3 years ago

[x] logo ViteMadoseaccessible au clavier
[x] onglet de recherche accessible au clavier
[x] card : balise <h5> remplacer par une div pour éviter ce warning https://web.dev/heading-order/?utm_source=lighthouse&utm_medium=devtools
[x] ajout d'un aria-label sur le bouton x de la recherche https://web.dev/button-name/?utm_source=lighthouse&utm_medium=devtools
[x] suppression du scroll automatique au focus sur le champ de recherche pour la version desktop (width > 700px)
[x] rendre l'adresse selectionnable , cf #58

Testable ici https://dev.vitemado.se/result-page_keyboard-nav/

Luwangel commented 3 years ago

@bilelz J'ai récemment validé la PR https://github.com/CovidTrackerFr/vitemadose-front/pull/55. C'est sûrement ce qui provoque tes conflits.

bilelz commented 3 years ago

Vous pouvez merge please

bilelz commented 3 years ago

Tout m'a l'air bon niveau style et accessibilité.

Thanks. En revanche, il est désormais obligatoire de cliquer sur le bouton "Prendre Rendez-Vous". Je ne sais pas si c'est une bonne idée ou pas.

Yes, c'est aussi comme ça sur l'appli Android.

fcamblor commented 3 years ago

Au niveau code, j'ai jeté un oeil et tout me paraît OK :)

Je suis partagé aussi sur le fait de rendre la card plus cliquable entièrement (ou pas) Il m'est arrivé un certain nombre de fois de "cliquer" dessus par inadvertance en voulant scroller (même dans la zone grisée !)

Je ne me rappelle plus si on avait eu de forts arguments en faveur de rendre la carte entièrement cliquable.

@francoisbouchet Un avis sur la question ? Enlever le fait que la card rdv soit entièrement cliquable : gros problème ou pas pour toi ?

bilelz commented 3 years ago

Au niveau code, j'ai jeté un oeil et tout me paraît OK :)

Je suis partagé aussi sur le fait de rendre la card plus cliquable entièrement (ou pas) Il m'est arrivé un certain nombre de fois de "cliquer" dessus par inadvertance en voulant scroller (même dans la zone grisée !)

Je ne me rappelle plus si on avait eu de forts arguments en faveur de rendre la carte entièrement cliquable.

@francoisBouchet Un avis sur la question ? Enlever le fait que la card rdv soit entièrement cliquable : gros problème ou pas pour toi ?

Ah, c'est bizarre. Je n'ai jamais eu ce problème. C'était avec quel navigateur ? @fcamblor

fcamblor commented 3 years ago

Ah mais ça n'était pas sur la branche de cette PR, c'était auparavant

Par exemple, là, en prod :

Vaccination_COVID-19_à_Villenave-d_Ornon_33140

(c'est un argument en faveur de ta PR pour ne rendre cliquable que le bouton de prise de rdv ;-) )

francoisBouchet commented 3 years ago

hello, plutôt pour la suppression du "clic-englobant" sur la card.

à l'origine sur la toute première version (de Guillaume) il n'y avait aucun bouton sur la card. je suis ensuite arrivé sur le projet et j'ai rajouté ce bouton... mais pas osé supprimé le clic sur l'éntièreté de la card... et c'est resté le comportement par défaut ^^!

j'ai justement ajouté le bouton pour renforcer l'affordance et que l'action soit instantanément visible et compréhensible par tous... et pas juste "implicite" comme le font aujourd'hui bcoup d'applications (même SNCF ! ... mais ils peuvent se le permettre)... en tout cas d'un point de vue UX & CRO, c'est indispensable.

je pense que le bouton est suffisamment efficace. Si on constate des baisses de clics sur GA, on pourra revenir sur notre choix. à surveiller après la MEP.