Required Action Dialog

Accessibility

Import RequiredActionDialog, RequiredActionDialogBehavior and RequiredActionIntent from @prepared911/ui/blocks/required-action-dialog.

The surface is AlertDialog's: a modal native dialog with role="alertdialog" and aria-modal, named by the title heading and described by the description. The page behind it is inert.
Focus starts on the primary action in both behaviors, not on a cancel (there is none). Tab and Shift+Tab cycle inside the dialog. Closing returns focus to the element that held it before the dialog opened.
Dismissible (the default). The header close control is an icon-only Button named by closeLabel. Escape and the control report to the host through onOpenChange and the dialog stays until the host sets open to false. The action is still required afterward.
Forced. There is no close control or cancel action. Escape does nothing to the dialog: the shared Escape guard of AlertDialog's closeOnEscape={false} cancels the key before the browser turns it into a close request, and a layer above (a menu, a nested dialog) or a focused toast takes its own Escape first. If the platform closes the dialog anyway (a script close, a non-cancelable close request), the block shows it again at once, so the dialog is never closed while open is true.
A backdrop press does nothing in either behavior.
While an async action is pending, its Button is aria-busy and shows a spinner, named by its label. The other actions are disabled. When the action settles without the host closing the dialog, focus returns to the pressed Button if it lost it.
The status icon is decorative (aria-hidden). Severity is carried by the title and description, not by color or the icon.
The error code is in a code run with translate="no" and dir="auto", so page translation leaves it as written and a Latin code keeps its order in a right-to-left sentence. The copy button's name, copied and failed labels are the caller's copy, announced through the button's status region.
A Toast raised while the dialog is open moves into the dialog and stays reachable by keyboard and pointer.
The close control sits at the inline-end corner, so it mirrors in a right-to-left document. The spinner is static under prefers-reduced-motion. The surface's own motion is Dialog's. Forced colors use system colors through Dialog and Button.

Required Action Dialog / API and Development

Takeover dialog / Usage

Required Action Dialog

Accessibility

Import RequiredActionDialog, RequiredActionDialogBehavior and RequiredActionIntent from @prepared911/ui/blocks/required-action-dialog.

The surface is AlertDialog's: a modal native dialog with role="alertdialog" and aria-modal, named by the title heading and described by the description. The page behind it is inert.
Focus starts on the primary action in both behaviors, not on a cancel (there is none). Tab and Shift+Tab cycle inside the dialog. Closing returns focus to the element that held it before the dialog opened.
Dismissible (the default). The header close control is an icon-only Button named by closeLabel. Escape and the control report to the host through onOpenChange and the dialog stays until the host sets open to false. The action is still required afterward.
Forced. There is no close control or cancel action. Escape does nothing to the dialog: the shared Escape guard of AlertDialog's closeOnEscape={false} cancels the key before the browser turns it into a close request, and a layer above (a menu, a nested dialog) or a focused toast takes its own Escape first. If the platform closes the dialog anyway (a script close, a non-cancelable close request), the block shows it again at once, so the dialog is never closed while open is true.
A backdrop press does nothing in either behavior.
While an async action is pending, its Button is aria-busy and shows a spinner, named by its label. The other actions are disabled. When the action settles without the host closing the dialog, focus returns to the pressed Button if it lost it.
The status icon is decorative (aria-hidden). Severity is carried by the title and description, not by color or the icon.
The error code is in a code run with translate="no" and dir="auto", so page translation leaves it as written and a Latin code keeps its order in a right-to-left sentence. The copy button's name, copied and failed labels are the caller's copy, announced through the button's status region.
A Toast raised while the dialog is open moves into the dialog and stays reachable by keyboard and pointer.
The close control sits at the inline-end corner, so it mirrors in a right-to-left document. The spinner is static under prefers-reduced-motion. The surface's own motion is Dialog's. Forced colors use system colors through Dialog and Button.

Required Action Dialog / API and Development

Takeover dialog / Usage