BEFORELooks like a modal, but behaves like a random popup
Problems: no dialog semantics, no focus move, no focus trap, no Escape close. Keyboard users can tab “behind” the overlay.
Background controls (still reachable):
- Try: click Edit profile, then press
Tabrepeatedly. - Notice: focus can move to the background, even though the overlay is visible.
- Try: press
Esc(nothing happens).
AFTERDialog with semantics + focus trap + Escape + focus restore
Pattern: role="dialog" + aria-modal="true", move focus in on open, keep Tab inside, close on Escape, restore focus to opener.
Background controls (disabled for keyboard focus while modal open):
Tip: when the dialog is open, press Tab and Shift+Tab to see the focus trap.
Notes: this demo uses a simple JavaScript focus trap. In production, also ensure background content can’t be interacted with
(for example, using inert where supported).
Quick checklist
- Use
role="dialog"and a programmatic name:aria-labelledby(oraria-label). - Modal dialogs: add
aria-modal="true"and prevent background interaction. - On open: move focus into the dialog (often first field or close button).
- Trap focus: keep
Tab/Shift+Tabinside while open. - On close: restore focus to the element that opened the dialog.
- Support Escape to close (unless Escape would cause data loss without warning).