Notifications & Dialogs

Accessible modal dialogs, alert dialogs, and toast notifications.

Standard Dialog

A dialog with role="dialog", focus trapping, Escape to close, and focus restoration. Built on Radix UI Dialog.

Accessibility Features

  • Focus is trapped within the dialog when open
  • Escape key closes the dialog
  • Focus returns to the trigger button on close
  • Background content is hidden from screen readers via aria-hidden

Alert Dialog

An alert dialog with role="alertdialog" for destructive confirmations. Cannot be dismissed by clicking outside — the user must choose an action.

Accessibility Features

  • Uses role="alertdialog" instead of role="dialog"
  • Cannot be dismissed by clicking outside
  • Focus is trapped — user must take an action
  • Cancel button is focused by default for safety

Toast Notifications

Toast notifications powered by Sonner with aria-live regions for screen reader announcements.

Accessibility Features

  • Toasts are announced via aria-live regions
  • Each toast has a close button accessible via keyboard
  • Toasts auto-dismiss but can be paused on hover
  • Screen readers announce the toast message and description

Reduced Motion

This demo respects the prefers-reduced-motion media query. When enabled, animations are minimized or removed entirely.

Motion preference:Motion allowed

Animated progress bar (smooth transitions):

Accessibility Features

  • CSS: prefers-reduced-motion: reduce disables all transitions
  • JS: useReducedMotion() hook adapts behavior programmatically
  • Animations are decorative — content remains accessible without them
  • Enable via OS settings: System Preferences → Accessibility → Display