Drawer

The drawer has different keyboard interactions depending on how it is displayed. When the drawer slides over page content, pressing Esc closes the panel and returns focus to the trigger element. The collapse toggle can be activated with Enter or Space. Focus is constrained within the panel when it slides over content.

When the drawer opens over page content, the close button receives focus. When a collapsible drawer opens, the collapse toggle receives focus. While the drawer is open over content, interactive elements outside of the drawer cannot be focused.

When the drawer closes, focus returns to the element that triggered the open action. If the drawer was opened via a trigger element referenced by trigger-id, that element receives focus on close.

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.

The close button and collapse toggle are selectable. The collapse toggle spans the full height of the panel edge making it easy to select. Clicking or tapping outside of the panel closes it when the drawer is open over content.

Each drawer needs an accessible name. If a drawer has a heading (h1–h6) in its slotted content, it will automatically be used as the accessible name.

If there is no slotted heading, users should provide an accessible-label attribute, the value of which will be used as the accessible name:

<rh-drawer accessible-label="Side Navigation">
  <nav>Navigation content</nav>
</rh-drawer>

If neither an accessible-label nor any headings exist, the accessible name falls back to "Panel".

• Content outside of the drawer cannot be interacted with or navigated to while the drawer is open over page content.
• The Esc key should close the drawer when it is open over page content.
• There should be at least one visible mechanism to close the drawer when it slides over content.
• When the drawer closes, focus should return to the last focused item before the drawer was opened.
• The close button and collapse toggle labels can be customized for localization using the close-label and collapse-label attributes or their corresponding slots.
• When displayed inline, the drawer uses the complementary landmark role so screen readers can identify it as a distinct page region.

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

• SC 2.1.1 Keyboard (Level A)

• SC 2.1.3 Keyboard (no exception) (Level AAA)

• SC 2.4.3 Focus order (Level A)

• SC 2.5.5 Target size (Level AAA)