Componente · M2

Interacțiuni complexe, cu fallback simplu și verificabil.

HTML-ul server-rendered rămâne utilizabil fără JavaScript. Enhancement-urile adaugă focus management, navigare cu săgeți, filtrare și feedback dinamic numai acolo unde aduc valoare.

Pachet:@sistem-digital/components
Modul:interactive.css
Strategie:progressive enhancement

Accordion

Disclosure nativ, grupat numai când exclusivitatea este necesară.

Fiecare secțiune folosește details și summary. Fără JavaScript pot rămâne deschise mai multe secțiuni; enhancement-ul opțional închide automat elementele vecine.

Cine poate depune cererea?

Persoana vizată, reprezentantul legal sau un împuternicit cu mandat verificabil.

Ce documente sunt necesare?

Serviciul verifică identitatea și situația fiscală la sursă. Nu solicită copii după acte.

Cât durează soluționarea?

Termenul estimat este de două zile lucrătoare, iar stadiul poate fi urmărit online.

Dialog

Dialogul nativ păstrează focusul și oferă un fallback inline.

Linkul de declanșare indică secțiunea prin fragment. Cu JavaScript, aceeași secțiune devine modală; la închidere, focusul revine pe elementul care a deschis-o.

Revizuiește trimiterea

Tabs

Tabs sunt folosite numai pentru variante paralele ale aceluiași conținut.

Fără JavaScript, toate secțiunile sunt afișate succesiv. Cu enhancement, săgețile stânga și dreapta, Home și End mută selecția conform pattern-ului ARIA.

Document digital semnat

Îl primești în inbox și îl poți verifica prin codul inclus în document.

Ridicare de la ghișeu

Primești o notificare când documentul este pregătit și îl ridici cu actul de identitate.

Livrare prin poștă

Termenul de livrare este separat de termenul administrativ de soluționare.

Step indicator

Progresul este textual și nu funcționează ca navigație falsă.

Date și autocomplete

Controalele native sunt baseline-ul; listbox-ul este enhancement.

Data evenimentului

Lună

De exemplu, 31 08 2026.

Sau folosește selectorul nativ

Alege instituția

Instituție

Scrie cel puțin două caractere.

Upload avansat

Inputul nativ rămâne disponibil, inclusiv fără drag-and-drop.

Lista fișierelor și eliminarea individuală sunt enhancement-uri. Serverul validează din nou tipul și dimensiunea.

Documente justificative

Selectează fișiere sau trage-le în această zonă. PDF, JPG sau PNG, maximum 10 MB fiecare.

Switch și tooltip

Switch schimbă starea imediat; tooltip-ul explică fără să blocheze.

Switch-ul este un checkbox nativ stilizat cu role="switch" — funcționează identic fără JavaScript. Tooltip-ul folosește title ca fallback și devine un tooltip accesibil, cu focus și Escape, când scriptul rulează.

Preferințe de notificare

Notificări prin e-mail

Câmp cu explicație scurtă

Cod Numeric Personal

Dropdown

Fără JavaScript, aria-expanded="true" și lista de acțiuni sunt afișate direct. Cu enhancement, butonul o ascunde și o deschide la cerere; Escape și click în afară o închid și restaurează focusul.

Limite cunoscute

Alpha nu înseamnă conformitate declarată.

Dialogul necesită testare manuală suplimentară cu VoiceOver pe iOS și macOS.
Autocomplete-ul nu înlocuiește o căutare server-side pentru liste foarte mari sau sensibile.
Selectorul nativ de dată diferă între browsere; formatul și erorile trebuie explicate textual.
Drag-and-drop este opțional și nu poate fi singura cale pentru încărcarea fișierelor.
Baseline-urile vizuale detectează schimbări, dar nu decid dacă o schimbare este corectă.
Tooltip-ul afișat la focus poate rămâne insuficient de vizibil pentru unele cititoare de ecran mobile; necesită testare manuală suplimentară.
Dropdown-ul folosește o listă simplă de linkuri, nu role="menu"; navigarea se face cu Tab, nu cu săgeți, conform recomandării de a evita semantica ARIA de meniu acolo unde nu e strict necesară.

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

const cleanup = enhanceInteractiveComponents();
// La demontare: cleanup();