Toast

À quoi il sert

Toast affiche une notification courte qui ne bloque pas la page et se ferme seule ou au bouton.

Quand l’utiliser

• Confirmer une action sans quitter la page, par exemple « Brouillon enregistré ».
• Signaler un échec qui n’empêche pas de continuer. Le texte du message nomme le ton.

Quand ne pas l’utiliser

• Pour une erreur qui exige une action : utiliser Alert ou Dialog, qui restent à l’écran.
• Pour un message que l’utilisateur doit relire : mettre duration à 0 ou choisir Alert.

Exemples

---
import Toast from '@paulperigault/astro/Toast.astro';
---
<Toast label="Notifications" dismissLabel="Fermer" />

<script>
  import { show } from './behaviors/toast';

  const region = document.querySelector('.pp-toast-region');
  if (region) show(region, { message: 'Réussi : brouillon enregistré.', tone: 'success' });
</script>

Accessibilité

Clavier

• Chaque toast contient un bouton de fermeture atteignable à la touche Tab.
• Échap ferme le toast qui contient le focus.
• Après la fermeture, le focus retourne au document. Le renvoyer à un élément précis reste à faire.

Lecteur d’écran

• La région a role="status", aria-live="polite" et aria-atomic="false" : seul le toast ajouté est annoncé (WCAG 4.1.3).
• La région porte un nom (label). Le bouton de fermeture a un texte visible (dismissLabel).

Garanti par le composant

• Le minuteur est suspendu au survol et au focus, puis repart du début (WCAG 2.2.1). duration: 0 désactive la fermeture automatique.
• La durée par défaut est de 8 000 ms. Ce chiffre est une convention, pas une valeur imposée par la norme.
• Le ton passe par data-tone et par une bordure de début. Le texte du message porte le sens (WCAG 1.4.1).
• Le bouton de fermeture a une cible d’au moins --pp-size-target-min (WCAG 2.5.8).
• L’apparition se fait par opacité. Elle est supprimée sous prefers-reduced-motion (WCAG 2.3.3).

À la charge de l’intégrateur

• Poser une seule région par page et écrire des messages qui disent le résultat, dans la langue du site.
• Sans script, la région reste vide : prévoir un autre retour pour les actions importantes.
• Le toast fixé en bas peut masquer du contenu focalisé (WCAG 2.4.11). Cela n’a pas été vérifié sur tous les gabarits.
• Les lecteurs d’écran n’annoncent pas toujours une région ajoutée en même temps que son contenu. Non vérifié ici.

Propriétés

Jetons utilisés

• --pp-color-control
• --pp-color-fg
• --pp-color-focus
• --pp-color-line
• --pp-color-status-failed
• --pp-color-status-passed
• --pp-color-surface
• --pp-duration-base
• --pp-easing-standard
• --pp-font-line-height-body
• --pp-radius-control
• --pp-radius-surface
• --pp-size-control-height
• --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
• --pp-space-xs
• --pp-z-overlay

Preuves et décisions

• WCAG 2.2.1 Délai réglable
• WCAG 4.1.3 Messages d’état
• WCAG 1.4.1 Utilisation de la couleur
• WCAG 2.5.8 Taille de la cible (minimum)
• Tests : packages/astro/test/Toast.test.ts et toast.behavior.test.ts