How to build an accessible Sheet in React

Uses popover="manual" with role="dialog" and aria-modal so it is announced as a modal surface; when a title is provided it labels the dialog via aria-labelledby (so rich title nodes stay accessible), and Escape/Tab handling comes from the popover platform behavior.

When to use a Sheet

• Showing secondary content or a form in a panel that slides in from a screen edge
• Navigation, filters, or detail views that benefit from full-height side space without leaving the page
• Mobile-friendly drawers where a centered modal would feel cramped

When not to use it

• A short confirmation or focused decision — use Modal or AlertDialog
• Small contextual content anchored to a trigger — use Popover

Keyboard interactions

Role dialog, verified at WCAG 2.2-AA.

• Escape
• Tab
• Shift+Tab

Common mistakes

Avoid: <Sheet title="Delete item?">Are you sure?</Sheet>

Prefer: <AlertDialog title="Delete item?" />

A full edge-to-edge panel is overkill for a yes/no decision; AlertDialog is the right scale and semantics

Example

<Sheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
  <FilterForm />
</Sheet>

See the full Sheet reference →