Code Block

Bloc de code en lecture seule, copiable, avec indicateur de langue, sur surface sombre tokenisée. Bouton copier accessible (annonce aux lecteurs d'écran). Présent sur presque chaque page du système. Read-only, copyable code block with a language indicator on a tokenized dark surface. Accessible copy button (announced to screen readers). Present on nearly every page of the system.

AperçuPreview

Ce bloc ci-dessous est un pre.code-block réel — label de langue en haut à gauche, bouton « Copier » accessible en haut à droite. The block below is a real pre.code-block — language label top-left, accessible "Copy" button top-right.

<agtc-code-block language="html" filename="exemple.html">
  <code><agtc-badge variant="success">Validé</agtc-badge></code>
</agtc-code-block>

Règles absoluesAbsolute rules

<pre><code> sémantique réel — jamais des <div>Real semantic <pre><code> — never <div>s
Bouton copier = <button> réel, aria-label, focus visible, succès annoncé (aria-live)Copy button = real <button>, aria-label, visible focus, success announced (aria-live)
Lignes longues : scroll horizontal — jamais de wrap qui casse le codeLong lines: horizontal scroll — never wrap that breaks the code
Jamais de couleur/police codée en durNever hardcoded color/font

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-code-block-default-background`	`primitive.color.gray.12`	#202020
`--agtc-component-code-block-default-text`	`primitive.color.gray.4`	#e8e8e8
`--agtc-component-code-block-default-meta-text`	`primitive.color.gray.8`	#bbbbbb
`--agtc-component-code-block-default-copy-background`	`primitive.color.gray.11`	#646464
`--agtc-component-code-block-default-copy-text`	`primitive.color.gray.1`	#fcfcfc
`--agtc-component-code-block-default-border-focus`	`semantic.color.border.focus`	#007a68
`--agtc-component-code-block-default-font-size`	`semantic.typography.label.size`	0.875rem
`--agtc-component-code-block-default-padding-x`	`primitive.space.5`	20px
`--agtc-component-code-block-default-padding-y`	`primitive.space.4`	16px

AccessibilitéAccessibility

<pre><code> sémantique, le code reste sélectionnableSemantic <pre><code>, code stays selectable
Bouton copier atteignable au clavier, aria-label (langue incluse), :focus-visibleCopy button keyboard-reachable, aria-label (language included), :focus-visible
Copie annoncée aux AT via role="status" + aria-live="polite"Copy announced to AT via role="status" + aria-live="polite"
Contraste texte gris.4 sur gris.12 ≥ 13:1 ; bouton et langue ≥ 4.5:1Contrast gray.4 on gray.12 ≥ 13:1; button and language ≥ 4.5:1

ImplémentationImplementation

<!-- Composant slotté -->
<agtc-code-block language="javascript" filename="agtc-badge.js">
  <code>import { LitElement } from 'lit';</code>
</agtc-code-block>

<!-- Classe sur HTML statique (site) -->
<pre class="code-block"><code class="lang-html">&lt;agtc-badge&gt;Validé&lt;/agtc-badge&gt;</code></pre>

DOs et DON'TsDOs and DON'Ts

À faireDo

Indiquer la langue (language ou class="lang-…")Indicate the language (language or class="lang-…")
Laisser les lignes longues défiler horizontalementLet long lines scroll horizontally
Garder le code échappé et sélectionnableKeep code escaped and selectable

À éviterDon't

Un bouton copier sans aria-label ni feedback annoncéA copy button without aria-label or announced feedback
Attendre une coloration syntaxique — différée v1 (porte ouverte)Expecting syntax highlighting — deferred v1 (door open)
Des <div> stylés en code<div>s styled as code

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036/041). Decision: CD1–CD9 all approved.

Pattern	Source	Applied	Justification
Semantic `<pre><code>` + language class	DEV — copy code button	✅	Slot for the code
Copy button + text feedback	roboleary	✅	`Copy` → `Copied!`
Accessible copy button (aria-label, focus-visible)	Sara Soueidan	✅	Fixes the site's previous unlabeled, French-only button
Success announced to AT (`role="status"` / `aria-live`)	Sara Soueidan	✅	Polite live region
Language indicator	DEV	✅	`language` attribute
Horizontal scroll for long lines	NN/g	✅	`overflow-x:auto`
Syntax highlighting (WCAG contrast)	NN/g	✅ (deferred)	Out of v1 scope: high-contrast plain text with no dependency; API ready for future highlighting
Header (file name / title)	DEV	✅	Optional `filename` attribute
Line numbers	NN/g	❌	Out of v1 scope — visual noise; may be added later if needed