When the drawer component is expanded, the focus is automatically moved to the first interactive element within the drawer.

Focus is trapped within the drawer to help simplify keyboard navigation and keep the person's attention within its context.

The drawer can be expanded or collapsed by pressing 'Enter' or 'Space' when focused on the arrow button. The controlled variant can be collapsed using the 'close' button. Pressing the 'Escape' key will also collapse the drawer.

The drawer component uses thearia-expanded attribute to indicate to screen reader users whether it is expanded or collapsed.

The drawer component uses thedialog role.

The drawer component has been based on the following resources:

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different people with different interaction methods.