How to test
Modals & Dialogs
A modal must take focus, keep it, and give it back — while making everything behind it inert. Most dialog bugs are focus-management bugs.
What to test
- On open, focus moves into the dialog (the dialog, its heading, or the first control).
- Focus is contained while open; Tab cycles within the dialog.
- Escape closes the dialog (unless intentionally disabled for an alert dialog).
- On close, focus returns to the element that opened it.
- Content behind is inert and hidden from assistive tech (aria-modal / inert).
- The dialog has role=dialog (or alertdialog) and an accessible name.
How to test
- 1Open the dialog with the keyboard and confirm where focus lands.
- 2Tab all the way around; confirm focus never leaves the dialog.
- 3Press Escape; confirm it closes and focus returns to the trigger.
- 4With a screen reader, confirm background content isn't reachable while open.
Common failures
- Focus stays on the trigger behind the overlay when the dialog opens.
- Tab escapes to the page behind the dialog.
- Focus dropped to <body> on close instead of returning to the trigger.
- Background not inert — the screen reader reads straight through the overlay.