search

codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
412 stars 53 forks source link

Problème de sémantique HTML dans le composant Header #216

Open humchaop opened 9 months ago

humchaop commented 9 months ago

Il y a une erreur de sémantique dans le composant Header. Le texte du logo "Intitulé officiel" est dans une balise <p> inclus dans une balise <a>. Les balises <p> n'étant pas autorisées dans les balises <a>, nous avons une anomalie d'accessibilité.

Il faudrait supprimer la balise <p> ou la remplacer par un <span>.

Exemple de code : Composant header simple Composant Header simple

Composant Header simple avec nom du service Composant Header simple avec nom du service

garronej commented 9 months ago

Pourrais tu regarder si c'est le cas dans le template officiel?
https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete

Si c'est le cas, il faudrais traitée cette issue upstream avant

humchaop commented 9 months ago

C'est bien le cas. Quelle est la marche à suivre dans ce cas ?

garronej commented 9 months ago

Rejoindre le slack du DSFR et reporter le problème sur le canal #aide_dev.
Je vais le faire.

garronej commented 9 months ago
image

J'implémenterais ce qu'ils suggère

enguerranws commented 8 months ago

Ah, je n'avais pas vu la discussion et ai répondu sur l'issue du footer : https://github.com/codegouvfr/react-dsfr/issues/217#issuecomment-1892281387

enguerranws commented 8 months ago

Pour suivre plus simplement la discussion, je copie mon retour ici :

Inclure des balises block dans un élément était une erreur de validation en HTML / XHTML 4 et moins, ce n'est plus le cas en HTML5. Ça ne pose (à ma connaissance), pas de souci d'accessibilité également : l'arbre d'accessibilité me semble clean (cf. screenshot), l'élément est bien accessible au clavier et la lecteur de texte fonctionne bien également. Capture d’écran 2024-01-15 à 15 27 35 @humchaop Je reste à dispo si tu constates un impact négatif, pour éventuellement faire remonter ça à l'équipe du DSFR (ici, nous ne faisons que suivre l'implem HTML / CSS qu'ils mettent en place).

garronej commented 8 months ago

@humchaop

image
humchaop commented 8 months ago

J'ai crée le ticket suite à un audit sur l'un des sites que l'on développe. Je vais voir avec l'auditeur ce qu'il en est.

enguerranws commented 8 months ago

@humchaop aussi, n'hésite pas à partager l'url de ton projet (si tu peux).

humchaop commented 8 months ago

@enguerranws je ne peux pas ce sont des projets internes du MEAE

enguerranws commented 7 months ago

@humchaop des nouvelles au sujet de cette demande ?

enguerranws commented 3 months ago

@humchaop s'il n'y a pas de nouvelles, je propose de clore le ticket.