Role and semantics
Section titled “Role and semantics”CodeBlock draws a figure; the header is its figcaption. The code is in pre and code. The scroll region has the region role and is named by title, or “Code sample” without it. Line numbers are hidden with aria-hidden.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Focus the copy button, then the scroll region. |
| Left, Right, Up, Down | Scroll the code in the scroll region. |
| Enter, Space | Copy the code from the copy button. |
The scroll region draws a 2 px color-focus-ring outline inside its edge with focus-visible; the copy button uses the Button focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Region | “Save.tsx, region” |
| Copy button | “Copy code, button”; then “Copied” |
Contrast
Section titled “Contrast”Code text has 4.5:1 contrast on the layer 1 surface, and line numbers 4.5:1 with color-text-subtle. A highlighted line keeps the text colour.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How CodeBlock meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | figure, figcaption, pre, code. |
Explain the code in text. |
| 2.1.1 Keyboard | A focusable scroll region. | Do not nest it in another focusable container. |
| 1.4.10 Reflow | Sideways scrolling inside the region; breaking with wrap. |
Use wrap for long commands. |