Mesaj de eroare

Prezentare

Explică problema unui câmp individual și modul concret de remediere, direct lângă câmpul afectat.

Când se folosește

• imediat sub label/hint și deasupra controlului cu eroare, pentru fiecare câmp care a eșuat validarea;
• întotdeauna împreună cu `aria-invalid="true"` pe control și `aria-describedby` către mesaj.

Când nu se folosește

• ca listă centralizată a tuturor erorilor unui formular — acolo se folosește `error-summary`, plasat separat, la începutul formularului;
• pentru mesaje de succes sau informative — acelea folosesc `notification-banner` sau `inset-text`, nu `error-message`.

Anatomie

Un `<p class="sd-error-message">`, cu textul „Eroare:” adăugat automat prin CSS (`::before`), urmat de textul propriu al problemei.

Variante

• implicit — o singură variantă

Stări

• nu are stări interactive proprii

Comportament

Element static; prefixul „Eroare:” e generat prin `content` CSS, deci dispare dacă stilurile nu se încarcă — implementarea nu trebuie să se bazeze pe el pentru sens, textul propriu-zis al mesajului rămâne complet fără el.

Reguli de conținut

• textul propriu-zis nu repetă cuvântul „eroare” — prefixul e adăugat automat prin CSS;
• urmează structura din ghidul de conținut: ce s-a întâmplat, ce câmp, cum se remediază, fără să blameze utilizatorul (docs/content/content-style-guide.md#erori).

Probleme cunoscute

• prefixul „Eroare:” generat prin `::before` nu apare deloc dacă foaia de stil `forms.css` nu e încărcată — implementatorii care randează HTML fără CSS (de exemplu în e-mail) trebuie să adauge „Eroare:” explicit în text.

Responsabilitățile implementatorului

• leagă mesajul de control prin `aria-describedby`, nu doar prin poziționare vizuală;
• setează `aria-invalid="true"` pe control în același timp cu afișarea mesajului.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/49 (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/forms.css';

<p class="sd-error-message"><span class="sd-visually-hidden">Eroare:</span> Introdu o adresă de e-mail validă.</p>

Contract și surse

• Documentația familiei Formulare
• 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).