Les modules qui s'initialisent en sélectionnant des éléments par leurs attributs ARIA (Disclosure et Tooltip notamment) ne fonctionnent pas si l'attribut comporte plusieurs valeurs.
Les étapes pour reproduire le bug
Créer une modale avec l'id ma-modale.
Créer un élément <div id="mon-element"></div>
Créer un bouton d'activation de modal avec l'attribut aria-controls="ma-modale mon-element"
Essayer de déclencher l'ouverture de la modale avec le bouton
this.register(`[aria-controls="${this.id}"]`); // match la valeur exact
this.register(`[aria-controls~="${this.id}"]`); // match la valeur dans une liste de valeur séparé par des espaces
Décrire le bug
Les modules qui s'initialisent en sélectionnant des éléments par leurs attributs ARIA (Disclosure et Tooltip notamment) ne fonctionnent pas si l'attribut comporte plusieurs valeurs.
Les étapes pour reproduire le bug
ma-modale.<div id="mon-element"></div>aria-controls="ma-modale mon-element"Comportement attendu
La modale devrait s'ouvrir même si son id n'est pas l'unique valeur de l'attribut
aria-controls. En effet la majorité des attributs ARIA ciblant des éléments autorisent plusieurs valeurs séparées pas des espaces. Cf. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls#valuesDans le DSFR c'est également problématique pour les tooltips ciblé par
aria-describedby.Le problème est simple a régler grace au selecteur CSS d'attribut
~=au lieu de=Configuration et système utilisé