Confirm Morph

Accessibility

Import ConfirmMorph, ConfirmMorphTone from @prepared911/ui/confirm-morph.

Only the face on show is in the accessibility tree. The others are inert and aria-hidden, so they have no tab stop and are not read. Tab moves through the buttons of the face on show.
The confirming face is a group named by the prompt.
Pressing the trigger moves focus to Cancel, so a keyboard user can back out with Enter or Space, and the safe choice is the one under focus. Escape cancels and returns focus to the trigger. A press outside cancels and leaves focus where the press went.
When a face changes while focus is inside the control, focus moves into the new face: the pending face (a container that takes programmatic focus), Undo or the done face, Retry, or the trigger. Focus is never left on a face that has just gone inert.
A visually hidden output element (implicit role="status", a polite live region) announces the prompt, then the pending, done, or error label. It is empty at rest. The root is aria-busy while pending.
The countdowns wait while the pointer is over the control and while the tab is hidden, and resume with the time that was left. The prompt returns to idle after about six seconds and the result faces after about five.
A face is never shown by color alone: each has text, and the result faces also have an icon.
Reduced motion swaps faces at once, with no fade, slide, or width spring; the faces and the buttons still work.
Forced colors: the pill's edge is ButtonBorder while it is painted, and the labels and icons follow system colors.
Disabled: disabled is native on the trigger, which paints the disabled foreground.
Right to left: the buttons sit at the inline end, and faces slide in from the left and out toward the right.

Confirm Morph / API and Development

Confirmation / Usage

Confirm Morph

Accessibility

Import ConfirmMorph, ConfirmMorphTone from @prepared911/ui/confirm-morph.

Only the face on show is in the accessibility tree. The others are inert and aria-hidden, so they have no tab stop and are not read. Tab moves through the buttons of the face on show.
The confirming face is a group named by the prompt.
Pressing the trigger moves focus to Cancel, so a keyboard user can back out with Enter or Space, and the safe choice is the one under focus. Escape cancels and returns focus to the trigger. A press outside cancels and leaves focus where the press went.
When a face changes while focus is inside the control, focus moves into the new face: the pending face (a container that takes programmatic focus), Undo or the done face, Retry, or the trigger. Focus is never left on a face that has just gone inert.
A visually hidden output element (implicit role="status", a polite live region) announces the prompt, then the pending, done, or error label. It is empty at rest. The root is aria-busy while pending.
The countdowns wait while the pointer is over the control and while the tab is hidden, and resume with the time that was left. The prompt returns to idle after about six seconds and the result faces after about five.
A face is never shown by color alone: each has text, and the result faces also have an icon.
Reduced motion swaps faces at once, with no fade, slide, or width spring; the faces and the buttons still work.
Forced colors: the pill's edge is ButtonBorder while it is painted, and the labels and icons follow system colors.
Disabled: disabled is native on the trigger, which paints the disabled foreground.
Right to left: the buttons sit at the inline end, and faces slide in from the left and out toward the right.

Confirm Morph / API and Development

Confirmation / Usage