Intermediate
An accessible modal in a portal
The Delete button (id="open") should open a confirmation dialog. Build the ConfirmDialog component so that:
it is rendered with createPortal into document.body (not inside #root), and the dialog element has role="dialog", aria-modal="true" and aria-labelledby pointing at its heading;
when it opens, focus moves into the dialog (to the dialog itself or its Cancel button, id="cancel");
Cancel or the Escape key closes it, and focus goes back to the Delete button.
What Check tests
- Delete opens a dialog with the right roles
- The dialog is rendered outside
#root - The dialog is labelled by its heading
- Focus moves into the dialog
- Escape closes it and focus returns to Delete
- Cancel closes it too
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.