Code example
Common baseline
dialog role on the panel
The drawer panel must have role="dialog" and aria-modal="true".
Accessible label
Provide an accessible name for the dialog via aria-labelledby or aria-label.
Focus trap
Keyboard focus must be trapped inside the drawer while it is open.
Close with Escape
Pressing Escape must close the drawer.
Focus management on open/close
Move focus to the first focusable element when opening; restore focus to the trigger on close.
Apply inert to background content
Set inert on background content to prevent screen readers from accessing it while the drawer is open.
Close on overlay click
Clicking the overlay backdrop should close the drawer.
Do not omit the focus trap
Without a focus trap, keyboard users can accidentally navigate behind the drawer.
Do not hide the visual close button
The close button must be visible so all users can easily close the drawer.
Design system implementations
Additional checks
Connect aria-labelledby to drawer title
Pass the drawer heading element id to aria-labelledby on the Drawer component so screen readers correctly identify the dialog.
variant="temporary" is Modal-based
variant="temporary" (the default) renders on top of a Modal and automatically provides focus trapping, Escape to close, and the backdrop overlay.
aria-label required on icon-only close button
Icon-only close buttons must have an aria-label (e.g., "Close navigation drawer") describing their purpose.
Code sample
Implementation notes
- –MUI Drawer variant="temporary" automatically handles focus trapping, Escape key, and backdrop click to close.
- –Place a <nav aria-label="Main navigation"> inside the Drawer to provide a navigation landmark.
- –Set aria-haspopup="dialog" on the trigger button so screen readers know it opens a dialog.