[Accessibilité] Composant Button avec icone seule

[benoit-tb]

Bonjour,

Le DSFR précise qu'il est possible de définir un bouton avec seulement une icône (cf. https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/bouton/demonstration-du-bouton, paragraphe "Icon Only Story"). Exemple :

<button type="button" class="fr-btn fr-icon-checkbox-line">libellé du bouton</button>

A l'heure actuelle, la seule façon de faire cela via react-dsfr est de faire ainsi :

<Button
  iconId="fr-icon-checkbox-circle-line"
  onClick={function noRefCheck(){}}
  title="Label button"
/>

L'auditeur nous remonte une non-conformité d'un point de vue accessibilité sur le point 10.2 : Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ?. En effet, en utilisant le composant Button ainsi, aucun texte n'est généré entre <button> et </button>. Lorsque l'on désactive le CSS, le bouton n'est donc pas réellement "visible".

Exemple :

Si l'on rajoute du texte entre les balises, ce texte est affiché dans le bouton. On perd donc cette fonctionnalité de créer un bouton avec une icône seulement. Exemple :

<Button
  iconId="fr-icon-checkbox-circle-line"
  onClick={function noRefCheck(){}}
  title="Label button"
>
  Text
</Button>

Cela vient du fait que la classe fr-btn--icon-left est automatiquement ajoutée, et du coup la classe CSS qui cache le texte n'est pas utilisée :

.fr-btn[class^="fr-icon-"]:not([class*="fr-btn--icon-"]), .fr-btn[class*=" fr-icon-"]:not([class*="fr-btn--icon-"]), .fr-btn[class^="fr-fi-"]:not([class*="fr-btn--icon-"]), .fr-btn[class*=" fr-fi-"]:not([class*="fr-btn--icon-"]) {
  overflow: hidden;
  white-space: nowrap;
  max-width: 2.5rem;
  max-height: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

Je vois plusieurs alternatives pour modifier ce comportement :

• Faire en sorte que la classe fr-btn--icon-left ne soit rajoutée seulement si la prop iconPosition est fournis (mais cela aurait un impact sur l'existant)
• Trouver un moyen de préciser "iconOnly", via une nouvelle prop par exemple
• Rajouter un peu d'intelligence dans le composant et faire en sorte qui si title est fournis, que l'on a seulement une icone, alors pas de classe fr-btn--icon-left et le children vaut le title
• Autre ?

Est-ce suffisamment clair pour vous ? Avez-vous une préférence sur le correctif à apporter ?

N'hésitez pas à revenir vers moi si besoin.

NB : Le problème est similaire lorsque l'on créer un lien avec le composant Button, en utilisant la props linkProps