Drawer

The Drawer component has been designed with accessibility in mind.

To ease keyboard navigation, when opening a drawer, the focus is moved to the drawer.

It should not be possible to focus anything outside of the drawer while it is open, ensuring a focused user experience.

When closing the drawer, the focus should be moved back to the element that triggered the drawer. This is not handled automatically, so make sure to implement this behavior in your application by managing focus properly.

The Drawer component handles the following keyboard interactions:

• Escape key closes the drawer
• Tab key cycles through focusable elements within the drawer
• Shift+Tab navigates backward through focusable elements

The Drawer component accepts ARIA attributes to ensure it’s accessible to users of assistive technologies. You can provide these attributes as described below:

If you provide a title prop, it is automatically used as the drawer’s aria-label. However, if you also provide a ariaLabel prop, it will take precedence over the title prop.

The Drawer component includes a close button that can be displayed in the header. It’s important to use the labelHide prop to provide an accessible label for this button.

The default value is “Hide”, but you should consider providing a more descriptive label, especially for internationalization purposes.

When implementing a toggle element to open and close the drawer, it’s essential that the element uses the aria-expanded attribute to indicate whether the drawer is open (true) or closed (false). This informs assistive technologies about the current state of the drawer.

Additionally, the toggle element should use the aria-controls attribute with the value matching the drawer’s ID. This creates a programmatic association between the toggle and the drawer it controls, helping assistive technologies understand this relationship.