Accessible Components: Keyboard Nav & Focus Management

1import React, { useState, useRef, useEffect, KeyboardEvent } from 'react';
2
3interface DropdownProps {
4  label: string;
5  items: Array<{ id: string; label: string; onSelect: () => void }>;
6}
7
8export function AccessibleDropdown({ label, items }: DropdownProps) {
9  const [isOpen, setIsOpen] = useState(false);
10  const [activeIndex, setActiveIndex] = useState(0);
11
12  const triggerRef = useRef<HTMLButtonElement>(null);
13  const menuRef = useRef<HTMLUListElement>(null);
14
15  // 1. Focus active item when menu opens
16  useEffect(() => {
17    if (isOpen) {
18      const activeEl = menuRef.current?.children[activeIndex] as HTMLElement;
19      activeEl?.focus();
20    } else {
21      // Restore focus to trigger button when closed
22      triggerRef.current?.focus();
23    }
24  }, [isOpen]);
25
26  // 2. Keyboard Navigation
27  const handleKeyDown = (e: KeyboardEvent) => {
28    if (!isOpen) {
29      if (['ArrowDown', 'Enter', ' '].includes(e.key)) {
30        e.preventDefault();
31        setIsOpen(true);
32      }
33      return;
34    }
35
36    switch (e.key) {
37      case 'ArrowDown':
38        e.preventDefault();
39        setActiveIndex((prev) => (prev + 1) % items.length);
40        break;
41      case 'ArrowUp':
42        e.preventDefault();
43        setActiveIndex((prev) => (prev - 1 + items.length) % items.length);
44        break;
45      case 'Escape':
46        e.preventDefault();
47        setIsOpen(false);
48        break;
49      case 'Enter':
50      case ' ':
51        e.preventDefault();
52        items[activeIndex].onSelect();
53        setIsOpen(false);
54        break;
55    }
56  };
57
58  return (
59    <div className="dropdown-container" onKeyDown={handleKeyDown}>
60      {/* Semantic button with full ARIA announcement */}
61      <button
62        ref={triggerRef}
63        aria-haspopup="menu"
64        aria-expanded={isOpen}
65        onClick={() => setIsOpen((prev) => !prev)}
66        className="dropdown-trigger"
67      >
68        {label}
69      </button>
70
71      {isOpen && (
72        <ul ref={menuRef} role="menu" className="dropdown-menu">
73          {items.map((item, index) => (
74            <li
75              key={item.id}
76              role="menuitem"
77              tabIndex={activeIndex === index ? 0 : -1} // Roving tabindex
78              onClick={() => {
79                item.onSelect();
80                setIsOpen(false);
81              }}
82              className={activeIndex === index ? 'focused' : ''}
83            >
84              {item.label}
85            </li>
86          ))}
87        </ul>
88      )}
89    </div>
90  );
91}