Aller au contenu
SkillCodex
Menu

Inline alert

Alerte dans le contexte

Un message persistant placé près du contenu ou de la tâche qu'il explique, avec une urgence adaptée à la mise à jour réelle.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : un message d'erreur près du formulaire en échecgarder cet avertissement visible près du réglageafficher sur place pourquoi l'envoi a échoué

Toutes les formulations
Enregistrer et partager

Reconnaître

Informer l'utilisateur

Essayer

Le message est-il temporaire, persistant dans son contexte ou global à la page ?

Alerte dans le contexte

Contexte commun aux essais

Un espace de travail signale un changement d'état et doit placer le message selon sa portée, son urgence et sa persistance.

Alerte dans le contexte

Mission

Alerte contextuelle - Inline alert

Déclencher l'échec, lire la raison, utiliser l'action de correction et vérifier que le message reste jusqu'au choix d'un fichier valide.

Taille maximale : 1 Mo.

Résultat de l’essai

Choisis un fichier à envoyer.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
L'alerte visible nomme le fichier, explique la limite de taille et propose Choisir un autre fichier.
Cas limite
Si l'erreur se trouve déjà dans la région d'envoi focalisée, elle n'est pas annoncée une seconde fois comme alerte assertive.

Ce que cet essai montre

Inline alert reste près du contenu affecté ; Toast est temporaire et détaché, tandis que Banner traite une condition globale de page.

Lequel convient à ton besoin ?

Alerte dans le contexte

Expliquer un échec de formulaire ou d'envoi dans son contexte

Notification temporaire

Confirmer un résultat de fond à faible risque

Quel composant utilises-tu ici ?
Différence et sources

