Role and semantics
Section titled “Role and semantics”Drawer draws a panel with role="dialog" through Base UI Drawer; the title is linked as its name and the description as its description. A modal drawer has aria-modal="true" and makes the page inert. The handle is decorative (aria-hidden).
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter / Space | Opens the drawer from its trigger. |
| Tab / Shift+Tab | In a modal drawer focus cycles inside. |
| Escape | Closes the drawer. |
Swiping is never the only way: every drawer has a close button and Escape (WCAG 2.5.7).
- On open, focus moves to the first element in the body, otherwise to the actions.
- On close, focus returns to the trigger.
- With
modal={false}focus is not trapped; Tab can move to the page.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Opening | “Panel title, dialog”, then the description |
| Close button | “Close, button” |
Contrast
Section titled “Contrast”Text on color-surface-raised reaches at least 4.5:1. The handle (handle) is decorative and light; it needs no 3:1 contrast because the sheet can be swiped anywhere and always has a close button.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Drawer meets it | What product teams do |
|---|---|---|
| 2.5.7 Dragging movements | A close button and Escape besides swiping. | Do not hide the close button. |
| 2.1.2 No keyboard trap | Escape and the close button leave it. | Nothing. |
| 2.4.3 Focus order | Focus stays inside and returns on close. | Do not remove the trigger while it is open. |
| 1.3.4 Orientation | Switches to a bottom sheet on narrow screens. | Nothing. |
| 4.1.2 Name, role, value | role="dialog", name and description. |
Never leave the title empty. |