Alert Dialog primitive

Headless Alert Dialog: the behavior, keyboard support and ARIA of the WAI-ARIA Alert and Message Dialogs pattern, with no styles.

@ndop/primitives/alert-dialog
WAI-ARIA: Alert and Message Dialogs

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Alert Dialog is built on this one.

import {
  NdAlertDialog,
  NdAlertDialogAction,
  NdAlertDialogCancel,
  NdAlertDialogContent,
  NdAlertDialogDescription,
  NdAlertDialogOverlay,
  NdAlertDialogPortal,
  NdAlertDialogTitle,
  NdAlertDialogTrigger,
} from '@ndop/primitives/alert-dialog';

Accessibility

Implements the Alert and Message Dialogs pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus to the next focusable element inside; wraps from last to first.
`ShiftTab`	Moves focus to the previous focusable element inside; wraps from first to last.
`Escape`	Closes the dialog, as Cancel does.
`Tab`	Moves focus to the next focusable element inside the dialog; from the last one, wraps to the first.
`ShiftTab`	Moves focus to the previous focusable element inside the dialog; from the first one, wraps to the last.
`Escape`	Closes the dialog, unless `closeOnEscape` is `false`.

Focus

On open: focus moves to AlertDialogCancel.
While open: focus is trapped in the content.
On close: focus returns to the element that had it before opening, usually the trigger.
On open: focus moves to the first focusable element in the content, or to the content element itself when it has none.
While open: focus is trapped in the content.
On close: focus returns to the element that had it before opening, usually the trigger.

Right-to-left

Nothing mirrors. Nothing mirrors: the dialog is centered, and Tab order follows the DOM.

API reference

NdAlertDialog

[ndAlertDialog]from @ndop/primitives/alert-dialog

Root of an alert dialog: the WAI-ARIA Alert Dialog pattern, a modal dialog that asks the user to confirm or cancel. It's the Dialog primitive with a different content role and dismissal: clicking outside doesn't close it, Escape cancels it, and focus starts on Cancel. Put it on an ng-container.

NdAlertDialog binding	Type	Default
`[defaultOpen]` Initial open state when `open` is not bound.	`boolean`	`false`
`[(open)]` Whether the dialog is open. Two-way bindable with `[(open)]`.	`boolean`	`false`

NdAlertDialogAction

button[ndAlertDialogAction]from @ndop/primitives/alert-dialog

The button that confirms an NdAlertDialog: its own (click) handler runs, then the dialog closes.

NdAlertDialogCancel

button[ndAlertDialogCancel]from @ndop/primitives/alert-dialog

The button that cancels an NdAlertDialog and closes it. Focus starts here when the dialog opens, since cancelling is the safe choice.

NdAlertDialogContent

[ndAlertDialogContent]role alertdialogfrom @ndop/primitives/alert-dialog

The alert dialog box: role="alertdialog", aria-modal="true", labelled by its title and described by its description. Focus is trapped inside it while open.

Manages aria-modal, aria-labelledby, aria-describedby.

Data attribute	Values
`data-state`	—

NdAlertDialogDescription

[ndAlertDialogDescription]from @ndop/primitives/alert-dialog

The message of an NdAlertDialog, which describes it.

NdAlertDialogOverlay

[ndAlertDialogOverlay]from @ndop/primitives/alert-dialog

The backdrop behind an NdAlertDialog, hidden from assistive technology. Unlike a dialog's, clicking it does nothing: the user must choose.

Manages aria-hidden.

Data attribute	Values
`data-state`	—

NdAlertDialogPortal

ng-template[ndAlertDialogPortal]from @ndop/primitives/alert-dialog

Marks the ng-template an NdAlertDialog renders while open.

NdAlertDialogTitle

[ndAlertDialogTitle]from @ndop/primitives/alert-dialog

The title of an NdAlertDialog, which labels it.

NdAlertDialogTrigger

[ndAlertDialogTrigger]from @ndop/primitives/alert-dialog

The button that opens an NdAlertDialog, with aria-haspopup="dialog", aria-expanded and aria-controls.

Manages aria-haspopup, aria-expanded, aria-controls.

Data attribute	Values
`data-state`	—