Alert Dialog

Accessibility

Import AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogTrigger, AlertDialogSize from @prepared911/ui/alert-dialog. AlertDialog follows the WAI-ARIA alert dialog pattern on Dialog's native dialog element opened with showModal(). The browser makes the rest of the document inert, keeps Tab and Shift+Tab inside the dialog, and hides the page from assistive technology while it is open.

Role. The surface has role="alertdialog" and aria-modal="true", so assistive technology treats it as an interruption that needs a response.
Name and description. title renders an h2 referenced by aria-labelledby, and description is referenced by aria-describedby. Both are required, so the prompt is always announced with what it asks and what it costs.
Focus. Focus moves to the cancel action on open, the least destructive choice. Pass initialFocus for a confirmation that is not destructive. On close, focus returns to the trigger, or to finalFocus.
Keyboard. Tab cycles between the cancel and the action. Escape dismisses without running the action, unless onOpenChange cancels the request. Enter or Space on a focused Button activates it.
Backdrop. A press outside the surface does nothing, so a stray click never dismisses a prompt that needs an answer.
Motion. The surface fades in while it settles from a small drop and shrink, and the backdrop fades with it; the close fades the surface with a smaller drop. Under prefers-reduced-motion: reduce the movement is removed and the fades remain (the close is instant). A press outside never closes it.
Forced colors. The surface keeps a CanvasText border.

Alert Dialog / API and Development

Artifact / Usage

Alert Dialog

Accessibility

Role. The surface has role="alertdialog" and aria-modal="true", so assistive technology treats it as an interruption that needs a response.
Name and description. title renders an h2 referenced by aria-labelledby, and description is referenced by aria-describedby. Both are required, so the prompt is always announced with what it asks and what it costs.
Focus. Focus moves to the cancel action on open, the least destructive choice. Pass initialFocus for a confirmation that is not destructive. On close, focus returns to the trigger, or to finalFocus.
Keyboard. Tab cycles between the cancel and the action. Escape dismisses without running the action, unless onOpenChange cancels the request. Enter or Space on a focused Button activates it.
Backdrop. A press outside the surface does nothing, so a stray click never dismisses a prompt that needs an answer.
Motion. The surface fades in while it settles from a small drop and shrink, and the backdrop fades with it; the close fades the surface with a smaller drop. Under prefers-reduced-motion: reduce the movement is removed and the fades remain (the close is instant). A press outside never closes it.
Forced colors. The surface keeps a CanvasText border.

Alert Dialog / API and Development

Artifact / Usage