Regione Toscana Design System

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. */

Empty state

L’elemento deve essere sempre presente, anche quando non ci sono risultati. In caso di risultati, il div non ha contenuto e presenta la classe rtds-sr-only. In caso di assenza di risultati, il div ha contenuto e non presenta la classe rtds-sr-only.

Stati del Widget di Ricerca

Struttura Generale

Il widget di ricerca è composto da diverse sezioni:

  • Navigazione sezioni
  • Testata con titolo
  • Sezione di ricerca con campo di input e filtri
  • Sezione risultati con stati diversi
  • Paginazione

Stati del Widget

1. Stato di Caricamento (Loading)

Durante il caricamento dei risultati:

  • Il div rtds-loading-status deve avere:
    • aria-live="polite" per annunciare i cambiamenti
    • aria-busy="true" per indicare che è in corso un’operazione
    • role="status" per definire il ruolo
  • Mostra un loader animato con il messaggio “Caricamento risultati…”
  • L’empty state deve essere presente ma vuoto

2. Stato con Risultati

Quando i risultati sono caricati:

  • Il div rtds-loading-status deve avere:
    • aria-busy="false"
    • Contiene il numero totale di risultati trovati
    • Il testo “Risultati: “ è nascosto visivamente ma disponibile per screen reader (rtds-sr-only)
  • L’empty state deve avere la classe rtds-sr-only
  • Il focus deve essere spostato sul primo risultato, da js
  • I risultati sono mostrati in una griglia con card

3. Stato senza Risultati (Empty State)

Quando non ci sono risultati:

  • Il div rtds-loading-status mantiene aria-busy="false"
  • L’empty state:
    • Non deve avere la classe rtds-sr-only
    • Deve contenere il messaggio appropriato
    • Ha aria-live="assertive" e aria-atomic="true" per annunciare immediatamente l’assenza di risultati

Best Practices per l’Implementazione

  1. Mantenere sempre la struttura HTML completa, modificando solo le classi e gli attributi ARIA
  2. Gestire correttamente il focus da js quando i risultati vengono caricati
  3. Assicurarsi che tutti i cambiamenti di stato siano annunciati correttamente agli screen reader
  4. Mantenere l’empty state sempre presente nel DOM, gestendo la sua visibilità tramite classi
  5. Utilizzare aria-live appropriatamente:
    • polite per aggiornamenti non critici (caricamento e risultati)
    • assertive per l’empty state