Intermediate
A modal that manages focus
Clicking #open shows a confirmation box #confirm, but focus stays behind it and keyboard users are lost.
Make #confirm a real modal: when it opens, focus must move inside it; when #close closes it, focus must return to #open. The easiest way is a native <dialog id="confirm"> opened with showModal().
Label the modal by its heading with aria-labelledby.
What Check tests
- Clicking #open shows the modal
- Focus moves inside the modal
- The modal is labelled by its heading
- #close closes it and focus returns to #open
Stuck? One hint at a time
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.
Console
Nothing logged yet.