Composant de notification contextuelle affiché en superposition. Chaque alert peut être fermée au clic via une animation de sortie. Supporte le mode "auto-dismiss" via une animation CSS et l'empilement dans un conteneur dédié.
Vous n'avez pas les droits nécessaires pour effectuer cette action.
Votre profil a été enregistré avec succès.
Message de l'alerte.
Chaque data-dismiss="alert" doit être placé à l'intérieur
d'un élément [data-ui="alert"]. Le JS remonte au parent
le plus proche pour appliquer l'animation de fermeture.
Les attributs suivants améliorent l’accessibilité :
role="alert"
(annonce immédiatement le message aux lecteurs d’écran, ajouté automatiquement)
aria-label="Close alert"
(définit un libellé accessible pour le bouton de fermeture, à ajouter manuellement)
role, est ajouté automatiquement, et aria-label, s’il n’est pas déjà défini, est également ajouté
automatiquement par Alert.enhance().
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.alert-container |
<div> |
Conteneur de positionnement pour empiler les alerts. Gère le z-index, la direction colonne et
l'espacement via gap.
|
.alert |
<div> |
Conteneur principal de l'alert avec border, border-radius, background-color
via --alert-background-color et gestion du
débordement.
|
.alert-header |
<div> |
En-tête de l'alert contenant le titre et le bouton de fermeture. padding via variables CSS.
|
.alert-body |
<div> |
Corps de l'alert avec flex: 1 1 auto et padding via
variables CSS.
|
.alert-footer |
<div> |
Pied de l'alert avec padding via variables CSS. Optionnel. |
.alert-{color} |
<div> |
Variante colorée générée pour chaque couleur de la map $colors.
Applique border-color, background-color et color.
|
.anim-alert-auto |
<div> |
Déclenche une animation CSS d'auto-disparition. L'alert se ferme automatiquement à la fin de
l'animation. Si cette classe est absente, Alert.enhance()
ajoute automatiquement .anim-alert-enter et .anim-200
pour déclencher l'animation d'entrée.
|
.close-indicator |
<span> |
Icône de fermeture affichée via ::after ou ::before. Doit être accompagnée de aria-hidden="true".
|
Les variantes sont générées automatiquement pour chaque entrée de la map $colors. La classe suit le pattern .alert-{name}.
L'alert se ferme automatiquement grâce à l'animation CSS .anim-alert-auto.
Aucun délai JS n'est nécessaire — la suppression du
DOM est déclenchée par l'événement animationend.
Sans .anim-alert-auto, l'alert reste affichée jusqu'au clic
sur le bouton de fermeture.
Message.
| ÉTAT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
| Visible | [data-ui="alert"] |
L'alert est présente dans le DOM et affichée. C'est l'état initial à l'insertion. |
| En entrée | .anim-alert-enter.anim-200 |
Classes ajoutées par Alert.enhance() à l'insertion,
uniquement si .anim-alert-auto est absent. Déclenche
l'animation
d'entrée. Ignorée par onAnimationEnd pour ne pas
supprimer l'alert.
|
| En sortie | .anim-alert-exit.anim-200 |
Classes ajoutées par le JS au clic sur le bouton de fermeture. Déclenche l'animation de sortie. |
| Auto-dismiss | .anim-alert-auto |
L'animation CSS se déclenche automatiquement. L'alert est supprimée du DOM à animationend.
|
Le composant est piloté par la classe Alert. Elle s'appuie sur
la délégation d'événements (un seul listener sur document),
un MutationObserver pour les alerts injectées dynamiquement,
et l'événement natif animationend pour la suppression du DOM.
import Alert from './Alert.js';
// A single instance is enough for the entire page.
new Alert();
La classe implémente un guard Alert.initialized :
instancier Alert plusieurs fois n'entraîne aucun
doublon de listeners.
| ATTRIBUT | ÉLÉMENT | DESCRIPTION |
|---|---|---|
data-ui="alert" |
.alert |
Marque l'élément comme une alert gérée par le JS. Requis pour l'initialisation et l'observation. |
data-dismiss="alert" |
.btn |
Identifie le bouton de fermeture. Au clic, le JS ajoute les classes d'animation de sortie sur l'alert parente. |
| MÉTHODE | DESCRIPTION |
|---|---|
Alert.init() |
Parcourt tous les [data-ui="alert"] du DOM et appelle
Alert.enhance() sur chacun.
|
Alert.enhance(alert) |
Ajoute .anim-alert-enter et .anim-200 sur l'alert pour déclencher l'animation
d'entrée — sauf si
l'alert possède déjà .anim-alert-auto, auquel cas
l'animation
d'entrée est ignorée. Ajoute également role="alert".
|
Alert.onClick(event) |
Gestionnaire global de clic. Détecte [data-dismiss="alert"] et ajoute .anim-alert-exit.anim-200 sur l'alert parente.
|
Alert.onAnimationEnd(event) |
Supprime l'alert du DOM à la fin d'une animation sur un élément [data-ui="alert"]. Ignore l'animation alert-enter pour ne pas supprimer l'alert à l'entrée.
|
Alert.observe() |
Lance un MutationObserver sur document.body pour détecter les alerts injectées
dynamiquement et les améliorer automatiquement.
|
Le MutationObserver surveille childList et subtree sur le document.body.
Toute alert insérée dynamiquement dans le DOM est automatiquement améliorée par Alert.enhance().
// Create and inject an alert dynamically
const alert =
document.createElement('div');
alert.setAttribute('data-ui',
'alert');
alert.className
= 'alert alert-success anim-alert-auto';
alert.innerHTML
= '...';
document.querySelector('.alert-container').append(alert);
| TOKEN | RÔLE |
|---|---|
--alert-gap |
Espacement entre les alerts empilées dans le conteneur |
--alert-container-padding-x |
Padding horizontal du conteneur d'alerts |
--alert-container-padding-y |
Padding vertical du conteneur d'alerts |
--alert-border-radius |
Rayon des coins de l'alert |
--alert-border-width |
Épaisseur de la bordure |
--alert-border-style |
Style de bordure (solid, dashed…)
|
--alert-border-color |
Couleur de la bordure (surchargée par .alert-{color})
|
--alert-background-color |
Couleur de fond de l’alerte |
--alert-header-padding-x |
Padding horizontal de l'en-tête |
--alert-header-padding-y |
Padding vertical de l'en-tête |
--alert-body-padding-x |
Padding horizontal du corps |
--alert-body-padding-y |
Padding vertical du corps |
--alert-footer-padding-x |
Padding horizontal du pied |
--alert-footer-padding-y |
Padding vertical du pied |
--content-on-{color} |
Couleur du texte sur fond coloré, définie par variante. Garantit le contraste sur chaque couleur de la map. |
/* Global variables */
:root {
--alert-border-radius: 8px;
--alert-gap:
0.75rem;
--alert-header-padding-x:
1.25rem;
--alert-header-padding-y:
1rem;
}
/* Light theme */
:root[data-theme="light"] {
color-scheme:
light;
--alert-border-color: #222222;
}
/* Dark theme */
:root[data-theme="dark"] {
color-scheme:
dark;
--alert-border-color: #888888;
}
| PRATIQUE | DÉTAIL |
|---|---|
role="alert" |
Posé automatiquement par Alert.enhance(). Déclenche
une annonce immédiate par les lecteurs d'écran dès l'insertion de l'alert dans le DOM.
|
aria-label="Close alert" |
Requis sur le bouton de fermeture. Fournit un libellé explicite aux technologies d'assistance puisque le bouton ne contient que l'icône visuelle. |
aria-hidden="true" |
Posé sur .close-indicator. Masque l'icône décorative
aux lecteurs d'écran.
|
Élément <button> |
Utilisez toujours un <button> pour le bouton de
fermeture afin d'assurer la navigation clavier native (Tab, Entrée, Espace).
|
Ne jamais utiliser role="alertdialog" à la place de role="alert" : ce composant n'est pas modal et ne piège pas
le focus. role="alert" est posé automatiquement par le JS
— ne pas le surcharger manuellement sans raison.
Toujours placer les alerts dans un .alert-container pour
bénéficier du positionnement, du z-index et de
l'empilement automatique via flex-direction: column.
Ne pas instancier Alert avant le chargement du DOM.
Utilisez DOMContentLoaded ou placez le script en bas de
page.
Ne pas supprimer l'alert du DOM manuellement (ex : via element.remove())
sans déclencher l'animation de sortie. La suppression est gérée exclusivement par l'événement animationend.
Le MutationObserver et l'événement animationend sont supportés par tous les navigateurs modernes.
Pour IE11, des polyfills sont nécessaires.
Alert · WEBDEV-UI DOCS / V1