Regione Toscana Design System Design System Servizi

Widget: Procedimento 

<div class="rtds-widget">
    <div class="rtds-container lg:rtds-gap-4 rtds-py-8 lg:rtds-px-12 xl:rtds-px-16 rtds-space-y-8 lg:rtds-space-y-12 xl:rtds-space-y-16">

        <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
            <a href="" class="rtds-link-back rtds-content-03 hover:rtds-underline rtds-inline-flex rtds-items-center rtds-text-sm">
                <svg class="rtds-icon rtds-stroke-current rtds-w-4 rtds-h-4 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#mini--arrow-left" />
                </svg>

                Torna ai risultati della ricerca
            </a>
            <h1 class="rtds-heading-2">Procedimenti</h1>
        </div>

        <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
            <section class="rtds-widget-box">
                <div class="rtds-widget-box__header">
                    <h2 class="rtds-widget-box__title">Dato semplice</h2>
                </div>
                <div class="rtds-widget-box__content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
                        quos.
                    </p>
                    <p>
                        Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
                        quos.
                    </p>
                    <p>
                        Email: <a href="mailto:info@example.com">info@example.com</a>
                    </p>

                    <p>
                        Telefono: <a href="tel:0123456789">0123456789</a>
                    </p>

                </div>

                <div class="rtds-widget-box__header">
                    <h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
                </div>

                <div class="rtds-widget-box__content">
                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                    </ul>
                </div>
            </section>

            <section class="rtds-widget-box">
                <div class="rtds-widget-box__header">
                    <h2 class="rtds-widget-box__title">Dato semplice</h2>
                </div>
                <div class="rtds-widget-box__content">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
                        quos.
                    </p>
                    <p>
                        Ufficio: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
                        quos.
                    </p>
                    <p>
                        Email: <a href="mailto:info@example.com">info@example.com</a>
                    </p>

                    <p>
                        Telefono: <a href="tel:0123456789">0123456789</a>
                    </p>

                </div>

                <div class="rtds-widget-box__header">
                    <h2 class="rtds-widget-box__title">Dato semplice con lista</h2>
                </div>

                <div class="rtds-widget-box__content">
                    <ul>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</li>
                    </ul>
                </div>
            </section>

        </div>
    </div>
</div>
 
<div class="rtds-widget">
    <div class="rtds-container lg:rtds-gap-4 rtds-py-8 lg:rtds-px-12 xl:rtds-px-16 rtds-space-y-8 lg:rtds-space-y-12 xl:rtds-space-y-16">

        <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
            <a href="" class="rtds-link-back rtds-content-03 hover:rtds-underline rtds-inline-flex rtds-items-center rtds-text-sm">
                {% render '@icon',{id: 'mini--arrow-left', classes: 'rtds-mr-2', size:'rtds-w-4 rtds-h-4' } %}
                Torna ai risultati della ricerca
            </a>
            <h1 class="rtds-heading-2">Procedimenti</h1>
        </div>

        <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
            {% render '@widget-box' %}
            {% render '@widget-box' %}
        </div>
    </div>
</div>
 
/* No context defined. */

Widget

Componente principale del widget di ricerca. Aggrega navigazione, ricerca avanzata, filtri chip, risultati e paginazione in un’unica interfaccia.

Comportamento

<div class="rtds-widget"> — contenitore principale che compone i seguenti sotto-componenti:

  • @widget-nav — navigazione sezioni
  • @widget-search — ricerca avanzata (accordion)
  • @widget-chip-filters — filtri attivi
  • @card--widget — risultati (lista di card)
  • @pagination — paginazione

Struttura e stati del widget di ricerca

Stati del Widget

1. Stato di caricamento (Loading)

Durante il caricamento dei risultati:

  • Il div rtds-loading-status ha aria-busy="true" — indica che un’operazione è in corso
  • Mostra un loader animato con il messaggio “Caricamento risultati…”
  • L’empty state è presente nel DOM ma vuoto

2. Stato con risultati

Quando i risultati sono caricati:

  • Il div rtds-loading-status ha aria-busy="false"
  • Contiene il numero totale di risultati; il testo “Risultati: “ è nascosto visivamente con rtds-sr-only
  • L’empty state ha la classe rtds-sr-only (presente ma nascosto)
  • JavaScript sposta il focus sul primo risultato

3. Stato senza risultati (Empty state)

Quando non ci sono risultati:

  • Il div rtds-loading-status mantiene aria-busy="false"
  • Il div rtds-empty-state non ha la classe rtds-sr-only ed è visibile con il messaggio appropriato

Best practices per l’implementazione

  1. Mantenere sempre la struttura HTML completa, modificando solo classi e attributi ARIA
  2. Gestire correttamente il focus da JS quando i risultati vengono caricati
  3. Mantenere l’empty state sempre presente nel DOM, gestendone la visibilità tramite classi
  4. Usare aria-live appropriatamente:
    • polite per aggiornamenti non critici (caricamento e risultati)
    • assertive per l’empty state

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 4.1.2 Nome, ruolo, valore — i live region comunicano i cambiamenti di stato ai dispositivi assistivi
  • 1.3.1 Informazioni e correlazioni — il testo “Risultati:” nascosto visivamente fornisce contesto agli screen reader
  • 2.4.3 Ordine del focus — JavaScript gestisce il focus sul primo risultato dopo il caricamento

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-widget"> — contenitore non semantico; la struttura interna usa <h1> per il titolo principale, <h2> per il contatore risultati, e <section> per le aree di ricerca e risultati
  • Il contatore risultati è dentro un <h2> all’interno della live region

Attributi ARIA

Attributo Valori Condizione
aria-live="polite" polite Sul div rtds-loading-status — annuncia risultati e cambiamenti non urgenti
aria-busy true / false Sul div rtds-loading-status — true durante il caricamento, false a operazione conclusa
role="status" status Sul div rtds-loading-status — definisce il ruolo di live region
aria-live="assertive" assertive Sul div rtds-empty-state — annuncia immediatamente l’assenza di risultati
aria-atomic="true" true Sul div rtds-empty-state — l’intero contenuto viene riletto quando cambia
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i controlli interattivi (ricerca, filtri, card, paginazione)
Enter / Space Attiva il controllo focalizzato

Gestione del focus

  • Focus iniziale: Nessuna gestione specifica al caricamento della pagina
  • Focus dopo ricerca: JavaScript sposta il focus sul primo risultato dopo il caricamento dei risultati
  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Il testo “Risultati: “ è nascosto visivamente tramite rtds-sr-only ma letto dagli screen reader per fornire contesto al numero di risultati
  • La live region role="status" aria-live="polite" annuncia il numero di risultati trovati al termine del caricamento
  • La live region aria-live="assertive" aria-atomic="true" dell’empty state annuncia immediatamente quando non ci sono risultati
  • L’empty state è sempre presente nel DOM — quando non ci sono risultati è visibile, quando ci sono risultati viene nascosto con rtds-sr-only (non rimosso dal DOM)