[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382) #8835

yannbertrand · 2024-05-03T13:58:23Z

🦄 Problème

On a une erreur d’accessibilité (non détectée par Wave).

La balise legend doit être descendant direct du fieldset et ne pas avoir de wrapper. Nous avons des wrappers element-qrocm__header, element-qcu__header et element-qcm__header qu’il faut donc supprimer.

🤖 Proposition

Ne pas englober les legend dans une div,
Ajouter un aria-describedby

Source : cet échange.

🌈 Remarques

Tout ça est testable avec le validateur du W3C, voir : https://stackoverflow.com/questions/18065565/is-it-valid-html-to-add-a-link-to-a-fieldset-legend.

💯 Pour tester

Vérifier visuellement que rien n'a changé.

Vérifier au lecteur d'écran que le legend est correctement lu à la tabulation. Je n'ai pas réussi à le confirmer personnellement.

pix-bot-github · 2024-05-03T13:59:13Z

Une fois les applications déployées, elles seront accessibles via les liens suivants :

Les variables d'environnement seront accessibles via les liens suivants :

mon-pix/tests/integration/components/module/qcm_test.js

dlahaye · 2024-05-06T08:15:26Z

Est-ce que le test via https://validator.w3.org/ est valide ? étant donné que tous les grains ne sont pas affichés d'un coup au lancement de la page

yannbertrand · 2024-05-06T08:24:09Z

Est-ce que le test via https://validator.w3.org/ est valide ? étant donné que tous les grains ne sont pas affichés d'un coup au lancement de la page

Je l'ai pas retesté avec 100% du contenu de Modulix effectivement. Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

dlahaye · 2024-05-06T08:29:38Z

Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

Ah bah en plus j'apprends des trucs ^^

yannbertrand · 2024-05-06T08:37:56Z

Dans le 3ème onglet de w3c validator, tu peux copier/coller des bouts de code, c'est comme ça qu'on a conclu à notre erreur https://validator.w3.org/#validate_by_input.

Ah bah en plus j'apprends des trucs ^^

Du coup j'ai retesté, c'est aussi interdit d'avoir une balise p dans une legend 😢

<fieldset>
  <legend><p>coucou</p></legend>
  <p>truc</p>
</fieldset>

