Intermediate
A confirm dialog that manages focus
The Delete photo button (id="open") shows a confirm box, but it's rendered with the open attribute, so it isn't modal: focus stays behind it and keyboard users can't tell it appeared.
Open it as a modal with showModal() (a ref and an effect that reacts to the open state), and close it with close(). Label the dialog with aria-labelledby pointing at its heading Delete this photo?. When it opens, focus must be on the Cancel button. Cancel (and Delete) close the dialog, and focus must return to the #open button.
Keep React state in sync when the user presses Escape: handle the dialog's onClose.
What Check tests
- The dialog starts closed
- Clicking
#openopens it as a modal - The dialog is labelled by its heading
- Focus is on the Cancel button
- Cancel closes the dialog and focus returns to
#open - It can be opened again after closing
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.