Accessibilité - Deuxième vague

[fabienheureux]

Description succincte du problème résolu

Modification d'accessibilité

Cartes traitées :

• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Corrections-des-r-gles-de-script-120482eff0d54cffaad57a31331ee11e?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Corriger-des-niveaux-de-titre-427d4e40d9c94e79a4ac120a8e90fc3b?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Erreurs-dans-le-code-en-W3C-corriger-ef216f7bfed7445181aa55d04220cb46?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Placement-de-balise-span-pour-un-lien-plus-pertinent-c236367134b144b28031c6bfa4611f76?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Aide-la-saisi-champ-de-formulaire-3e727639af8d40dabb5083f7a5ab508b?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Contr-le-segment-actif-pas-assez-clair-48f99736d566414d8d7ba5c1a6e24361?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Rendre-plus-visible-le-focus-sur-certains-composants-c100b6964903489681d04dc099f0df22?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Placement-de-balise-span-pour-un-lien-plus-pertinent-c236367134b144b28031c6bfa4611f76?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Harmoniser-les-attributs-for-et-id-des-2-champs-de-formulaire-749ecea823bb4bceb4c1b1ca04bf4e26?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Corriger-un-bouton-non-explicite-5521f201c8bf4c4187b208cd106c11b2?pvs=4
• https://www.notion.so/accelerateur-transition-ecologique-ademe/ACCESSIBILIT-CARTE-FORMULAIRE-Erreurs-dans-le-code-en-W3C-corriger-ef216f7bfed7445181aa55d04220cb46?pvs=4

Type de changement :

• Bug fix
• Nouvelle fonctionnalité
• Refactoring de code (explication à retrouver dans la description)

Auto-review

Les trucs à faire avant de demander une review :

• J'ai bien relu mon code
• La CI passe bien
• En cas d'ajout de variable d'environnement, j'ai bien mis à jour le .env.template
• J'ai ajouté des tests qui couvrent le nouveau code

Comment tester

La procédure de test est détaillée en commentaire de chaque carte Notion

⚠️ Régressions à traiter avant le merge de la PR

• Transitions du panel de filtres avancés - J'ai supprimé quelques overflow-hidden qui avaient des effets de bord indésirable sur les formulaires, je vois plus tard comment rétablir ça
• La carte est cachée par un qfdmo-invisible
• Résultats en ligne pas scrollables
• Les filtres avancés s'affichent lorsqu'on passe de la vue en ligne / à proximité
• Recherche > retour à la recherche > problème d'affichage

Déploiement

Après la MEP, créer des issues au DSFR concernant

• Contrôle segmenté pas accessible (role="tab" et tablist)
• Rôles facultatifs sur main / header / footer

[fabienheureux]

@kolok c'est de nouveau dispo en review.
J'ai testé pas mal de comportement de ça me semble ok mais je veux bien ton regard ! (sur le fonctionnel et pourquoi pas une dernière relecture du code)

[kolok]

J'ai toujours un soucis lorsque l'iframe s'affiche dans un espace restreint (ex: 500px x 500px) il n'est pas possible de cliquer sur le bouton de recherche :

http://localhost:8000/iframe/configurateur?iframe_mode=form&direction=jai&first_dir=first_jecherche&action_displayed=preter&action_displayed=emprunter&action_displayed=louer&action_displayed=mettreenlocation&action_displayed=reparer&action_displayed=donner&action_displayed=acheter&action_displayed=revendre&action_displayed=trier&action_list=reparer&max_width=500px&height=500px&limit=25&address_placeholder=Tape+ton+adresse&iframe_attributes=&bounding_box=%7B+++%22southWest%22%3A%7B%22lat%22%3A48.916%2C%22lng%22%3A2.298202514648438%7D%2C+++%22northEast%22%3A%7B%22lat%22%3A48.98742568330284%2C%22lng%22%3A2.483596801757813%7D+%7D#iframe_view

[kolok]

J'ai du mal à retrouver comment ça marchait avant car on avait la scrollbar sur le formulaire en prod et ça marchait correctement

Maintenant, on n'a plus la scrollbar ni en prod ni dans cette PR. cela pose un problème aussi quand la hauteur par défaut est utilisé dans la nouvelle version car le en cas d'erreur sur les champs, le bonton rechercher n'est plus visible :

[kolok]

Les tests e2e passe en local sur mon PC, ici il merdouille, je ne sais pas pourquoi

[fabienheureux]

C'est good ils passent !

[kolok]

👍