Les balises qu'on a le droit d'utiliser sont du "phrasing content" et référencées ici : https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2 :(

yannbertrand · 2024-05-07T12:11:28Z

mon-pix/tests/integration/components/module/qcm_test.js

+// eslint-disable-next-line no-restricted-imports
+import { click, find } from '@ember/test-helpers';


Je ne sais pas comment récupérer le formulaire pour vérifier la valeur de son aria-describedby avec testing library... Preneur de mieux !

Une PR est en cours sur le repo de testing-library sur le sujet.
A11yance/aria-query#547
C'est lié à ce bug-ci
testing-library/dom-testing-library#1293
D'ici là, la doc ne semble pas proposer d'alternatives qui puissent convenir.

Faute de mieux, ce que tu proposes me convient. Peut-être mettre un commentaire au-dessus de la ligne 31 avec le lien vers la PR de testing-library ?

Pour info j'avais eu un process de pensée un peu différent. Sur MDN form n'a le rôle form que si il est décrit par un nom accessible, j'imagine que la complexité d'implémentation côté testing-library vient de là.

@yannbertrand ils entendent quoi par un nom accessible ?

J'ai pas lu mais la définition est linkée dans MDN, ça renvoie là : https://www.w3.org/TR/accname-1.1/#dfn-accessible-name

merci, c'est très clair maintenant :) https://www.w3.org/TR/accname-1.1/#dfn-accessible-name:~:text=A%20simple%20use,or%20%22OK%20button%22.

Encore plus clair après notre discussion (après avoir lu mdn).

Par défaut la balise form n'a pas le rôle form. Le debugger d'accessibilité Firefox ne le constate pas, mais c'est bien visible sur Chrome qui annonce un role "Section".

On peut la faire devenir un form soit :

avec un role="form". VoiceOver ne dira rien de plus.

avec un title="xxx", VoiceOver annonce "xxx, group".

avec un aria-label="xxx", VoiceOver annonce "xxx, group".

avec un aria-labelledby="xxx", VoiceOver annonce "xxx, group".

Ces 4 méthodes permettent d'utiliser le getByRole('form') de testing-library.

mon-pix/tests/integration/components/module/qcm_test.js

mirawlin · 2024-05-14T14:51:49Z

J'ai tester avec VoiceOver pour voir le comportement de legend
resultat:
Le legend est lu d'abord eg. Sélectionnez une seule réponse. group
Apres le direction est lu: Sélectionnez une seule réponse.
et enfin l'instruction est lu: Pix evalue 16 competences ...

yannbertrand · 2024-05-14T15:03:08Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

mirawlin · 2024-05-14T15:06:09Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

ahh oui - j'ai pas vu le aria-hidden="true"
oui donc il y a un doublon qui est pas sensé etre la

mirawlin · 2024-05-14T15:08:25Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

~~Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme~~

~~Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it~~

edit: not related to the problem

yannbertrand · 2024-05-14T15:53:29Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme

Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

~~aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise,~~ je suis pas sûr de comprendre 🤔

Sur Wave j'ai l'impression qu'on ne détecte pas :

mirawlin · 2024-05-15T07:35:36Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme
Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise, je suis pas sûr de comprendre 🤔

Sur Wave j'ai l'impression qu'on ne détecte pas :

Oui - tu as raison - il n y a rien a voir (on peut ignorer le comment :P)

J'ai retester ce matin et j'ai le meme resultat avec Wave qui dit que c'est bien aria-hidden=true mais c'est toujours lu 2 fois. Et avec firefox c'est pareil

yannbertrand · 2024-05-17T13:41:07Z

J'ai tester avec VoiceOver pour voir le comportement de legend resultat: Le legend est lu d'abord eg. Sélectionnez une seule réponse. group Apres le direction est lu: Sélectionnez une seule réponse. et enfin l'instruction est lu: Pix evalue 16 competences ...

Il y a doublon sur "Sélectionner une seule réponse" alors ? Le second est sensé ne pas être lu avec aria-hidden="true"

Ah tiens - j'ai trouvé ca sur le premier resultat de google quand j'ai fait une recherche sur ce probleme
Il semblerait que : If you use aria-describedby in the same element as aria-hidden="true" the screen reader may read it

aria-describedby est sur le form (et référence autre chose qui n'a rien à voir) et aria-hidden="true" est dans une autre balise, je suis pas sûr de comprendre 🤔
Sur Wave j'ai l'impression qu'on ne détecte pas :

Oui - tu as raison - il n y a rien a voir (on peut ignorer le comment :P)

J'ai retester ce matin et j'ai le meme resultat avec Wave qui dit que c'est bien aria-hidden=true mais c'est toujours lu 2 fois. Et avec firefox c'est pareil

Revue ensemble, ce n'est pas la div aria-hidden="true" qui re déclenche la lecture de "Sélectionner une seule réponse".

En fait le fieldset est un groupe libellé par cette legend donc c'est aussi normal que "Sélectionner une seule réponse" soit lu 2 fois (donc une fois où c'est précisé "group").

Par contre on est pas certain de pourquoi aria-describedby sur le form n'est pas lu avec VoiceOver...

yannbertrand added the team-devcomp label May 3, 2024

yannbertrand self-assigned this May 3, 2024

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch 2 times, most recently from 00e0c97 to b2d5efb Compare May 3, 2024 14:19

dlahaye reviewed May 6, 2024

View reviewed changes

mon-pix/tests/integration/components/module/qcm_test.js Show resolved Hide resolved

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch from b2d5efb to 19f6e8d Compare May 6, 2024 08:32

yannbertrand marked this pull request as draft May 6, 2024 11:32

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch from 19f6e8d to da9ca66 Compare May 7, 2024 12:06

yannbertrand commented May 7, 2024

View reviewed changes

yannbertrand marked this pull request as ready for review May 7, 2024 14:10

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch from da9ca66 to 20356b8 Compare May 13, 2024 08:53

dlahaye approved these changes May 13, 2024

View reviewed changes

dlahaye reviewed May 13, 2024

View reviewed changes

mon-pix/tests/integration/components/module/qcm_test.js Show resolved Hide resolved

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch from 20356b8 to ecb612d Compare May 13, 2024 12:25

dlahaye approved these changes May 13, 2024

View reviewed changes

VincentHardouin approved these changes May 14, 2024

View reviewed changes

mirawlin approved these changes May 14, 2024

View reviewed changes

mirawlin force-pushed the PIX-12382-fix-legend-fieldset branch from ecb612d to 31e380c Compare May 14, 2024 14:59

fix(mon-pix): legend tag should be direct child of fieldset

f6ee965

yannbertrand force-pushed the PIX-12382-fix-legend-fieldset branch from 31e380c to f6ee965 Compare May 22, 2024 13:04

yannbertrand added the 🚀 Ready to Merge label May 22, 2024

pix-service-auto-merge merged commit 8e30f20 into dev May 22, 2024
6 of 8 checks passed

pix-service-auto-merge deleted the PIX-12382-fix-legend-fieldset branch May 22, 2024 13:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382) #8835

