Pagination
À quoi il sert
Pagination affiche des liens vers les pages d’une liste, la page courante sans lien, et des liens précédent et suivant.
Quand l’utiliser
- Parcourir une liste découpée en pages, comme des articles ou des résultats.
- Fournir des liens réels : chaque page a une adresse, sans JavaScript.
Quand ne pas l’utiliser
- Pour un fil d’Ariane : utiliser Breadcrumb.
- Pour un défilement infini : Pagination suppose des pages à adresse propre.
- Pour calculer les pages : utiliser pageWindow, le composant ne les calcule pas.
Exemples
<Pagination
label="Pagination des résultats"
items={[
{ label: '1', href: '/blog/1' },
{ label: '2', href: '/blog/2', current: true },
{ label: '3', href: '/blog/3' },
]}
previous={{ label: 'Page précédente', href: '/blog/1' }}
next={{ label: 'Page suivante', href: '/blog/3' }}
/>Variantes
Accessibilité
Clavier
- Chaque lien reçoit le focus avec Tab, dans l’ordre du document.
- Le focus visible utilise un contour de la couleur --pp-color-focus (critère 2.4.7).
Lecteur d’écran
- Le repère nav porte le nom donné par label.
- La liste porte role="list" : VoiceOver garde la sémantique malgré list-style: none.
- La page courante porte aria-current="page" et n’est pas un lien.
Garanti par le composant
- La page courante se distingue par un cadre et une graisse, pas par la couleur seule (critère 1.4.1).
- Liens et page courante font au moins --pp-size-target-min de côté (critère 2.5.8).
- Les liens restent soulignés pour se distinguer du texte (critère 1.4.1).
À la charge de l’intégrateur
- Fournir tous les libellés dans la langue du site, y compris précédent et suivant.
- Donner un label distinct si la page contient plusieurs repères nav (critère 2.4.1).
- Rendre le libellé de chaque lien compréhensible, par exemple « Page 3 » plutôt que « 3 » seul.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| label (obligatoire) | string | — | Nom accessible du repère de navigation (`aria-label`), par exemple « Pagination ». |
| items (obligatoire) | Item[] | — | Pages affichées : `{ label, href, current? }` ; `current` en fait la page courante, sans lien. |
| previous | Link | — | Lien vers la page précédente, affiché avant les pages. Absent : rien n'est rendu. |
| next | Link | — | Lien vers la page suivante, affiché après les pages. Absent : rien n'est rendu. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-focus--pp-font-size-0--pp-font-weight-bold--pp-radius-control--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-size-target-min--pp-space-xs
Preuves et décisions
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 2.5.8 Taille de la cible (minimum)
- WCAG 2.4.7 Focus visible
- Tests : packages/astro/test/Pagination.test.ts