Confirmation

Accessibility

Import Confirmation, ConfirmationButton from @prepared911/ui/confirmation.

Structure

While the choices show, the root is role="group" named by label when one is given: "Next step, group". Each choice is a native button named by its text.
The acknowledgement is plain text with a decorative check, in the reading order. It is not a group and not a live region.

The swap

The activated button unmounts, so two things are done for people who cannot see the change:

The acknowledgement is announced politely once, through the design system's live announcer in the document that holds the group, so a detached window announces in its own document. A group that starts acknowledged announces nothing.
When keyboard focus (or any focus) was inside the group at the moment of the choice, it moves to the acknowledgement, which is focusable programmatically (tabIndex="-1") and never a tab stop. Without that, focus falls to the start of the document. After a keyboard press the acknowledgement shows a focus ring; after a pointer press it does not.

Keyboard

Key	Action
Tab	Moves through the choices in order
Enter, Space	Activates the focused choice

A double activation runs the side effect once. A disabled choice is skipped.

Contrast, forced colors and motion

The success text and check clear WCAG 2.2 AA in light and dark (asserted with axe in the browser test).
Under forced-colors: active the text takes the system text color and the check is set to CanvasText, because an SVG keeps its author color otherwise.
The acknowledgement fades in and rises by --space-4. Under reduced motion the rise is removed and the fade stays.

Not covered by a gate

A screen reader pass (AC-8) is manual: the group name, the single announcement, and where focus lands.

On this page