Regione Toscana Design System Design System Servizi

Widget Composite Field 

<!-- FIELDSET  -->
<fieldset class="rtds-input-field rtds-input-fieldset">
    <legend class="rtds-input-field__label">
        Legend fieldset
    </legend>
    <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
        <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
            <label for="idField1" class="rtds-input-field__label rtds-sr-only">
                Label campo 1

            </label>

            <div class="rtds-input">

                <input id="idField1" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDesc1">
            </div>

            <span class="rtds-input-field__hint">

                <span class="rtds-input-field__description" id="inputDesc1">
                    Descrizione campo 1
                </span>

            </span>

        </div>
        <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
            <label for="idField2" class="rtds-input-field__label rtds-sr-only">
                Label campo 2

            </label>

            <div class="rtds-input">

                <input id="idField2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDesc2">
            </div>

            <span class="rtds-input-field__hint">

                <span class="rtds-input-field__description" id="inputDesc2">
                    Descrizione campo 2
                </span>

            </span>

        </div>
    </div>
</fieldset>
 
<!-- FIELDSET  -->
<fieldset class="rtds-input-field rtds-input-fieldset">
    <legend class="rtds-input-field__label">
        Legend fieldset
    </legend>
    <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
        {% render '@input-field',{inputId: 'idField1',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'text',label: 'Label campo 1',inputDescription:'Descrizione campo 1', inputAriaDescribedBy:'inputDesc1'} ,true %}
        {% render '@input-field',{inputId: 'idField2',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'text',label: 'Label campo 2',inputDescription:'Descrizione campo 2', inputAriaDescribedBy:'inputDesc2'} ,true %}
    </div>
</fieldset>
 
/* No context defined. */

Widget Composite Field

Demo di un campo composito per il widget. Raggruppa più input correlati all’interno di un <fieldset> con una <legend> comune che funge da etichetta collettiva. I singoli input hanno label individuali nascoste visivamente.

Comportamento

<fieldset class="rtds-input-field rtds-input-fieldset"> — contenitore semantico per un gruppo di campi correlati. La <legend> fornisce il contesto del gruppo, mentre ogni campo interno (@input-field) ha un proprio label nascosto visivamente tramite il parametro hiddenLabel: true.

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — <fieldset> e <legend> comunicano la relazione semantica tra i campi del gruppo
  • 2.4.6 Intestazioni ed etichette — ogni campo ha una propria etichetta anche se nascosta visivamente; la <legend> fornisce il contesto del gruppo
  • 1.3.3 Caratteristiche sensoriali — le etichette dei singoli campi descrivono il contenuto richiesto in modo indipendente dal posizionamento

Struttura e semantica

  • Il componente è renderizzato come <fieldset> — elemento semantico che raggruppa controlli di form correlati
  • La <legend> funge da etichetta collettiva per il gruppo; gli screen reader la annunciano prima di ogni campo interno
  • Ogni @input-field interno ha hiddenLabel: true: il <label> è presente nel DOM ma nascosto visivamente, garantendo accessibilità senza impatto visuale

Attributi ARIA

Attributo Valori Condizione
aria-describedby ID del paragrafo di descrizione Su ogni <input> interno, per collegare la descrizione del campo
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i campi input del gruppo

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Quando il focus entra in un campo, lo screen reader legge: la <legend> del fieldset + il <label> del campo + la descrizione associata tramite aria-describedby
  • Le etichette dei singoli campi (label: 'Label campo 1') sono presenti nel DOM anche se nascoste visivamente, garantendo la corretta associazione programmatica