Drawer

Overview

The drawer component is a modal sidebar built on top of the native <dialog> element. It provides a smooth sliding animation and a seamless user experience across both desktop and mobile devices. The default implementation slides in from the left when opened and snaps closed when dismissed. It includes a semi-transparent blurred background and can be closed using the ESC key or by clicking on the background. The drawer is fully accessible with ARIA attributes and supports both mouse and keyboard navigation.

Example Usage

Complete Drawer with Button Example

<button
  class="skin-primary-emphasised interactive btn"
  onclick="backdropDrawer.showModal()"
  aria-haspopup="dialog"
>
  Open Drawer

</button>

<dialog
  id="backdropDrawer"
  class="skin drawer"
  role="dialog"
  aria-modal="true"
  aria-labelledby="simple-drawer-title"
  aria-describedby="backdrop-drawer-content"
>

  <form method="dialog" class="drawer-backdrop-click" aria-hidden="true">

    <button aria-hidden="true" tabindex="-1" aria-label="Close Drawer">
    </button>

  </form>

  <div class="drawer-box">

    <form method="dialog" class="drawer-control-bar">

      <button class="drawer-close-button">

        <span>Close
        </span>

        <span aria-hidden="true">✕
        </span>

      </button>

    </form>

    <h3 id="simple-drawer-title" class="text-lg font-semibold">
      Simple Drawer
    
    </h3>

    <div id="backdrop-drawer-content">
      This Drawer opens with a transition from the left and can be closed with
      ESC key or by clicking the background
    
    </div>

  </div>

</dialog>

CSS Variables

The styling of the base drawer is defined by the following variables. As with all components, they will use these default values, but can be redefined within your main css file.

Accessibility

The drawer is built following the WAI-ARIA Modal Dialog Pattern, implementing key accessibility features through semantic HTML and ARIA attributes.

Structure and Labeling

Each Drawer includes:

• The role="dialog" attribute to identify it as a modal dialog
• aria-modal="true" to indicate it’s a modal context
• aria-label to provide an accessible name for the drawer
• aria-controls on trigger buttons to associate them with their respective drawers

Keyboard Support

The native HTML <dialog> element provides:

• ESC key to close the drawer
• Tab key to navigate through focusable elements
• Automatic focus management within the drawer

Screen Reader Support

The drawer includes:

• Clear labeling of all interactive elements
• Proper content organization
• Hidden decorative elements using aria-hidden="true"
• Descriptive button labels for actions and close buttons

Mobile Accessibility

For mobile devices:

• Clear close mechanisms (either close button or backdrop)
• Touch-friendly target sizes
• Maintained content structure

Required Implementation Steps

When implementing drawers in your project, ensure you:

Content Structure

• Use semantic HTML elements for content structure
• Include descriptive text for all buttons and interactive elements
• Maintain proper focus management

Keyboard Navigation & focus

• Javascript must be used to entirely trap the focus within the drawer. In some browsers such as Chrome, when the user has reached the end of the drawer, tabbing again will move focus to the browsers toolbar. In order to make the drawer as accessible as possible, it should ignore the tool bar and go back to the start of the drawer’s index.

ARIA Attributes

• Add appropriate aria-label value to the dialog element
• Include aria-controls on trigger buttons
• Add descriptive aria-label values for action buttons
• Use aria-hidden="true" for decorative elements