Role and semantics
Section titled “Role and semantics”Copy is a button. In the icon and inline variants its name is set with aria-label and repeated in the tooltip; the tooltip does not describe the button again. The result is read once in a polite status region (role="status").
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter, Space | Copies the value. |
| Tab | Moves to the button; the tooltip opens on focus. |
Focus stays on the button; on the fallback path it is given back from the hidden text area.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Button | “Copy reference code, button” |
| After copying | “Reference code copied” |
| Error | “Could not copy” |
Contrast
Section titled “Contrast”The icon and text use the Button colours: 4.5:1 for text, 3:1 for the icon and border.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Copy meets it | What product teams must do |
|---|---|---|
| 4.1.2 Name, role, value | The button always has a name. | Say what is copied in the name. |
| 4.1.3 Status messages | The result is read in a status region. | — |
| 2.5.8 Target size | The smallest button is 32 px. | — |