Accessibility

GlideSheet follows WAI-ARIA dialog patterns. Modal sheets trap focus, ESC closes the sheet, and screen readers get proper labels.

Title & Description

Always provide a Title and optionally a Description. These are linked to the Content via aria-labelledby and aria-describedby.

<BottomSheet.Content>
  <BottomSheet.Handle />
  <BottomSheet.Title>Edit Profile</BottomSheet.Title>
  <BottomSheet.Description>
    Update your name and avatar.
  </BottomSheet.Description>
  {/* Form content */}
</BottomSheet.Content>

If you don't want the title visible, use a screen-reader-only class:

{/* Visually hidden but announced by screen readers */}
<BottomSheet.Title className="sr-only">
  Settings
</BottomSheet.Title>

Focus management

  • In modal mode, focus is trapped inside the sheet
  • When the sheet closes, focus returns to the element that opened it
  • The Trigger component sets aria-haspopup="dialog" and aria-expanded

Keyboard

  • Escape closes the sheet (when dismissible)
  • Tab cycles through focusable elements inside the sheet

The Handle

The Handle has role="slider" with proper ARIA attributes. Tapping it cycles through snap points. A long press (250ms) prevents the cycle, useful for precision positioning.