[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382) #8835

yannbertrand commented May 3, 2024 •

edited

pix-bot-github commented May 3, 2024

dlahaye commented May 6, 2024

yannbertrand commented May 6, 2024

dlahaye commented May 6, 2024

yannbertrand commented May 6, 2024 •

edited

yannbertrand May 7, 2024

dlahaye May 10, 2024

yannbertrand May 13, 2024

dlahaye May 15, 2024

yannbertrand May 15, 2024

dlahaye May 16, 2024

yannbertrand May 17, 2024

mirawlin commented May 14, 2024

yannbertrand commented May 14, 2024

mirawlin commented May 14, 2024

mirawlin commented May 14, 2024 •

edited

yannbertrand commented May 14, 2024 •

edited

mirawlin commented May 15, 2024

yannbertrand commented May 17, 2024

		// eslint-disable-next-line no-restricted-imports
		import { click, find } from '@ember/test-helpers';

[BUGFIX] Réordonnancement des fieldset legend de Modulix (PIX-12382) #8835

[BUGFIX] Réordonnancement des fieldset legend de Modulix (PIX-12382) #8835

Conversation

yannbertrand commented May 3, 2024 • edited

🦄 Problème

🤖 Proposition

🌈 Remarques

💯 Pour tester

pix-bot-github commented May 3, 2024

dlahaye commented May 6, 2024

yannbertrand commented May 6, 2024

dlahaye commented May 6, 2024

yannbertrand commented May 6, 2024 • edited

yannbertrand May 7, 2024

Choose a reason for hiding this comment

dlahaye May 10, 2024

Choose a reason for hiding this comment

yannbertrand May 13, 2024

Choose a reason for hiding this comment

dlahaye May 15, 2024

Choose a reason for hiding this comment

yannbertrand May 15, 2024

Choose a reason for hiding this comment

dlahaye May 16, 2024

Choose a reason for hiding this comment

yannbertrand May 17, 2024

Choose a reason for hiding this comment

mirawlin commented May 14, 2024

yannbertrand commented May 14, 2024

mirawlin commented May 14, 2024

mirawlin commented May 14, 2024 • edited

yannbertrand commented May 14, 2024 • edited

mirawlin commented May 15, 2024

yannbertrand commented May 17, 2024

[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382) #8835

[BUGFIX] Réordonnancement des `fieldset` `legend` de Modulix (PIX-12382) #8835

yannbertrand commented May 3, 2024 •

edited

yannbertrand commented May 6, 2024 •

edited

mirawlin commented May 14, 2024 •

edited

yannbertrand commented May 14, 2024 •

edited