Diff
À quoi il sert
Diff affiche une différence de texte ligne à ligne, en chasse fixe, avec un signe par ligne.
Quand l’utiliser
- Montrer une modification de code ou de texte que le lecteur doit comparer.
- Garder le sens visible sans couleur : chaque ligne porte son signe, + ou -.
Quand ne pas l’utiliser
- Pour comparer deux images : le composant ne traite que du texte.
- Pour un historique long : le composant rend toutes les lignes, sans repli ni pagination.
Exemples
function total(items) {Ligne supprimée return items.length;Ligne ajoutée return items.reduce((sum, item) => sum + item.price, 0);}
---
import Diff from '@paulperigault/astro/Diff.astro';
const lines: { kind: 'add' | 'del' | 'ctx'; text: string }[] = [
{ kind: 'del', text: ' return items.length;' },
{ kind: 'add', text: ' return items.reduce((sum, item) => sum + item.price, 0);' },
];
---
<Diff
caption="Calcul du total d’un panier"
lines={lines}
addedLabel="Ligne ajoutée"
removedLabel="Ligne supprimée"
/>Accessibilité
Clavier
- La région défilante reçoit le focus (tabindex="0") : un contenu large se parcourt au clavier.
- Le contour de focus visible entoure la région entière, pas chaque ligne.
Lecteur d’écran
- La région est nommée par la légende (aria-label reprend caption).
- Chaque ligne ajoutée ou supprimée commence par son libellé, masqué visuellement.
- Le signe visible est masqué aux lecteurs d’écran (aria-hidden="true").
Garanti par le composant
- Signes +, - et espace visibles : l’information ne repose pas sur la couleur seule.
- Sémantique native : ins pour l’ajout, del pour la suppression.
- Le texte des lignes est échappé ; aucun JavaScript, aucun attribut style.
À la charge de l’intégrateur
- Fournir addedLabel et removedLabel dans la langue du site.
- Écrire une légende qui décrit la modification : elle nomme la région défilante.
- Passer du texte brut dans text : le HTML n’est pas interprété.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| caption (obligatoire) | string | — | Légende visible, reprise comme nom accessible de la région défilante. |
| lines (obligatoire) | Line[] | — | Lignes du diff : `{ kind: 'added' | 'removed' | 'context', text }`. |
| addedLabel (obligatoire) | string | — | Libellé lu avant chaque ligne ajoutée. |
| removedLabel (obligatoire) | string | — | Libellé lu avant chaque ligne supprimée. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-focus--pp-color-line--pp-color-muted--pp-color-status-failed--pp-color-status-passed--pp-color-surface--pp-font-family-mono--pp-font-line-height-body--pp-font-size--1--pp-font-weight-semibold--pp-radius-control--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-space-xs
Preuves et décisions
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 2.1.1 Clavier
- Tests : packages/astro/test/Diff.test.ts