Attribut aria-labelledby pour les modales de menu et recherche

[mh-nichts]

Décrire le bug

Sur les éléments .fr-header__search et .fr-header__menu, il y a un attribut aria-labelledby renseigné, qui sert lorsque ces éléments deviennent des modales sur petits écrans : ils prennent alors un role="dialog"(géré en JS), et le aria-labelledby sert à lui donner un nom (texte du bouton associé), pour restitution par les technologies d'assistance comme les lecteurs d'écrans.
Cependant, sur grands écrans, le aria-labelledby est toujours présent, alors qu'il ne "sert à rien" car il s'agit d'une simple div sans rôle particulier donc pas de nom accessible à restituer.
Plus qu'une bonne pratique, cela évitera la remontée d'erreur à ce sujet par différents outils de tests automatisés d'accessibilité, car il est considéré comme "prohibited" d'indiquer un nom accessible sur un élément qui a un rôle generic : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role#description

Les étapes pour reproduire le bug

1. Aller sur https://www.systeme-de-design.gouv.fr/ sur un écran desktop
2. Utiliser l'extension ARC Toolkit : https://www.tpgi.com/arc-platform/arc-toolkit/
3. Dans l'onglet ARC Toolkit de la devtools : lancer "Run tests"
4. La première (et seule) erreur remontée est :
   "ARIA attribute is not allowed"
   Description: The aria-labelledby attribute is not allowed on the generic role
   <div id="modal-header__menu" aria-labelledby="button-861" class="fr-header__menu fr-modal" data-fr-js-modal="true" data-fr-js-header-modal="true" data-fr-js-header-modal-actionee="true" data-fr-js-modal-actionee="true"></div>

Dans le cadre d'un site DSFR qui contiendrait aussi une recherche dans son en-tête, il y aurait la même erreur remontée pour le conteneur/modale de recherche.

En revanche, si on relance les tests pour une taille d'écran inférieure ou égale à 991px, l'erreur n'est plus remontée.

Comportement attendu

Le aria-labelledby devrait être géré en JS en même temps que le role="dialog" : pour le désactiver sur grands écrans, il pourrait être transformé en data-aria-labelledby par exemple ? Puis réactivé à nouveau en aria-labelledby sur petits écrans, en même temps que le role="dialog" est ajouté ?

Capture d’écran

Configuration et système utilisé

• Version du DSFR : 1.12.1
• Appareil : desktop (largeur supérieure à 991px)
• Système d’exploitation : Ubuntu
• Navigateur et version : Firefox 130.0.1
  Remontée valable pour tout device/navigateur, tant que la taille d'écran est supérieure à 991px.