Regione Toscana Design System — Servizi Design System Core

Widget Field Row 

<!-- FIELD ROW -->
<div class="rtds-field-row">
    <!-- INPUT - HAS MAX-WIDTH 50% -->
    <div class="rtds-input-field rtds-select-field">
        <label for="selectId" class="rtds-input-field__label">
            Struttura di vertice

        </label>

        <div class="rtds-select">

            <select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
                <option value="1">Text</option>
                <option value="2">Option 1</option>
                <option value="3">Option 2</option>
                <option value="4">Option 3</option>
                <option value="5">Option 4</option>
                <option value="6">Option 5</option>

            </select>
        </div>

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

            <span class="rtds-input-field__description" id="selectStrutturaVertice">
                Ricerca struttura di riferimento
            </span>

        </span>

    </div>
</div>
 
<!-- FIELD ROW -->
<div class="rtds-field-row">
    <!-- INPUT - HAS MAX-WIDTH 50% -->
    {% render '@select-field',{inputId: 'strutturaVertice',label: 'Struttura di vertice',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectStrutturaVertice'} ,true %}
</div>
 
/* No context defined. */

Widget Field Row

Wrapper per righe di campi form all’interno del widget di ricerca. Ogni riga è implementata con un div rtds-field-row che dispone orizzontalmente i campi. I campi multi-valore (data, numero atto) sono implementati come <fieldset> con label visivamente nascosti sugli input interni.

I campi type="date" utilizzano il funzionamento HTML nativo (senza datepicker custom), per garantire la massima compatibilità con le tecnologie assistive.

Comportamento

<div class="rtds-field-row"> — contenitore di layout per una riga di campi form. Può contenere:

  • Singoli campi @input-field o @select-field
  • Fieldset compositi (tramite @widget-composite-field) per gruppi di campi correlati

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — i <fieldset> con <legend> comunicano la relazione semantica tra campi correlati (es. “Data atto” raggruppa data inizio e data fine)
  • 2.4.6 Intestazioni ed etichette — ogni campo ha una propria etichetta individuale anche quando nascosta visivamente
  • 1.3.5 Identificazione dello scopo dell’input — i tipi di campo HTML nativi (type="date", type="text") comunicano lo scopo ai dispositivi assistivi

Struttura e semantica

  • Il componente è renderizzato come <div> — wrapper di layout privo di semantica propria; la semantica è affidata agli elementi interni
  • I campi multi-valore sono avvolti in <fieldset> con <legend> descrittiva: la legend funge da etichetta collettiva del gruppo
  • I singoli input nei fieldset hanno hiddenLabel: true: il <label> è presente nel DOM ma nascosto visivamente
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i campi della riga in ordine logico

Gestione del focus

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

Screen reader

  • Per i campi in fieldset, lo screen reader annuncia la <legend> del gruppo (es. “Data atto”) prima del <label> del singolo campo (es. “Data inizio atto”)
  • I campi type="date" usano l’input nativo del browser: il widget nativo è accessibile e supportato dai dispositivi assistivi, a differenza dei datepicker custom
  • Ogni campo ha un testo di descrizione associato tramite aria-describedby per fornire istruzioni aggiuntive (es. “formato gg/mm/aaaa”)