Advanced
Round 3: the accessible modal
A timed round. The <dialog> opens and closes instantly. Make it fade and rise in, and fade out on Close and on Esc.
The dialog must stay in the page while it leaves (so the exit can play), a second Esc must not restart it, focus must go back to the button, and reduced motion means a fade without movement.
What Check tests
- 60 ms after opening it is part way in
- It is modal, and focus is inside
- Esc plays the exit, then closes it and returns focus
- A second Esc during the exit changes nothing
- Reduced motion: it fades but does not move
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
animations
0.00s0.10s0.20s0.30s0.40s0.50s0.60s0.70s0.80s0.90s
Nothing is moving yet. Hover, click or scroll the page: every animation it starts shows up here as a track.
frames
Console
Nothing logged yet.