Skip to main content

Accessibility Guide

Temper is built on top of Radix UI's Dialog primitive to ensure WCAG 2.1 compliance and screen reader support out of the box.

Key Accessibility Features​

  1. Screen Reader Announcements:

    • Drawer.Title sets the aria-labelledby attribute on the dialog element.
    • Drawer.Description sets the aria-describedby attribute on the dialog element.

  2. Focus Management:

    • When opened, focus is automatically trapped inside the active drawer.
    • Initial focus goes to the first focusable element inside <Drawer.Content>.
    • When closed, focus is automatically restored to <Drawer.Trigger>.

  3. Keyboard Controls:

    • Pressing Escape closes the open drawer.
    • Pressing Tab cycles focus strictly inside the open drawer.

  4. Touch Target Size:

    • <Drawer.Handle /> includes a hidden hit target extension (data-temper-handle-hitarea) ensuring a minimum 44x44px touch target on touchscreens, meeting WCAG Target Size guidelines.

Best Practices​

[!IMPORTANT] Always include <Drawer.Title> inside <Drawer.Content>. If you wish to visually hide the title while preserving screen reader accessibility, apply a screen-reader-only CSS class (sr-only / visually-hidden).

<Drawer.Title className="sr-only">
  Navigation Drawer
</Drawer.Title>