Crear un componente React accesible con TypeScript

Indica la librería de estilos que ya usa tu proyecto para que el resultado encaje. Revisa siempre el componente con un lector de pantalla o con la pestaña de accesibilidad del navegador.

Componente: selector de fecha (DatePicker) con rango mínimo y máximo.

Componente (extracto)

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

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

Decisiones de accesibilidad

• El foco se queda en el input y aria-activedescendant indica la opción activa, como recomienda el patrón combobox de ARIA.
• El recuento de resultados se anuncia en una región role="status", así el lector de pantalla informa sin mover el foco…