Copy Button

Accessibility

Import CopyButton, CopyButtonVariant from @prepared911/ui/copy-button.

The host is a native button. In the outline variant its accessible name is the whole current label: the visible label layer is aria-hidden, and the label is rendered once, visually hidden. In the icon variant label is the name.
A visually hidden output element (implicit role="status", a polite live region) announces the copied or error label when it appears. It is empty at rest.
The result is carried by the label and the announcement as well as the icon and its color, so it is not shown by color alone.
The icons are aria-hidden.
Reduced motion collapses the icon scale and the label movement. The fades, the labels, and the icons still show.
Forced colors: the label and icons follow the button's system colors.
Disabled: disabled is native, and the label and icon paint the disabled foreground, including a check or alert that was showing.
Right to left: the icon sits at the inline start and the label swap and the icon follow the writing direction.
Copying needs a user action: a click or Enter or Space on the focused button. A browser can refuse the Clipboard API outside one; the fallback runs inside the same click, and after a refusal it runs only while the click's user activation is still active.

Accessibility

Import CopyButton, CopyButtonVariant from @prepared911/ui/copy-button.

The host is a native button. In the outline variant its accessible name is the whole current label: the visible label layer is aria-hidden, and the label is rendered once, visually hidden. In the icon variant label is the name.
A visually hidden output element (implicit role="status", a polite live region) announces the copied or error label when it appears. It is empty at rest.
The result is carried by the label and the announcement as well as the icon and its color, so it is not shown by color alone.
The icons are aria-hidden.
Reduced motion collapses the icon scale and the label movement. The fades, the labels, and the icons still show.
Forced colors: the label and icons follow the button's system colors.
Disabled: disabled is native, and the label and icon paint the disabled foreground, including a check or alert that was showing.
Right to left: the icon sits at the inline start and the label swap and the icon follow the writing direction.
Copying needs a user action: a click or Enter or Space on the focused button. A browser can refuse the Clipboard API outside one; the fallback runs inside the same click, and after a refusal it runs only while the click's user activation is still active.