Timeline
À quoi il sert
Timeline présente une suite d’étapes datées, dans l’ordre fourni, en liste ordonnée.
Quand l’utiliser
- Présenter un historique, un journal de versions ou des jalons datés.
- Lister des étapes dont l’ordre compte, avec une date pour chacune.
Quand ne pas l’utiliser
- Pour une liste sans ordre : utiliser une liste simple.
- Pour une progression chiffrée : utiliser Progress, qui porte une valeur.
Exemples
- Tokens
Source au format DTCG 2025.10.
- Composants
Composants Astro publiés en source.
- Registre
Fiches décrivant chaque composant.
<Timeline
label="Historique"
order="asc"
items={[
{ time: '2024', datetime: '2024', title: 'Lancement', description: 'Première version.' },
{ time: '2025', datetime: '2025', title: 'Refonte' },
]}
/>Variantes
- Refonte
Nouvelle structure des pages.
- Lancement
Première version publiée.
Accessibilité
Clavier
- Le composant est statique : il ne reçoit pas le focus.
- Aucune touche n’est gérée par le composant.
Lecteur d’écran
- La liste est annoncée comme liste, avec le nombre de ses éléments.
- Le trait et les repères sont des pseudo-éléments sans texte : ils ne sont pas lus.
Garanti par le composant
- La liste est sémantique : role="list" est posé, même sans puces (WCAG 1.3.1).
- La date et le titre portent le sens ; le repère ne le porte pas seul (WCAG 1.4.1).
- Le composant ne trie pas : l’ordre affiché est celui de items.
À la charge de l’intégrateur
- Trier les items avant de les passer : data-order ne trie rien.
- Écrire la date dans la langue du site, et donner datetime en ISO 8601 quand la date est connue.
- Donner un label quand la page contient plusieurs chronologies.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| items (obligatoire) | TimelineItem[] | — | Étapes, dans l'ordre d'affichage. Le composant ne trie pas. |
| label | string | — | Nom accessible de la liste (`aria-label`). Utile quand la page contient plusieurs chronologies. |
| order | "asc" | "desc" | — | Sens de tri déclaré par l'intégrateur : `data-order` seul, sans effet sur le rendu. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-bg--pp-color-fg--pp-color-line--pp-color-muted--pp-font-size--1--pp-font-weight-semibold--pp-radius-control--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-space-m
Preuves et décisions
- WCAG 1.3.1 Information et relations
- WCAG 1.4.1 Utilisation de la couleur
- Tests : packages/astro/test/Timeline.test.ts