Alert

Componente di notifica inline per comunicare stati informativi, di successo, attenzione ed errore. Display-only — nessun JavaScript integrato.

Comportamento

Il componente viene renderizzato come <div> con role ARIA derivato automaticamente dal tipo:

• role="status" per type: info e type: success — annuncio polite allo screen reader
• role="alert" per type: warning e type: error — annuncio assertive allo screen reader

Il parametro role consente di sovrascrivere il valore auto-derivato quando necessario.

Varianti

Varianti di Tipo

• info: Messaggio informativo neutro
• success: Conferma operazione completata con successo
• warning: Avviso che richiede attenzione dell’utente
• error: Errore che impedisce o ha impedito un’operazione

Varianti di Struttura

• with-heading: Heading testuale sopra il corpo del messaggio
• dismissible: Pulsante di chiusura in alto a destra
• with-link: Link all’interno del corpo del messaggio
• custom-icon: Icona SVG personalizzata al posto di quella default del tipo

Parametri di configurazione

Accessibilità

WCAG 2.2

Livello AA — criteri pertinenti:

• 1.4.1 Uso del colore — l’icona garantisce la distinzione tipologica oltre al colore
• 1.4.3 Contrasto minimo — testo su sfondo con contrasto ≥ 4.5:1
• 4.1.3 Messaggi di stato — role="status" e role="alert" comunicano i messaggi dinamici agli screen reader

Struttura e semantica

• <div role="status"> — live region polite per info e success; lo screen reader annuncia il contenuto al termine della lettura corrente; da inserire nel DOM solo quando il messaggio è pronto
• <div role="alert"> — live region assertive per warning e error; lo screen reader interrompe la lettura corrente e annuncia immediatamente il contenuto

Attributi ARIA

Screen reader

• Il role garantisce l’annuncio del contenuto agli screen reader quando l’elemento viene inserito nel DOM
• aria-hidden="true" sull’icona — l’icona è decorativa; il nome accessibile è garantito da heading o body
• Il pulsante di chiusura ha label nascosta via rtds-sr-only

Stili CSS

Classi Base

• .rtds-alert: Stile base — flex, padding var(--spacing-4), bordo 1px su tutti i lati + bordo sinistro spesso, sfondo neutro

Classi Modificatori

• .rtds-alert--info: Variante informativa — bordo e icona blu (--color-content-info)
• .rtds-alert--success: Variante successo — bordo e icona verde (--color-content-success)
• .rtds-alert--warning: Variante attenzione — bordo e icona arancione (--color-content-warn)
• .rtds-alert--error: Variante errore — bordo e icona rosso (--color-content-error)

Classi Elementi (BEM)

• .rtds-alert__icon: Contenitore dell’icona SVG — flex-shrink: 0
• .rtds-alert__content: Contenitore di heading e body — occupa lo spazio restante
• .rtds-alert__heading: Titolo opzionale in grassetto
• .rtds-alert__body: Testo del messaggio; i link al suo interno ricevono stile automatico (--color-link-primary, underline)
• .rtds-alert__close: Pulsante di chiusura — flex-shrink: 0, allineato in alto — classi: rtds-btn rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03 rtds-w-8 rtds-h-8

Tematizzazione

Il componente espone variabili CSS per la personalizzazione dal CMS ospitante tramite il pattern triple fallback.

Override pubblici (Tier 1)

Token semantici DS (Tier 2)

Esempi di utilizzo

<!-- Alert informativo con heading -->
<div class="rtds-alert rtds-alert--info" role="status">
  <div class="rtds-alert__icon" aria-hidden="true"><!-- icona SVG --></div>
  <div class="rtds-alert__content">
    <h2 class="rtds-alert__heading">Informazione</h2>
    <p class="rtds-alert__body">Testo del messaggio informativo.</p>
  </div>
</div>

<!-- Alert errore -->
<div class="rtds-alert rtds-alert--error" role="alert">
  <div class="rtds-alert__icon" aria-hidden="true"><!-- icona SVG --></div>
  <div class="rtds-alert__content">
    <p class="rtds-alert__body">Si è verificato un errore. Riprova più tardi.</p>
  </div>
</div>

<!-- Alert con link nel body -->
<div class="rtds-alert rtds-alert--info" role="status">
  <div class="rtds-alert__icon" aria-hidden="true"><!-- icona SVG --></div>
  <div class="rtds-alert__content">
    <p class="rtds-alert__body">Consulta la <a href="#">documentazione completa</a> per ulteriori informazioni.</p>
  </div>
</div>

Note

• Richiede lo sprite SVG (/icons.svg) caricato in pagina
• role="alert" ha gestione speciale nelle AT: il contenuto viene annunciato sia quando l’elemento è iniettato nel DOM già con contenuto, sia quando il contenuto viene aggiunto in seguito. Per role="status" il pattern raccomandato è: live region vuota nel DOM → aggiungere il contenuto via JS. Evitare display: none su entrambi i ruoli: quando l’elemento non è visibile cessa di far parte dell’albero di accessibilità e la live region perde efficacia.
• Il dismiss/close è responsabilità del consumer (nessun JavaScript integrato). Il pulsante usa markup inline con classi rtds-btn rtds-btn--icon rtds-btn--outlined rtds-border-none rtds-content-01 hover:rtds-bg-black focus:rtds-content-03 rtds-w-8 rtds-h-8, coerente con il componente Toast.