Drawer
A side panel component that slides in from the edge of the screen
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsdialog 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.
Additional checks
Use variant="temporary" for modal behavior
Use variant="temporary" so the Drawer behaves as a modal with focus trapping and backdrop.
Code sample
Implementation notes
- –MUI Drawer variant="temporary" is Modal-based and automatically handles focus trapping and Escape to close.
- –Connect aria-labelledby to the drawer title ID.
- –Set keepMounted={false} to remove the drawer from the DOM when closed.