codegouvfr / codegouvfr/react-dsfr

[Accessibilité] Composant Button avec icone seule

Open
#497 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
496
Forks
99
Avg merge
15h 36m
Merged PRs (30d)
4

Description

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 :

`libellé du bouton`

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

```tsx

```

L'auditeur nous remonte une non-conformité d'un point de vue accessibilité sur le point [10.2](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#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 `` et ``. Lorsque l'on désactive le CSS, le bouton n'est donc pas réellement "visible".

Exemple :

Image

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 :

```tsx

Text

```

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 :

```css
.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`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.