Numărător de caractere

Prezentare

Numără caracterele rămase într-un câmp cu limită, actualizat live, vizibil deopotrivă pentru utilizatori văzători și pentru cititoare de ecran.

Când se folosește

• pentru orice `textarea` sau `input` cu o limită reală de caractere impusă la trimitere.

Când nu se folosește

• ca decor pe un câmp fără limită reală — dacă nu există o validare reală de lungime, numărătoarea induce o constrângere falsă.

Anatomie

Un `<div data-sd-character-count="N">` care încadrează câmpul (`sd-character-count__field`, cu atributul `data-sd-character-count-field`) și un status text (`<p class="sd-character-count__status" data-sd-character-count-status aria-live="polite">`).

Variante

• implicit
• `sd-character-count--error` — aplicată automat de JavaScript când limita e depășită

Stări

• implicit (sub limită)
• peste limită — text de status îngroșat, culoare de eroare

Comportament

Fără JavaScript: câmpul rămâne complet funcțional, iar limita e comunicată doar static, prin textul scris în `hint`/status inițial din markup. Cu JavaScript (`enhanceCharacterCount`): la fiecare eveniment `input`, textul din regiunea `aria-live="polite"` se actualizează cu numărul de caractere rămase (sau depășirea, ca număr pozitiv de caractere „peste limita permisă”), iar clasa `--error` se comută în timp real.

Reguli de conținut

• textul de status e mereu în cuvinte complete („Mai aveți 200 caractere”), nu doar o cifră izolată, pentru claritate la citire audio.

Responsabilitățile implementatorului

• inițializează `data-sd-character-count` cu limita reală, identică celei aplicate la validarea server-side — o neconcordanță ar induce persoana în eroare.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/89 (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 { enhanceCharacterCount } from '@sistem-digital/components';

<div class="sd-form-group" data-sd-character-count="200"><label class="sd-label" for="catalog-comment">Motivul cererii</label><textarea class="sd-textarea sd-character-count__field" id="catalog-comment" data-sd-character-count-field rows="4"></textarea><p class="sd-character-count__status" data-sd-character-count-status aria-live="polite">Mai aveți 200 caractere</p></div>

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