Dialog
A dialog serves as a container for in-page contextual information or actions, allowing users to confirm or cancel tasks without navigating away from the current page.
Keyboard interactions
| Command | Description |
|---|---|
| Tab | Moves focus to the next tabbable element inside the dialog. When the dialog is opened, focus is trapped within the dialog, with the exception of being able to focus the browser UI. |
| Shift + Tab | Moves focus to the previous tabbable element inside the dialog. When the dialog is opened, focus is trapped within the dialog, with the exception of being able to focus the browser UI. |
| Escape (ESC) | Closes the dialog, but only when disableCancel is set to false (default) |
WAI-ARIA
In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.
Attributes that we recommend you add in certain scenarios are mentioned below.
| Attribute | Value | Description |
|---|---|---|
aria-describedby | string | Describes the purpose of the dialog |