The Waiting Room · Modal & Focus Trap
A proper modal dialog: opening moves focus inside, Tab cycles within it, closing returns focus to the trigger. Every exit is assertable.
A modal takes over: focus trapped, overlay dimmed, three ways out — or take a number.
Modal & Focus Trap is a medium Frames, Windows & DOM challenge on Fun UI Playground. A proper modal dialog: opening moves focus inside, Tab cycles within it, closing returns focus to the trigger. Every exit is assertable. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “modal-”, and the techniques it exercises are modal dialogs, focus traps, Escape/overlay dismissal, focus return assertions.
At a glance
- Category
- Frames, Windows & DOM
- Difficulty
- medium
- Teaches
- modal dialogs · focus traps · Escape/overlay dismissal · focus return assertions
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedmodal-
Selectors on this page
| Locator | What it is |
|---|---|
#modal-open #modal-dialog #modal-overlay | Open: #modal-open → the dialog is #modal-dialog (role="dialog", aria-modal="true") on overlay #modal-overlay |
#modal-close #modal-cancel #modal-take-number | Close via Escape, a click on the overlay, #modal-close, or #modal-cancel; commit via #modal-take-number |
#modal-result | Your exit route is recorded in #modal-result |
#modal-open | Focus is trapped while open (Tab cycles the dialog's buttons) and returns to #modal-open on close |
Frequently asked questions
How do I test a modal dialog's focus trap?
Open with #modal-open, assert focus moved into #modal-dialog (role="dialog", aria-modal="true"), Tab through and assert focus cycles inside the dialog, then close and assert focus returned to #modal-open.
Should I assert presence or visibility for this modal?
Presence — the dialog is only in the DOM while open, so absence is a valid assertion after closing. There are four exits (Escape, an overlay click, #modal-close, #modal-cancel) plus #modal-take-number to commit, and the route you used is recorded in #modal-result.
More Frames, Windows & DOM
- Multiverse Portals · Multiple Windows
- Hero Gazette Editor · iFrame Editor
- Mission Control · Nested Frames
- Droid Memory Core · Shadow DOM
- The Vanishing Act · Visibility Semantics
- The Reshuffled Floor · Challenging DOM
- All Frames, Windows & DOM challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.