Fix "Button without accessible name" in React

Why it's a problem

An icon-only button has no name for assistive technologies: the user just hears "button" without knowing what it does.

How to fix it — React

Provide an accessible name with aria-label (or visually-hidden text), and hide the decorative icon with aria-hidden="true".

Avoid

<button onClick={close}>
  <CloseIcon />
</button>

Correct

<button onClick={close} aria-label="Fermer la fenêtre">
  <CloseIcon aria-hidden="true" />
</button>

RGAA criterion 11.9 — Formulaires

Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ?

How to check: official tests (in French)

Test 11.9.1
L’intitulé de chaque bouton vérifie-t-il ces conditions (hors cas particuliers) ?
S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent ;
S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby est pertinent ;
S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button est pertinent ;
S’il est présent, le contenu de la balise <button> est pertinent ;
S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image est pertinent ;
S’il est présent, le contenu de l’attribut title est pertinent.
Test 11.9.2
Chaque bouton affichant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ?
S’il est présent, le contenu de l’attribut WAI-ARIA aria-label contient au moins l’intitulé visible ;
S’il est présent, le passage de texte lié au bouton via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut value d’une balise <input> de type submit, reset ou button contient au moins l’intitulé visible ;
S’il est présent, le contenu de la balise <button> contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut alt d’une balise <input> de type image contient au moins l’intitulé visible ;
S’il est présent, le contenu de l’attribut title contient au moins l’intitulé visible.