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. If focus is on the last tabbable element, it wraps back to the first. When the dialog is opened, focus is trapped within the dialog. |
| Shift + Tab | Moves focus to the previous tabbable element inside the dialog. If focus is on the first, it wraps to the last. When the dialog is opened, focus is trapped within the dialog. |
| 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 |