Créer un composant React accessible avec TypeScript

Mentionnez la bibliothèque de styles déjà utilisée dans votre projet pour que le résultat s'y intègre. Vérifiez toujours le composant avec un lecteur d'écran ou le panneau d'accessibilité du navigateur.

Composant : sélecteur de date avec plage minimale et maximale.

Composant (extrait)

export interface CityComboboxProps {
  options: string[];
  label?: string;
  status?: 'loading' | 'error' | 'success';
  onSelect: (city: string) => void;
}

export function CityCombobox({ options, label = 'Ville', status = 'success', onSelect }: CityComboboxProps) {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(-1);
  const listId = useId();
  const results = options.filter((c) => c.toLowerCase().includes(query.toLowerCase()));

  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'ArrowDown') setActive((i) => Math.min(i + 1, results.length - 1));
    if (e.key === 'ArrowUp') setActive((i) => Math.max(i - 1, 0));
    if (e.key === 'Enter' && results[active]) onSelect(results[active]);
    if (e.key === 'Escape') setActive(-1);
  }

  return (
    <div className="relative">
      <label htmlFor={`${listId}-input`} className="block text-sm font-medium">{label}</label>
      <input
        id={`${listId}-input`} role="combobox" aria-expanded={results.length > 0} aria-controls={listId}
        aria-activedescendant={active >= 0 ? `${listId}-${active}` : undefined}
        className="w-full rounded border px-3 py-2 focus-visible:ring-2 focus-visible:ring-blue-600"
        value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKeyDown}
      />
      <ul id={listId} role="listbox" className="absolute z-10 w-full rounded border bg-white">
        {results.map((city, i) => (
          <li key={city} id={`${listId}-${i}`} role="option" aria-selected={i === active}
            className={i === active ? 'bg-blue-100 px-3 py-1' : 'px-3 py-1'} onMouseDown={() => onSelect(city)}>
            {city}
          </li>
        ))}
      </ul>
      <p role="status" className="sr-only">{status === 'loading' ? 'Chargement…' : `${results.length} résultats`}</p>
    </div>
  );
}

Choix d'accessibilité

• Le focus reste sur le champ et aria-activedescendant indique l'option active, comme le préconise le motif combobox d'ARIA.
• Le nombre de résultats est annoncé dans une zone role="status" : le lecteur d'écran l'annonce sans déplacer le focus…