Send Button

Accessibility

Import SendButton from @prepared911/ui/send-button.

The host is a native button, type="button" unless type says otherwise. Its accessible name is label, rendered once through VisuallyHidden; the icon is aria-hidden.
Pending sets aria-busy="true" and aria-disabled="true" and not disabled, so the button stays in the tab order and keeps focus. Clicks, Enter and Space are ignored while it is pending. The accessible name is pendingLabel.
A visually hidden output element (implicit role="status", a polite live region) announces pendingLabel when the send starts and is empty at rest. Nothing is announced on mount.
Disabled and pending are not shown by color alone: a disabled button paints the disabled foreground on a disabled surface, and a pending one swaps the arrow for a spinner and shows the progress cursor.
A pointer press never moves focus off the composer's input. Enter or Space on the focused button sends, and restoreFocusTo returns focus to the input.
Reduced motion swaps the arrow and the spinner at once (only the current icon is mounted) and stops the spinner turning. The pending name and the spinner glyph still show.
Forced colors: the button follows Button's system colors and the arrow follows its text color.
Disabled: disabled is native, and a disabled fieldset disables the button.
Right to left: the up arrow is not directional and does not mirror. The spinner turns clockwise in both directions.

Accessibility

Import SendButton from @prepared911/ui/send-button.

The host is a native button, type="button" unless type says otherwise. Its accessible name is label, rendered once through VisuallyHidden; the icon is aria-hidden.
Pending sets aria-busy="true" and aria-disabled="true" and not disabled, so the button stays in the tab order and keeps focus. Clicks, Enter and Space are ignored while it is pending. The accessible name is pendingLabel.
A visually hidden output element (implicit role="status", a polite live region) announces pendingLabel when the send starts and is empty at rest. Nothing is announced on mount.
Disabled and pending are not shown by color alone: a disabled button paints the disabled foreground on a disabled surface, and a pending one swaps the arrow for a spinner and shows the progress cursor.
A pointer press never moves focus off the composer's input. Enter or Space on the focused button sends, and restoreFocusTo returns focus to the input.
Reduced motion swaps the arrow and the spinner at once (only the current icon is mounted) and stops the spinner turning. The pending name and the spinner glyph still show.
Forced colors: the button follows Button's system colors and the arrow follows its text color.
Disabled: disabled is native, and a disabled fieldset disables the button.
Right to left: the up arrow is not directional and does not mirror. The spinner turns clockwise in both directions.