Popover

À quoi il sert

Popover affiche un panneau court sous un bouton, avec l’API HTML popover et sans JavaScript.

Quand l’utiliser

• Donner un détail court lié à un bouton, comme une aide ou un résumé.
• Afficher un contenu qui peut se fermer par Échap ou par un clic à l’extérieur.

Quand ne pas l’utiliser

• Pour un dialogue qui bloque la page : utiliser un élément dialog modal.
• Pour une info-bulle au survol : un popover s’ouvre au clic, pas au survol.

Exemples

<Popover id="details" triggerLabel="Voir les détails">
  <p>Le build a duré 42 secondes.</p>
</Popover>

Accessibilité

Clavier

• Entrée ou Espace sur le bouton ouvre et ferme le panneau.
• Échap ferme le panneau ; le navigateur rend le focus au bouton.

Lecteur d’écran

• Le bouton est nommé par son texte (WCAG 4.1.2).
• Les navigateurs récents exposent l’état ouvert ou fermé du bouton. Non vérifié avec un lecteur d’écran.

Garanti par le composant

• Le bouton est un élément button natif d’au moins la cible minimale (WCAG 2.5.8).
• Le panneau a une bordure visible, pas seulement une couleur de fond (WCAG 1.4.11).
• En forced-colors: active, les bordures prennent la couleur CanvasText.

À la charge de l’intégrateur

• Fournir un id unique par panneau : le composant lève une erreur sans id.
• Garder le contenu court ; mettre un bouton de fermeture si le panneau contient des liens.
• Sans ancrage CSS, le panneau s’affiche en bas de la fenêtre, pas sous le bouton.

Propriétés

Jetons utilisés

• --pp-color-fg
• --pp-color-focus
• --pp-color-line
• --pp-color-surface
• --pp-radius-control
• --pp-radius-surface
• --pp-size-focus-offset
• --pp-size-focus-width
• --pp-size-measure
• --pp-size-rule
• --pp-size-target-min
• --pp-space-2xs
• --pp-space-3xs
• --pp-space-s

Preuves et décisions

• WCAG 4.1.2 Nom, rôle et valeur
• WCAG 2.5.8 Taille de cible (minimum)
• WCAG 1.4.11 Contraste des éléments non textuels
• Tests : packages/astro/test/Popover.test.ts