Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Esc | Closes the modal window. |
See more about the focus behavior in the modal window in the Keyboard control guide.
Closing modal window
You can close the modal window by clicking on the following controls:
Closeicon;- CTA or "Cancel" button;
ESCkey;- "Back" in the browser (nothing changes on the parent page);
- outside the container area.
TIP
When the modal window is closed, the focus should always return to the trigger.
Resources
W3 modal dialog example has detailed information about the modal window accessible behavior.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "Open modal button".
3. Screen reader triggers element default action.
4. Screen reader says "Do you want to save your changes? web dialog with 5 items Close button".
5. Screen reader goes to the next element.
6. Screen reader says "heading level 2 Do you want to save your changes?".
7. Screen reader goes to the next element.
8. Screen reader says "Your changes will be lost if you don't save them.".
9. Screen reader goes to the next element.
10. Screen reader says "Save changes button".
11. Screen reader triggers element default action.
12. Screen reader triggers element default action.1. Screen reader goes into the active element.
2. Screen reader says "Open modal button".
3. Screen reader triggers element default action.
4. Screen reader says "Do you want to save your changes? web dialog with 5 items Close button".
5. Screen reader goes to the next element.
6. Screen reader says "heading level 2 Do you want to save your changes?".
7. Screen reader goes to the next element.
8. Screen reader says "Your changes will be lost if you don't save them.".
9. Screen reader goes to the next element.
10. Screen reader says "Save changes button".
11. Screen reader triggers element default action.
12. Screen reader triggers element default action.