Drawer, side panel

Updated 2026-05-19

Overview Content Accessibility Code

Accessibility

• Keyboard & Focus
  - All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be
  focus moves into the overlay on open; trapped while modal-blocking; returns to trigger on close
• ARIA Guidance
  - Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a
  dialogs use role=dialog + aria-modal=true + labelled by header; tooltips use role=tooltip + aria-describedby
• Interactions
  - Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av
  Escape closes dismissible overlays; outside-click closes popovers but not modals
• Motion & Media
  - Motion is never the only feedback - Reduce motion or provide toggle for sensitive users - Avoid auto-play without controls - Keep animations subtle and purposeful ---
  respect prefers-reduced-motion — disable scale + slide, keep fade
• Color & Contrast
  Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t

Cross-cutting accessibility

See the full WCAG 2.2 AA guidance for criteria that apply to every component.