Interactions

What a click, a key or a hover does beyond pressing a button. Each case is a bench: try it with the pointer, then with the keyboard alone.

Copying a value

copy_button({ value }): the icon alone where the button sits beside what it copies, or with its word. A check for two seconds once copied, a cross when the clipboard refused — never a claim that did not happen.

Copying what the page shows

copy_button({ target }): the text of an element, read as it is at the moment of the click.

A block of code

code-block with copy: true — the button shows in the corner while the block is pointed at or reached with Tab, and stays shown on a screen without a pointer.

9483a-8b194
28811-eb8b3
b44d2-eb15a
9d935-03932

In a fallback

The value of a fallback comes with its copy button.

What to check

• Tab reaches every button; Enter and Space copy.
• Over plain http (a development host) the copy still works, the older way.
• Pasted elsewhere, the text is exactly the value: no space, no line added.
• A screen reader says « Copied » after the click.