Ariane

• role="alert" (interruption immédiate) ou role="status" (annonce polie) écrit par le composant sur l’élément selon variant — error/warning → alert, success/info → status, tout variant custom non reconnu → status (défaut sûr) — conforme WCAG 4.1.3 ↗ (ouvre dans un nouvel onglet)Status Messages : les messages de statut doivent être annoncés aux technologies d'assistance sans déplacer le focus.
• Pour remplacer ce rôle, écrire l’attribut role : <ar-alert variant="error" role="status"> rend une erreur annoncée poliment.
• without-notification retire le rôle écrit par le composant : aucune annonce.
• L’icône est masquée aux lecteurs d’écran (aria-hidden). L’information de sévérité est portée par le role, pas par l’icône.
• Une icône par défaut est fournie pour les 4 variants connus (error, warning, success, info). Elle peut être remplacée via le slot icon, mais il est déconseillé de la supprimer : elle constitue un repère visuel non colorimétrique, important pour les utilisateurs daltoniens ou en environnement à faible contraste. Un variant custom non reconnu par le composant n’affiche aucune icône par défaut (un avertissement en console le rappelle en dev) — fournissez slot="icon" dans ce cas.
• Le focus est reporté sur l’élément cible (next-focus) à la fermeture — l’utilisateur clavier ne se retrouve pas désorienté.

• Message compréhensible hors contexte visuel. Le contenu est lu dès l’apparition de l’alerte. Évitez les messages vagues (“Une erreur s’est produite”) — préférez (“Le formulaire n’a pas pu être soumis : champ email manquant”).
• Niveau de sévérité cohérent. error pour les erreurs bloquantes, warning pour les situations qui méritent attention sans bloquer, success pour les confirmations, info pour les informations neutres.
• Styliser un variant custom. Au-delà des 4 variantes prévues (error/warning/success/info), tout autre variant doit définir lui-même --ar-alert-bg, --ar-alert-border et --ar-alert-icon (ex. ar-alert[variant='promo'] { --ar-alert-bg: ...; }) et fournir une icône via slot="icon".
• next-focus obligatoire sur les alertes dismissibles. Un bouton de fermeture sans destination de focus laisse l’utilisateur clavier sans repère.

À la fermeture, ar-alert se retire du DOM (this.remove()) une fois la transition terminée — l’alerte n’est pas simplement masquée, elle disparaît définitivement de la page. Toute référence conservée à l’élément pointe alors vers un noeud détaché ; il n’existe pas de méthode pour la réafficher.

ar-alert-close (detail : { id }, l’attribut id de l’alerte, undefined s’il n’en a pas) est émis à ce moment-là, après la fin de la transition et juste avant le retrait du DOM :

document.querySelector('ar-alert').addEventListener('ar-alert-close', () => {
    console.log('Alerte fermée et retirée du DOM');
});

Le bouton de fermeture n’est rendu que si next-focus est défini et non vide (canBeHidden) : sans next-focus, l’alerte n’a pas de bouton de fermeture et reste donc affichée en permanence — c’est voulu, pour éviter de fermer une alerte sans savoir où renvoyer le focus clavier.