Eine barrierefreie React-Komponente mit TypeScript bauen

Nennen Sie die Styling-Bibliothek, die Ihr Projekt bereits nutzt, damit das Ergebnis passt. Prüfen Sie die Komponente immer mit einem Screenreader oder dem Barrierefreiheits-Panel des Browsers.

Komponente: Datumsauswahl mit minimalem und maximalem Bereich.

Komponente (Auszug)

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

export function CityCombobox({ options, label = 'Stadt', 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' ? 'Wird geladen …' : `${results.length} Ergebnisse`}</p>
    </div>
  );
}

Barrierefreiheits-Entscheidungen

• Der Fokus bleibt im Eingabefeld, aria-activedescendant zeigt auf die aktive Option – so empfiehlt es das ARIA-Combobox-Muster.
• Die Trefferzahl wird in einem role="status"-Bereich angesagt, damit Screenreader sie melden, ohne den Fokus zu verschieben …