Banner

Message inline contextuel (callout / alerte) dans le flux de la page : info, succès, avertissement, erreur. 6 variantes alignées sur le badge. Statique par défaut — région live en opt-in pour les messages dynamiques. Inline contextual message (callout / alert) in the page flow: info, success, warning, error. 6 variants aligned with badge. Static by default — opt-in live region for dynamic messages.

VariantesVariants

NeutreNeutral Message neutre informatif.Neutral informational message.

AgenticaAgentica Highlight de marque ou contribution.Brand highlight or contribution.

InformationInformation Ce composant est en lecture seule.This component is read-only.

EnregistréSaved Vos modifications ont été sauvegardées.Your changes have been saved.

AttentionWarning Cette action affectera 3 fichiers liés.This action will affect 3 linked files.

ErreurError Impossible de contacter le serveur.Could not reach the server.

Règles absoluesAbsolute rules

Sévérité jamais par la couleur seule — icône + texte de sévérité pour les ATSeverity never by color alone — icon + severity text for AT
Banner statique : aucune région live ; dynamique : live="polite|assertive"Static banner: no live region; dynamic: live="polite|assertive"
Bouton fermer = <button> réel, aria-label, focus visibleClose button = real <button>, aria-label, visible focus
Jamais pour une notification flottante (utiliser un toast)Never for a floating notification (use a toast)
Jamais d'auto-dismiss d'une erreurNever auto-dismiss an error

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-banner-info-accent`	`semantic.color.feedback.info`	#0d74ce
`--agtc-component-banner-success-accent`	`semantic.color.feedback.success`	#18794e
`--agtc-component-banner-warning-accent`	`primitive.color.orange.11`	—
`--agtc-component-banner-danger-accent`	`semantic.color.feedback.danger`	#ce2c31
`--agtc-component-banner-brand-accent`	`semantic.color.brand.primary`	#12a594
`--agtc-component-banner-heading-text`	`semantic.color.text.primary`	#202020
`--agtc-component-banner-body-text`	`semantic.color.text.secondary`	#646464
`--agtc-component-banner-radius`	`semantic.radius.card`	10px
`--agtc-component-banner-padding-x`	`primitive.space.5`	20px

AccessibilitéAccessibility

Préfixe de sévérité masqué (« Erreur : ») — l'icône est décorativeHidden severity prefix ("Error: ") — the icon is decorative
Statique : pas de role live ; dynamique : role="status" ou role="alert"Static: no live role; dynamic: role="status" or role="alert"
Le banner ne capture jamais le focusThe banner never captures focus
Contraste texte ≥ 4.5:1 sur fond subtilText contrast ≥ 4.5:1 on subtle background

ImplémentationImplementation

<agtc-banner variant="warning" heading="Attention">
  Cette action affectera 3 fichiers liés.This action will affect 3 linked files.
</agtc-banner>

<!-- Avec actions + dismissible -->
<agtc-banner variant="brand" heading="Contribuer" dismissible>
  Ce système est ouvert aux contributions.This system welcomes contributions.
  <span slot="actions"><a href="…">Voir sur GitHub →View on GitHub →</a></span>
</agtc-banner>

<!-- Notification dynamique (insérée par JS) -->
<agtc-banner variant="danger" live="assertive" heading="Erreur">…</agtc-banner>

DOs et DON'TsDOs and DON'Ts

À faireDo

Choisir la variante par sévérité (success/warning/danger)Choose variant by severity (success/warning/danger)
Garder les erreurs persistantes (pas d'auto-dismiss)Keep errors persistent (no auto-dismiss)
Mettre live uniquement sur les messages insérés dynamiquementSet live only on dynamically inserted messages

À éviterDon't

role="alert" sur un banner statique de pagerole="alert" on a static page banner
Un banner pour ce qui devrait être un toast ou une modaleA banner for what should be a toast or modal
La sévérité par la couleur seuleSeverity by color alone

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036/042). Decision: N1–N9 all approved.

Pattern	Source	Applied	Justification
Semantic variants (6)	NN/g	✅	Aligned with `agtc-badge`
Meaning never conveyed by color alone (icon + AT text)	NN/g	✅	Hidden severity prefix
Icon per variant	NN/g	✅	Overridable, `no-icon` possible
Static by default (no live region)	MDN — status role	✅	`live="off"` by default
Assertive `role="alert"` used sparingly	A11Y Collective	✅	Via `live="assertive"`
Accessible close button, no focus trap	MDN — alert role	✅	`dismissible` + `dismiss` event
Heading + body + action zone	NN/g	✅	`heading` + slot + `slot="actions"`
Left accent border + subtle background	Dashboard	✅	Reuses the `contribution-banner` style
No auto-dismiss for critical messages	NN/g	✅	Documented guidance (persistent danger/warning)