Rezumatul erorilor

Prezentare

Listează, la începutul formularului, toate erorile rezultate dintr-o validare server-side, fiecare legată printr-un link direct la câmpul respectiv.

Când se folosește

• după fiecare trimitere de formular care eșuează validarea server-side, cu cel puțin o eroare;
• plasat la începutul conținutului paginii, înaintea formularului propriu-zis.

Când nu se folosește

• pentru validare doar client-side, afișată instant — acolo `error-message` de lângă câmp e suficient, fără rezumat;
• pentru un formular cu o singură eroare posibilă — un rezumat cu un singur element aduce puțină valoare față de `error-message` direct pe câmp; rămâne totuși recomandat pentru consecvență.

Anatomie

Un `<section class="sd-error-summary" data-sd-error-summary tabindex="-1">` cu titlu (`sd-error-summary__title`), introducere opțională (`sd-error-summary__intro`) și o listă de linkuri (`sd-error-summary__list`), fiecare `<a href="#câmp">` către câmpul cu eroare.

Variante

• implicit — o singură variantă

Stări

• :focus — contur vizibil, pentru momentul în care focusul e mutat programatic aici după încărcarea paginii

Comportament

Fără JavaScript: rămâne complet funcțional — linkurile `href="#câmp"` navighează nativ la câmpul cu eroare. Cu JavaScript (`focusErrorSummary`): focusul e mutat automat pe rezumat la încărcarea paginii, dacă există cel puțin un link de eroare; `enhanceErrorSummaryLinks` mută apoi focusul pe câmpul țintă după navigarea prin fragment, ca linkul să nu doar deruleze pagina, ci să și mute efectiv focusul tastaturii.

Reguli de conținut

• fiecare element din listă e formulat ca acțiune de remediere („Introdu numele complet”), nu ca simplă repetare a erorii tehnice.

Responsabilitățile implementatorului

• apelează `focusErrorSummary()` după randarea rezultatului validării server-side, ca îmbunătățire opțională peste comportamentul nativ funcțional;
• fiecare link din rezumat trebuie să aibă un `href="#id-câmp"` real, existent în pagină — `focusErrorSummary`, cu `requireErrorLinks` implicit (`true`), refuză să mute focusul pe un rezumat fără linkuri de eroare valide.

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';

import { focusErrorSummary, enhanceErrorSummaryLinks } from '@sistem-digital/components';

<section class="sd-error-summary" data-sd-error-summary tabindex="-1"><h2>Există o problemă</h2><ul><li><a href="#catalog-field">Introdu numele complet</a></li></ul></section>

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).