Inline alert reste près du contenu affecté ; Toast est temporaire et détaché, tandis que Banner traite une condition globale de page.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Surface

    Le conteneur visible qui accueille le contenu du composant.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Informer l'utilisateur

      Alerte dans le contexte appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Notification temporaire

      Choisis Alerte dans le contexte si le message doit rester visible tant que le problème n’est pas résolu, comme une erreur de formulaire. Choisis Notification temporaire si tu confirmes un résultat à faible risque que l’utilisateur peut ignorer sans conséquence.

      Comparer cette paire
    • Ne pas confondre

      Bannière d'annonce

      Choisis Alerte dans le contexte si le message explique un problème dans un formulaire, un champ ou un envoi, là où il s’est produit. Choisis Bannière d’annonce si le message concerne toute la page ou la session, comme une maintenance planifiée.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : message dans la page, alerte contextuelle, alerte de formulaire

    • un message d'erreur près du formulaire en échec
    • garder cet avertissement visible près du réglage
    • afficher sur place pourquoi l'envoi a échoué
    • un message dans le contenu de la page
    • expliquer le problème près de sa cause
    • une confirmation persistante sous le formulaire

    Choisir

    À utiliser quand

    • Expliquer un échec de formulaire ou d'envoi dans son contexte
    • Garder un avertissement important visible jusqu'à résolution

    À éviter quand

    • Une courte confirmation sans risque n'a pas besoin de persister
    • La condition s'applique à toute la page ou au site

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Valide une valeur invalide ou un fichier non accepté dans la zone concernée.

      Résultat attendu

      Un message à proximité explique le problème précis et la façon de le corriger.

    2. 2. À faire

      Corrige la valeur et recommence sans recharger la page.

      Résultat attendu

      Le reste de ta saisie est conservé, et le message change ou disparaît lorsque le problème est résolu.

    3. 3. À faire

      Utilise le formulaire au clavier lorsque l’alerte apparaît.

      Résultat attendu

      Le champ concerné et l’action de correction restent accessibles ; un message courant ne vole pas le focus, tandis qu’un échec de validation t’oriente clairement vers l’erreur.

    Contrat complet
    1. 1Le message se trouve près de la tâche affectée
    2. 2Le texte expose le problème et sa correction
    3. 3L'urgence détermine le rôle live
    4. 4Le message persiste tant que la condition existe

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Alerte dans le contexte sans casser son comportement

    # Implémenter Alerte dans le contexte dans ton agent
    
    ## Objectif
    Implémente Alerte dans le contexte pour ce comportement vérifié : Un message persistant placé près du contenu ou de la tâche qu’il explique, avec une urgence adaptée à la mise à jour réelle.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme qu’Alerte dans le contexte répond au besoin avant de coder.
    
    ## Comportement requis
    - Le message reste dans son contexte jusqu’à ce que la situation change ou que l’utilisateur le ferme volontairement.
    - Une région live annonce un nouvel état seulement si la mise à jour est importante et n’a pas déjà le focus.
    
    ## États à couvrir
    - Envoi prêt
    - Erreur de taille d’envoi
    
    ## Accessibilité
    - Rôle ARIA : status | alert | none
    - Le contrôle principal ou la région nommée pour Alerte dans le contexte possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Le message ne vole pas le focus pour les mises à jour courantes ; un échec d’envoi peut focaliser volontairement un résumé ou le premier contrôle invalide.
    - Il reste jusqu’à résolution ; un contrôle fermer existe seulement si masquer le message ne cache pas un risque non résolu.
    - Les nouvelles erreurs urgentes utilisent alert, les états courants un status poli, et le texte explicatif statique aucun rôle live.
    - Tab atteint les actions de correction dans l’ordre du document
    - Entrée active l’action de correction nommée
    
    ## Quand ne pas utiliser
    - Une courte confirmation sans risque n’a pas besoin de persister
    - La condition s’applique à toute la page ou au site
    
    ## Critères d’acceptation
    - Le message se trouve près de la tâche affectée
    - Le texte expose le problème et sa correction
    - L’urgence détermine le rôle live
    - Le message persiste tant que la condition existe
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Alerte dans le contexte sur un parcours réel

    # Vérifier Alerte dans le contexte après l’implémentation
    
    ## Objectif
    Audite l’implémentation d’Alerte dans le contexte au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:70d94cda38fd2fe3fce289937cd71f434ac21b983640f329a9c40fddabde6ada

    Diagnostiquer un problème

    Trouve et corrige le défaut d’Alerte dans le contexte

    # Déboguer Alerte dans le contexte dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés d’Alerte dans le contexte.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le message se trouve près de la tâche affectée
    - Le texte expose le problème et sa correction
    - L’urgence détermine le rôle live
    - Le message persiste tant que la condition existe
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction d’Alerte dans le contexte

    # Empêcher la régression d’Alerte dans le contexte
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Alerte dans le contexte aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:64bec049d182cb02ea80da2bcd8e7cf4a5a9561cfed74e512688bea02e969817

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:a187fd9149b9740e1f1b9e7f6584b1c94272602090ff0178dc5035e46e6bd5cf

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    div or section

    NatifUn message visible n’exige pas automatiquement role=alert ; l’urgence et la position du focus déterminent son annonce.

    Détails techniques

    Comportements

    • Rester jusqu'à résolution

      Le message reste dans son contexte jusqu'à ce que la situation change ou que l'utilisateur le ferme volontairement.

    • Annoncer les changements utiles

      Une région live annonce un nouvel état seulement si la mise à jour est importante et n'a pas déjà le focus.

    États

    • Envoi prêt

      Envoi prêt

    • Erreur de taille d’envoi

      Erreur de taille d’envoi

    Transitions d’état

    • Envoi prêt → Erreur de taille d’envoi

      L’envoi d’un fichier dépassant la taille autorisée crée l’erreur persistante en ligne.

    • Erreur de taille d’envoi → Envoi prêt

      Le choix d’un fichier dans la limite autorisée résout et retire l’erreur en ligne.

    Scénarios de test

    Contexte
    L'envoi d'un fichier échoue car le document dépasse la taille autorisée.
    Mission
    Déclencher l'échec, lire la raison, utiliser l'action de correction et vérifier que le message reste jusqu'au choix d'un fichier valide.
    État principal
    L'alerte visible nomme le fichier, explique la limite de taille et propose Choisir un autre fichier.
    Cas limite
    Si l'erreur se trouve déjà dans la région d'envoi focalisée, elle n'est pas annoncée une seconde fois comme alerte assertive.

    Signaux visuels

    • Message intégré au flux du document
    • Proche du contrôle ou de la section concernée
    • Icône et couleur sont des indices redondants

    Signaux comportementaux

    • Reste jusqu'à résolution ou fermeture volontaire
    • Reçoit le focus seulement si la correction l'exige
    • Le rôle live correspond à l'urgence réelle

    Accessibilité

    Rôle
    status | alert | none
    Nom accessible
    Le contrôle principal ou la région nommée pour Alerte dans le contexte possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Le message ne vole pas le focus pour les mises à jour courantes ; un échec d'envoi peut focaliser volontairement un résumé ou le premier contrôle invalide.
    Fermeture
    Il reste jusqu'à résolution ; un contrôle fermer existe seulement si masquer le message ne cache pas un risque non résolu.
    Défilement
    L'affichage ou la mise à jour du message conserve la position de lecture, sauf si le focus est déplacé volontairement vers une erreur bloquante.
    Annonce
    Les nouvelles erreurs urgentes utilisent alert, les états courants un status poli, et le texte explicatif statique aucun rôle live.
    Clavier
    • Tab atteint les actions de correction dans l'ordre du document
    • Entrée active l'action de correction nommée

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • div or section

      implementationKind
      custom
      nativeElement
      div or section
      ariaPattern
      status, alert, or no live role according to urgency
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      exception
      sourceId
      source-ui-aria-alert
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Un message visible n’exige pas automatiquement role=alert ; l’urgence et la position du focus déterminent son annonce.

      Vérifier la source du binding

    Sources

    • WAI-ARIA APG: Alert Pattern
      sourceId
      source-ui-aria-alert
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/alert/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:35Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:e61389c00faeb90ba7717be73a536138c2d7250b21a26e88cc9ef0f1c4987c41
      status
      verified

      Affirmation couverte : Alerte dans le contexte : guide APG informatif pour le modèle alerte : rôles, états, relations et interactions au clavier.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Alerte dans le contexte : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

    • WAI-ARIA 1.2: Live Region Attributes
      sourceId
      source-ui-wai-aria-live-regions
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Alerte dans le contexte : propriétés normatives des régions live pour le comportement d'annonce d'état.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Alerte dans le contexte : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Alerte dans le contexte : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.