ProjectCover
À quoi il sert
ProjectCover affiche la couverture d’un projet, toujours entourée d’un filet, au ratio paysage ou large.
Quand l’utiliser
- Présenter une capture d’interface sur fond clair : le filet la sépare de la page.
- Illustrer une fiche projet dans une Grid, en layout third ou half.
Quand ne pas l’utiliser
- Pour une image sans rapport avec un projet : utiliser Photo, sans filet.
- Pour un ratio carré ou portrait : le composant n’accepte que landscape ou wide.
Exemples
<ProjectCover src={capture} alt="Capture d’interface : barre supérieure, menu latéral" layout="half" />Accessibilité
Clavier
- La couverture n’est pas interactive : elle ne prend pas le focus.
Lecteur d’écran
- Le type exige alt ou decorative : une couverture sans texte n’est pas acceptée.
- Le texte alt est lu tel quel ; il décrit l’image affichée.
Garanti par le composant
- Filet (data-rule) autour du cadre, toujours présent.
- Repli PNG pour une capture, JPEG pour une photo (test Avatar.test.ts).
À la charge de l’intégrateur
- Écrire un alt qui décrit l’interface ou l’image, pas le nom du projet.
- Lier la couverture à la fiche projet par un lien texte : le composant ne l’ajoute pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| alt | string | — | Texte alternatif : ce que l'image apporte au contenu. Vide : erreur au build. |
| decorative | true | — | Image purement décorative, rendue avec `alt=""`. Exclusif de `alt`. |
| src (obligatoire) | ImageMetadata | — | Image importée localement. |
| ratio | "landscape" | "wide" | 'landscape' | Proportion du cadre. |
| layout | "third" | "half" | "page" | 'third' | Emplacement dans la page ; règle `sizes`. |
| kind | "photo" | "capture" | "illustration" | 'capture' | Nature de l'image ; une capture garde un texte net. |
| priority | boolean | false | Image principale de la page (LCP). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel (A)
- Tests : packages/astro/test/Avatar.test.ts (ProjectCover)