Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Code Block
  3. Accessibility

Code Block

Accessibility

Import CodeBlock from @prepared911/ui/code-block.
A named figure
The block is a figure named by label. The code inside is real text in pre > code, so a screen reader reads it, a reader can select it, and find-in-page matches it. Highlighting changes only color: the text is the same before and after.
Scrolling
A line wider than the block scrolls in a region that is focusable and named by label (role="region"), so a keyboard user can reach and scroll it. A block that fits is not focusable, so it adds no tab stop.
The copy control
The control is a real button named by copyLabel, with the same text as its tooltip. After a copy its name becomes copiedLabel, or copyErrorLabel when the clipboard refused, and a polite live region announces the new name. It does not submit a surrounding form.
The language label
The label is the language id as written, drawn in a code element, so it is read as code and exempt from translation.
Direction
Code does not follow the page direction. The code region is a left-to-right run, so source stays in order and flush left under RTL, and a line that starts in Hebrew keeps the same left-to-right frame. The header, with the language and the copy control, follows the page direction.
Contrast, forced colors, motion
Every tone passes WCAG 2.2 AA on the block surface in light and dark (index.browser.test.tsx runs axe over TSX, JSON, diff, Markdown and shell). Under forced-colors: active every tone is the system text color and links are the system link color. The block has no motion of its own; the copy control's icon swap collapses under reduced motion.
Page translation
The pre is translate="no" and the language caption is a Text identifier, so a browser translator leaves source code and the language id as written (ADR 0019 §7). The copy control and its tooltip are copy and stay translatable.
Previous
Code Block / API and Development
Next
Combobox / Usage
On this page
A named figure
Scrolling
The copy control
The language label
Direction
Contrast, forced colors, motion
Page translation