Tabs

Prezentare

Comută între perspective paralele ale aceluiași obiect, cu navigare completă din tastatură prin săgeți, conform pattern-ului ARIA tablist.

Când se folosește

• pentru două sau mai multe seturi de conținut care descriu aceeași temă din unghiuri diferite și pe care utilizatorul le poate compara.

Când nu se folosește

• pentru un flux secvențial de pași — un `step-indicator` combinat cu pagini separate exprimă corect progresul, spre deosebire de tabs, care nu implică ordine.

Anatomie

Un `<div class="sd-tabs" data-sd-tabs>` cu `[data-sd-tab-list]` (containerul butoanelor, `hidden` până la enhancement), butoane `[data-sd-tab]` cu `aria-controls` către id-ul panoului, și secțiuni `[data-sd-tab-panel]`.

Variante

• implicit — o singură variantă

Stări

• `aria-selected="true|false"` pe fiecare tab
• `[hidden]` pe panoul inactiv

Comportament

Fără JavaScript: `[data-sd-tab-list]` rămâne `hidden`, iar toate panourile `[data-sd-tab-panel]` sunt vizibile secvențial — degradarea e la conținut simplu, citit în ordine, nu la un control mort. Cu JavaScript (`enhanceTabs`): dezvăluie lista de taburi, îi atribuie `role="tablist"`, activează tab-ul marcat inițial `aria-selected="true"` (sau primul) și ascunde restul panourilor; suportă navigare cu săgețile Stânga/Dreapta (circulară) și Home/End, mutând atât selecția cât și focusul.

Reguli de conținut

• eticheta fiecărui tab e scurtă și descrie conținutul panoului, nu o acțiune ("Digital", nu "Vezi varianta digitală").

Responsabilitățile implementatorului

• fiecare buton de tab trebuie să aibă `aria-controls` către un panou existent — fără el, enhancement-ul nu poate lega selecția de vizibilitatea panoului corect.

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

<div class="sd-tabs" data-sd-tabs><div data-sd-tab-list hidden aria-label="Modalități"><button id="catalog-tab-a" data-sd-tab aria-controls="catalog-panel-a" aria-selected="true">Digital</button><button id="catalog-tab-b" data-sd-tab aria-controls="catalog-panel-b">La ghișeu</button></div><section id="catalog-panel-a" data-sd-tab-panel><p>Primești documentul în inbox.</p></section><section id="catalog-panel-b" data-sd-tab-panel><p>Ridici documentul de la sediu.</p></section></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).