dsfr
dsfr copied to clipboard
Attribut aria-haspopup="menu" erroné dans le header : remplacer par "dialog"
Décrire le bug
Dans le composant en-tête, le bouton d'ouverture du menu sur petits écrans (.fr-btn--menu) possède actuellement un attribut aria-haspopup="menu"
. Or, cette valeur est erronée, car quand on parle de "menu" dans ce contexte, il s'agit d'un menu de type logiciel (pattern ARIA menu), ce qui n'est pas la même chose qu'une navigation de site internet dans notre cas.
Cela pose un souci d'accessibilité car si cet attribut est restitué par certaines technologies d'assistance, il induira en erreur l'internaute sur ce qui va s'ouvrir (le pattern "menu" a un système d'interactions très spécifiques).
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
Comportement attendu
En l'occurrence, dans notre cas, le bouton ouvre une modale, et devrait donc plutôt avoir aria-haspopup="dialog"
.
Code concerné
<div class="fr-header__navbar">
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-491" aria-haspopup="menu" id="button-492" title="Menu">
Menu
</button>
</div>
Cf https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete
Configuration et système utilisé
- Version du DSFR : 1.10
Informations complémentaires
Il pourrait être pertinent de rajouter, par la même occasion, le même attribut sur le bouton qui ouvre la modale de recherche (.fr-btn--search).