Agriculture Design System
Design System for import and export services

Drawer

A drawer is a panel that slides in from the right side of the screen. The Drawer is overlayed on top of the main area of the page to capture the user’s attention while keeping the context of the current task.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/drawer';

Learn more about how to meet WCAG success criteria when implementing drawers. This makes them accessible and inclusive for users of all abilities and situations.

The drawer component passed accessibility testing in 2024.

Requirements

  • Buttons and links have clear, concise and descriptive text.
  • Button and link text should be unique and avoid generic phrases like ‘Click here’ or ‘Learn more’.
  • If using more than one button or link, each is uniquely identifiable.
  • Visible indication that a link opens in a new window, tab or drawer.
  • Links have accessible names that indicate if they open in a new window, new tab or drawer.

Benefits

  • Assistive technology users have equal access to information about the purpose of the link or button.
  • All users can identify the purpose of the link or button.
  • Supports users by providing clear expectations.
  • Improves usability and reduces confusion over where links will lead.

WCAG references

Content structure

Requirements

  • Meaningful and logical sequence of content in the drawer.
  • Information relationships in the drawer are logical and understood and conveyed by assistive technology.
  • Headings clearly describe or introduce content.
  • Use h2 to h6 to identify headings in drawers.
  • Forms in the drawer have an id.
  • The primary button is type="submit" with a form attribute whose value is the <form>’s id.

Benefits

  • Creates a logical structure for screen reader navigation.
  • Ensures content makes sense regardless of the technology used.
  • Helps users understand the organisation and relationship of content.
  • Makes the information easier to locate.
  • Increases understanding of the content that comes next.

WCAG references

Edit this page