dsfr icon indicating copy to clipboard operation
dsfr copied to clipboard

Attribut aria-haspopup="menu" erroné dans le header : remplacer par "dialog"

Open mh-nichts opened this issue 1 year ago • 0 comments

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).

mh-nichts avatar Aug 28 '23 10:08 mh-nichts