Senior Frontend

WCAG 2.1 AA Compliant Dropdown — ARIA Listbox Pattern:

export function Dropdown({ options, value, onChange, label }: Props) {
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);
  const listRef = useRef<HTMLUListElement>(null);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'Enter':
      case ' ':
        if (!open) { setOpen(true); setActiveIndex(0); }
        else if (activeIndex >= 0) { onChange(options[activeIndex]); setOpen(false); }
        break;
      case 'ArrowDown':
        e.preventDefault();
        setActiveIndex(i => Math.min(i + 1, options.length - 1));
        break;
      case 'ArrowUp':
        e.preventDefault();
        setActiveIndex(i => Math.max(i - 1, 0));
        break;
      case 'Escape':
        setOpen(false);
        break;
    }
  };

  return (
    <div>
      <label id="dropdown-label">{label}</label>
      <button
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-labelledby="dropdown-label"
        onClick={() => setOpen(o => !o)}
        onKeyDown={handleKeyDown}
      >
        {value?.label ?? 'Select...'}
      </button>
      {open && (
        <ul
          ref={listRef}
          role="listbox"
          aria-labelledby="dropdown-label"
          tabIndex={-1}
        >
          {options.map((opt, i) => (
            <li
              key={opt.value}
              role="option"
              aria-selected={opt.value === value?.value}
              data-active={i === activeIndex}
              onClick={() => { onChange(opt); setOpen(false); }}
            >
              {opt.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

WCAG checkpoints covered: 1.3.1 (info and relationships), 2.1.1 (keyboard), 4.1.2 (name/role/value)

Test with: axe-core in Jest + manual test with VoiceOver (Mac) and NVDA (Windows).