[FO - Formulaire] Amélioration de la navigation au clavier - accessibilité

[hmeneuvrier]

Ticket

#2991
#2993

Description

Correction de la navigation au clavier sur le formulaire

• ordre de tabulation
• focus sur le premier élément
• gestion de la navigation au clavier dans les éléments complexes (sélecteur d'adresse par exemple)

Changements apportés

• Ajout d'un paramètre focus dans les paramètres accessibility dans tous les json, et gestion de ce paramètre dans tous les composants pour mettre le focus sur l'élément choisi quand on arrive sur l'écran
• Inversion des boutons suivant et précédent sur tous les écrans, en les mettant dans un SignalementFormSubscreen avec la css button-group-responsive-inverted pour que le bouton suivant soit accessible avant le bouton précédent en tabulation
• Gestion de la navigation au clavier dans le composant SignalementFormAddress
• Changement d'un texte de suivi dans les fixtures (n'a rien à voir avec la choucroute, mais ça a perturbé Mathilde pendant ces tests sur une reviewapp)

Pré-requis

npm run watch

Tests

• Dans l'idéal, tester le formulaire au clavier pour tous les profils et tous les désordres et en passant sur tous les écrans. En vrai en faire le max possible, en variant
• Pour chaque écran, vérifier
• l'ordre de tabulation
• le focus mis sur le premier élément
• le bouton suivant accessible avant le bouton précédent
• la navigation au clavier sans piège dans les composants plus complexes

[numew]

J'ai quelques tests KO (je suis pas allé plus loin)

• Lorsque l'on soumet via entrée en étant sur un bouton précédent, on revient sur l'écran précédent, ca soumet la page et on revient donc sur l'écran initial
• Lorsqu'on valide une proposition autocomplete (du navigateur, ex sur nom de famille) ca soumet aussi le formulaire, donc des erreur s'affiche, c'est problématique dans certains cas ou on est pas sur le dernier champs de la page mais sur le dernier obligatoire, dans ce cas on passe à l'écran suivant sans avoir tout parcourus
• Le point "Mettre le focus sur le premier champ en erreur quand le cas se présente après clic sur bouton suivant" ne semble pas effectif (potentiellement faisable dans un ticket à part à mon sens pour celui la)

[hmeneuvrier]

J'ai quelques tests KO (je suis pas allé plus loin)

* Lorsque l'on soumet via entrée en étant sur un bouton précédent, on revient sur l'écran précédent, ca soumet la page et on revient donc sur l'écran initial

* Lorsqu'on valide une proposition autocomplete (du navigateur, ex sur nom de famille) ca soumet aussi le formulaire, donc des erreur s'affiche, c'est problématique dans certains cas ou on est pas sur le dernier champs de la page mais sur le dernier obligatoire, dans ce cas on passe à l'écran suivant sans avoir tout parcourus

Pour ces deux points, j'ai annulé la validation générale de l'écran au clic sur "enter", parce que c'est impossible à gérer tel que je l'avais imaginé. Ca faisait même sauter un écran sur deux si on clique sur "enter" quand on est sur le bouton suivant parce que le "click sur enter" choppé sur le bouton "naturellement" est un événement "onclick", et le clic que j'interceptais est un événement "onkeyup" et du coup le event.preventDefault() ne fonctionne pas...

[hmeneuvrier]

• Le point "Mettre le focus sur le premier champ en erreur quand le cas se présente après clic sur bouton suivant" ne semble pas effectif (potentiellement faisable dans un ticket à part à mon sens pour celui la)
  j'ai tenté pendant 2 heures de gérer le focus sur la première erreur, mais c'est assez complexe, et il vaut mieux en faire un ticket à part : [FO - Formulaire - Accessibilité - 12.8] Dans chaque page web, le focus est-il mis sur le premier élément en erreur lors de la validation ? #3091

[numew]

Test ok

[emilschn]

Ok lecture et test

Pour le composant adresse, ça fonctionne bien si on utilise les flèches.
Si on utilise la tabulation, elle met le focus sur les éléments. Mais dans ce cas, on ne peut pas les sélectionner, alors qu'on a l'impression qu'on peut.
Possible de faire quelque chose ?

[emilschn]

OK pour moi, reste du rebase ! :)

[sonarcloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.6% Duplication on New Code

See analysis details on SonarCloud