Accessibilité : Composant Select avec un state === "default" génère un attribut aria-describedby="select-:XXX:-desc" sans cible.

[orousseil]

Lorsque l'on utilise la liste désoulante (composant Select) et qu'il n'y a pas de state spécifique (donc state === "default") alors le framework react-dsfr génère un code html du genre :

<select id="page-size-:ru:" class="fr-select" aria-describedby="select-:r17:-desc">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>

L'attribut aria-describedby ne référence aucun élément avec cet id égal à "select-:r17:-desc".

En effet, la balise html p qui est la cible de cet attribut n'est générée que si state !== "default" (cf Select.tsx ligne 117)

On a donc l'erreur d'accessibilitée suivante qui est remontée par le plugin WAVE (controle d'accessibilité) :

Errors
Broken ARIA reference

Si on utilise le nativeSelectProps["aria-describedby"] avec "myId", cela ne corrige pas le souci car il attend du coup un aria-describedby="select-:r17:-desc myId" et les attributs id ou aria-describedby ne fonctionnent pas comme le class où l'espace est un séparateur.

Selon moi, il ne faudrait pas générer l'attribut aria-describedby sur la balise html select dans le cas où state === "default".

Référence complète WAVE :

Errors
Broken ARIA reference

What It Means
An aria-labelledby or aria-describedby reference exists, but the target for the reference does not exist.

Why It Matters
ARIA labels and descriptions will not be presented if the element referenced does not exist in the page.

How to Fix It
Ensure the element referenced in the aria-labelledby or aria-describedby attribute value is present within the page and presents a proper label or description.

The Algorithm... in English
An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.

Standards and Guidelines
1.3.1 Info and Relationships (Level A)
4.1.2 Name, Role, Value (Level A)

[garronej]

Bonjour @orousseil,

Merci pour ce rapport détaillé.
Pensez-vous pouvoir soumettre une pull request pour corriger ce problème ?

[MBrandone]

J'ai proposé une PR qui règle le problème : #403

[celinegilet]

Nouvelle PR pour régler le problème également sur le SelectNext : #404