Focus trap
Keeping keyboard focus inside a specific region (typically a modal dialog) until that region is dismissed.
When a modal opens, keyboard focus should move into it and stay there. Tab on the last focusable element should cycle back to the first; Shift+Tab on the first should cycle to the last. Focus should not be able to escape into the background page while the modal is open. The native `<dialog>` element handles focus trapping for free when opened with `showModal()`; for custom modals, libraries like Radix and React Aria implement the trap. This is an accessibility requirement, not a stylistic choice.
Also called
When to use
- Any modal dialog or alert dialog
- Bottom sheets and full-screen overlays that block the background
- Command palettes and search overlays
When not to use
- Popovers and tooltips that are non-blocking
- Toasts and banners that don't capture focus
- Drawers that are technically a sidebar, not a modal layer
Related
Source
W3C ARIA Authoring Practices Guide (Dialog pattern requires focus management). WCAG 2.4.3 (Focus Order) and the native HTML `<dialog>` element specification.