Drawer -- Accessibility

Keyboard

Key	Action
`Escape`	Closes the drawer.
`Tab`	Moves focus to the next focusable element inside the drawer.
`Shift+Tab`	Moves focus to the previous focusable element inside the drawer.
`Enter` / `Space`	Activates the focused button or control.

When the drawer is open, focus is trapped within its content. Pressing Tab on the last focusable element wraps focus back to the first, and Shift+Tab on the first element wraps to the last. Focus never escapes to the page behind the overlay.

On open, focus moves to the first focusable element inside DrawerContent. On close, focus returns to the element that triggered the drawer (typically DrawerTrigger).

ARIA roles

Element	Attribute	Value
`DrawerContent`	`role`	`dialog`
`DrawerContent`	`aria-modal`	`true`
`DrawerContent`	`aria-labelledby`	ID of `DrawerTitle`
`DrawerContent`	`aria-describedby`	ID of `DrawerDescription` (when present)
`DrawerClose`	`aria-label`	`"Close"`

The overlay element receives aria-hidden="true" and prevents interaction with the page behind it.

Touch interaction

Swipe down on the drawer content or the drag handle dismisses the drawer.
The drag handle at the top of the drawer provides a visible affordance for the swipe gesture.
A minimum swipe velocity or distance threshold prevents accidental dismissal.
Tapping the overlay behind the drawer also closes it.

Screen readers announce the drawer title when it opens via aria-labelledby.
When a DrawerDescription is provided, it is announced as supplementary context.
The close button is labelled so screen readers can announce it as "Close".
Content behind the drawer is marked as inert, so screen readers cannot navigate to it while the drawer is open.

Reduced motion

When prefers-reduced-motion: reduce is active:

The slide-in/out animation is replaced with a simple fade.
The swipe-to-dismiss gesture threshold is lowered so less dragging is required.
Spring physics on the drag handle are disabled.

Native (React Native)

Uses Modal with slide animation.
Android back button closes the drawer via onRequestClose.
accessibilityRole="none" on the overlay to prevent screen reader focus.
Touch gestures use PanResponder with accessible fallback controls.

Best practices

Always provide a close mechanism (close button or swipe down).
Keep drawer content focused and concise.
The drag handle provides a visual affordance for swipe interaction.
Use DrawerTitle in every drawer so assistive technology can identify it.
Avoid placing complex multi-step flows inside a drawer; use a full-page route instead.