Dialog draws a panel with role="dialog" and aria-modal="true" through Base UI Dialog. The title is linked with aria-labelledby and the description with aria-describedby. The title is required. While it is open the rest of the page is inert.
| Key |
Behaviour |
| Enter / Space |
Opens the dialog from its trigger. |
| Tab / Shift+Tab |
Moves focus forwards and backwards inside the dialog, wrapping at the ends. |
| Escape |
Closes the dialog; does nothing with dismissible={false}. |
- On open, focus moves to the first focusable element in the body, otherwise to the actions. The close button is last in the DOM, so it does not take focus first.
- On close, focus returns to the trigger.
- An overflowing body gets
tabIndex=0 and becomes a group named by the dialog title, so it can be scrolled with the keyboard.
| Example |
Output |
| Opening |
“Dialog title, dialog”, then the description |
| Close button |
“Close, button” |
| Forced decision |
Title and description; there is no close button |
color-text-default and color-text-subtle text on color-surface-raised reach at least 4.5:1. The panel stands out from the page by its hairline and the blurred, dimmed backdrop.
| Criterion |
How Dialog meets it |
What product teams do |
| 1.3.1 Info and relationships |
Title and description are linked to the dialog. |
Never leave the title empty. |
| 2.1.2 No keyboard trap |
Escape and the actions leave the dialog. |
Give a forced decision an action that closes it. |
| 2.4.3 Focus order |
Focus stays inside and returns on close. |
Do not remove the trigger while the dialog is open. |
| 2.4.11 Focus not obscured |
A focused element scrolls into view. |
Do not put sticky elements in the body. |
| 4.1.2 Name, role, value |
role="dialog", aria-modal, name and description. |
Keep an overridden close label meaningful. |