A drawer shows a place, not a moment: a record’s details, a long form, an inspector. It keeps the page visible behind it and can be deep-linked. On a phone it becomes a bottom sheet that closes with a swipe down or its grabber button.
Read from the component manifest, so this is the component’s own contract. See Overlays for layers, stacking and dismissal shared by all layers.
| Stage | beta |
|---|
| Keyboard | - Tab and Shift+Tab loop inside the drawer
- Escape closes it
- Enter or Space on the grabber changes the snap point
|
|---|
| Dismissal | - escape: yes
- outside press: yes, unless dirty
- close button: yes, guarded when dirty
- swipe: yes, guarded when dirty
- back gesture: closes it
|
|---|
| Stacking | Opens under a dialog; an AlertDialog or a dialog may open over it; an AlertDialog may be a terminal third layer; no other third modal. |
|---|
| Accessibility | - A modal
role="dialog" named by its title: focus is trapped and returns to the trigger, the page behind is inert, Escape closes it. The Back gesture closes it on a phone.
|
|---|
| Pattern | APG: dialog modal |
|---|
| Docs | Storybook |
|---|
| Stage | beta |
|---|
| Accessibility | role="dialog" named by title; a body that scrolls becomes a labelled, focusable region. The grabber's name says what it does (expand or collapse) and swiping has this button as its alternative (WCAG 2.5.7).
|
|---|
| Docs | Storybook |
|---|
| Stage | beta |
|---|
| Accessibility | - Gets
aria-haspopup="dialog" and aria-expanded.
|
|---|
| Docs | Storybook |
|---|
