Dialog

Prezentare

Întrerupe fluxul pentru o decizie sau confirmare care nu poate fi ignorată, folosind elementul `<dialog>` nativ pentru capcana de focus și restaurarea focusului.

Când se folosește

• pentru confirmări care blochează intenționat restul paginii până la o decizie explicită (de exemplu, confirmarea trimiterii unei cereri).

Când nu se folosește

• pentru mesaje informative necritice — o `notification-banner` sau un `alert` inline nu întrerupe fluxul utilizatorului fără motiv.

Anatomie

Un declanșator (`[data-sd-dialog-trigger]` cu `aria-controls` către id-ul dialogului) și un `<dialog class="sd-dialog" data-sd-dialog aria-labelledby="…">` cu `.sd-dialog__header` (titlu + buton `[data-sd-dialog-close]`), `.sd-dialog__body` și opțional `.sd-dialog__footer`.

Variante

• implicit — o singură variantă, cu conținut liber în body și footer

Stări

• `[open]`
• `[data-sd-enhanced="true"]` — setat de JavaScript la inițializare

Comportament

Fără JavaScript: `<dialog>` fără `[data-sd-enhanced]` se randează static, inline în flux — declanșatorul rămâne un link funcțional, nu un control mort. Cu JavaScript (`enhanceDialogs`): declanșatorul deschide dialogul prin `showModal()` (capcană de focus și `::backdrop` native ale browserului), memorează elementul care avea focus înainte de deschidere, iar la închidere (buton sau evenimentul nativ `close`, care include tasta Escape) restaurează focusul exact pe acel element.

Reguli de conținut

• titlul din header rezumă decizia cerută, nu doar numele componentei ("Trimite cererea?", nu "Confirmare").

Responsabilitățile implementatorului

• dialogul trebuie să aibă un id unic și `aria-labelledby` valid — fără ele, enhancement-ul nu leagă declanșatorul de dialog și browserul nu poate anunța titlul la deschidere.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/52 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/interactive.css';

import { enhanceDialogs } from '@sistem-digital/components';

<a class="sd-button sd-button--primary" href="#catalog-dialog" aria-controls="catalog-dialog" data-sd-dialog-trigger>Revizuiește</a><dialog class="sd-dialog" id="catalog-dialog" data-sd-dialog aria-labelledby="catalog-dialog-title"><div class="sd-dialog__header"><h3 class="sd-dialog__title" id="catalog-dialog-title">Trimite cererea?</h3><button class="sd-dialog__close" type="button" data-sd-dialog-close>Închide</button></div><div class="sd-dialog__body"><p>Vei primi confirmarea în inbox.</p></div></dialog>

Contract și surse

• Documentația familiei Interactive
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).