Dropdown

Prezentare

Ascunde acțiuni secundare într-un meniu declanșat de buton, cu închidere la clic în afara lui, la Escape sau la pierderea focusului din grup.

Când se folosește

• pentru un grup de acțiuni secundare, legate de un singur obiect (de exemplu, „Descarcă PDF” / „Trimite pe e-mail” pentru o cerere), care nu trebuie afișate permanent.

Când nu se folosește

• pentru una sau două acțiuni întotdeauna relevante — butoane vizibile direct sunt mai rapid de folosit decât un meniu care trebuie deschis mai întâi.

Anatomie

Un `<div class="sd-dropdown" data-sd-dropdown>` cu `<button class="sd-dropdown__trigger" aria-expanded="…" aria-controls="…" data-sd-dropdown-trigger>` și `<ul class="sd-dropdown__menu" data-sd-dropdown-menu>` cu `<li><a class="sd-dropdown__item">` pentru fiecare acțiune.

Variante

• implicit — o singură variantă

Stări

• `aria-expanded="true|false"` pe declanșator
• `[hidden]` pe meniu, când e închis

Comportament

Fără JavaScript: meniul rămâne vizibil permanent, ca listă simplă de linkuri — degradare la o listă statică funcțională, nu la acțiuni inaccesibile. Cu JavaScript (`enhanceDropdowns`): adaugă `aria-haspopup`, ascunde meniul implicit, comută vizibilitatea la clic pe declanșator, închide la clic oriunde în afara containerului, la Escape (cu focus readus pe declanșator) sau când focusul iese din grup (`focusout`).

Reguli de conținut

• fiecare element din meniu descrie o acțiune concretă printr-un verb ("Descarcă PDF"), nu o etichetă ambiguă.

Responsabilitățile implementatorului

• meniul trebuie să conțină doar linkuri sau butoane reale, funcționale independent de JavaScript — enhancement-ul controlează doar vizibilitatea, nu adaugă comportament acțiunilor din listă.

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

<div class="sd-dropdown" data-sd-dropdown><button type="button" class="sd-dropdown__trigger" aria-expanded="true" aria-controls="catalog-dropdown-menu" data-sd-dropdown-trigger>Acțiuni</button><ul class="sd-dropdown__menu" id="catalog-dropdown-menu" data-sd-dropdown-menu><li><a class="sd-dropdown__item" href="#">Descarcă PDF</a></li><li><a class="sd-dropdown__item" href="#">Trimite pe e-mail</a></li></ul></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).