How to Generate Accessible UI with Cursor

1import { useState, useRef, useEffect, KeyboardEvent } from 'react';
2
3interface DropdownProps {
4  label: string;
5  options: { value: string; label: string }[];
6  value: string;
7  onChange: (value: string) => void;
8}
9
10export function AccessibleDropdown({ label, options, value, onChange }: DropdownProps): JSX.Element {
11  const [isOpen, setIsOpen] = useState(false);
12  const [activeIndex, setActiveIndex] = useState(-1);
13  const buttonRef = useRef<HTMLButtonElement>(null);
14  const listRef = useRef<HTMLUListElement>(null);
15
16  const selectedOption = options.find((o) => o.value === value);
17
18  useEffect(() => {
19    if (isOpen && listRef.current) {
20      const active = listRef.current.children[activeIndex] as HTMLElement;
21      active?.scrollIntoView({ block: 'nearest' });
22    }
23  }, [activeIndex, isOpen]);
24
25  const handleKeyDown = (e: KeyboardEvent): void => {
26    switch (e.key) {
27      case 'ArrowDown':
28        e.preventDefault();
29        if (!isOpen) setIsOpen(true);
30        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
31        break;
32      case 'ArrowUp':
33        e.preventDefault();
34        setActiveIndex((i) => Math.max(i - 1, 0));
35        break;
36      case 'Enter':
37      case ' ':
38        e.preventDefault();
39        if (isOpen && activeIndex >= 0) {
40          onChange(options[activeIndex].value);
41          setIsOpen(false);
42          buttonRef.current?.focus();
43        } else {
44          setIsOpen(true);
45        }
46        break;
47      case 'Escape':
48        setIsOpen(false);
49        buttonRef.current?.focus();
50        break;
51    }
52  };
53
54  return (
55    <div className="relative" onKeyDown={handleKeyDown}>
56      <label id={`${label}-label`} className="block text-sm font-medium mb-1">
57        {label}
58      </label>
59      <button
60        ref={buttonRef}
61        aria-haspopup="listbox"
62        aria-expanded={isOpen}
63        aria-labelledby={`${label}-label`}
64        onClick={() => setIsOpen(!isOpen)}
65        className="w-full border rounded px-3 py-2 text-left focus:ring-2"
66      >
67        {selectedOption?.label || 'Select an option'}
68      </button>
69      {isOpen && (
70        <ul
71          ref={listRef}
72          role="listbox"
73          aria-labelledby={`${label}-label`}
74          aria-activedescendant={activeIndex >= 0 ? `option-${activeIndex}` : undefined}
75          className="absolute w-full border rounded mt-1 bg-white shadow-lg z-10"
76        >
77          {options.map((option, index) => (
78            <li
79              key={option.value}
80              id={`option-${index}`}
81              role="option"
82              aria-selected={option.value === value}
83              className={`px-3 py-2 cursor-pointer ${index === activeIndex ? 'bg-blue-100' : ''} ${option.value === value ? 'font-bold' : ''}`}
84              onClick={() => { onChange(option.value); setIsOpen(false); buttonRef.current?.focus(); }}
85            >
86              {option.label}
87            </li>
88          ))}
89        </ul>
90      )}
91    </div>
92  );
93}