Action Button

Accessibility

Import ActionButton from @prepared911/ui/action-button.

The host is a native button. Its accessible name is the whole current label: the visible label layer is aria-hidden, and the label is rendered once, visually hidden.
While pending the button is aria-disabled="true" and aria-busy="true" and stays in the tab order, so focus does not jump away when the action starts. Click, Enter, and Space do nothing; a submit button does not submit.
A visually hidden output element (implicit role="status", a polite live region) announces the pending label when the action starts and the success label when it resolves. It is empty at rest.
The trailing icons are aria-hidden. The state is also carried by the label text, so no state is shown by motion or color alone.
Reduced motion collapses the label movement, the width change, the icon scale, and the check drawing. The fades, the labels, and the icons still show.
Forced colors: the label and the icons follow the button's system colors, and the check draws with currentColor.
Disabled: disabled is native, and the label and icons paint the disabled foreground.
Right to left: the arrow mirrors and the label swaps in place and the width springs from the inline start.

Accessibility

Import ActionButton from @prepared911/ui/action-button.

The host is a native button. Its accessible name is the whole current label: the visible label layer is aria-hidden, and the label is rendered once, visually hidden.
While pending the button is aria-disabled="true" and aria-busy="true" and stays in the tab order, so focus does not jump away when the action starts. Click, Enter, and Space do nothing; a submit button does not submit.
A visually hidden output element (implicit role="status", a polite live region) announces the pending label when the action starts and the success label when it resolves. It is empty at rest.
The trailing icons are aria-hidden. The state is also carried by the label text, so no state is shown by motion or color alone.
Reduced motion collapses the label movement, the width change, the icon scale, and the check drawing. The fades, the labels, and the icons still show.
Forced colors: the label and the icons follow the button's system colors, and the check draws with currentColor.
Disabled: disabled is native, and the label and icons paint the disabled foreground.
Right to left: the arrow mirrors and the label swaps in place and the width springs from the inline start.