77 Modal Isolation. 77 of 95.
77/FOCUS MANAGEMENT/77 of 95
Modal Isolation
Tab stays inside; the page behind stays inert.
The problem
Without a trap, Tab escapes into the page behind a modal — and a dimmed backdrop still accepts clicks.
The solution
Focus loops inside the modal; the background is inert to keyboard and pointer.
Experiment
Play with the values
How it works
- Sentinel elements sit at the start and end of the dialog's tab order.
- Opening the modal moves focus to the first control inside it.
- Tabbing past the last control lands on the exit sentinel.
- That sentinel redirects focus to the first or last real control.
- The cycle continues until the dialog is dismissed, and the page behind stays inert.
Seen in
Modal dialogs
Tab and Shift+Tab loop among dialog controls until Escape or close.
Drawer panels
Side sheets keep keyboard focus inside while open.
Onboarding wizards
Step modals prevent accidental focus into the app behind.
Auth screens
Login overlays trap focus so credentials stay the only interactive path.