Accordion

Prezentare

Ascunde opțional secțiuni de conținut lung, redundante pentru majoritatea utilizatorilor, păstrând fiecare secțiune complet accesibilă prin `<details>` nativ.

Când se folosește

• pentru grupuri de întrebări frecvente sau secțiuni opționale, unde majoritatea utilizatorilor nu au nevoie de tot conținutul deodată.

Când nu se folosește

• pentru conținut pe care majoritatea utilizatorilor trebuie să-l citească — ascunderea lui implicită crește efortul, nu îl reduce.

Anatomie

Un `<div class="sd-accordion" data-sd-accordion="single">` care încadrează unul sau mai multe `<details>` native, fiecare cu `<summary>` (titlul secțiunii) și `<div class="sd-accordion__content">` (conținutul, vizibil doar când `[open]`).

Variante

• implicit — fiecare `<details>` se deschide/închide independent
• `data-sd-accordion="single"` — cu JavaScript, deschiderea unei secțiuni închide automat celelalte

Stări

• `[open]` pe fiecare `<details>`

Comportament

Fără JavaScript: fiecare `<details>` funcționează nativ, independent — orice combinație de secțiuni poate fi deschisă simultan. Cu JavaScript (`enhanceAccordions`): pe containerele marcate `data-sd-accordion="single"`, ascultă evenimentul `toggle` al fiecărui `<details>` și închide frații lui când unul se deschide, simulând un comportament de tip acordeon clasic peste elemente native.

Reguli de conținut

• titlul din `<summary>` descrie conținutul secțiunii suficient încât utilizatorul să decidă dacă o deschide, fără text generic de tipul „Detalii”.

Responsabilitățile implementatorului

• nu pune într-un accordion informații critice pentru finalizarea unei sarcini — utilizatorii care nu deschid o secțiune nu trebuie să piardă context esențial.

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 { enhanceAccordions } from '@sistem-digital/components';

<div class="sd-accordion" data-sd-accordion="single"><details open><summary>Cine poate depune cererea?</summary><div class="sd-accordion__content"><p>Persoana vizată sau reprezentantul legal.</p></div></details><details><summary>Cât durează?</summary><div class="sd-accordion__content"><p>Două zile lucrătoare.</p></div></details></div>

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