Build an accessible React component with TypeScript

Mention the styling library your project already uses so the output fits. Always check the component with a screen reader or the browser accessibility panel.

Component: date picker with minimum and maximum range.

Component (excerpt)

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

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

Accessibility decisions

• Focus stays on the input and aria-activedescendant points to the active option, as the ARIA combobox pattern recommends.
• The result count is announced in a role="status" region, so screen readers report it without moving focus…