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.

Code Block / API and Development

Combobox / Usage