Regione Toscana Design System

Widget: Atto 

<div class="rtds-widget">
    <div class="rtds-container 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">Decisione n.1 del 10-02-2003</h1>
        </div>

        <section>
            <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
                <h2 class="rtds-sr-only">Dati atto</h2>

                <dl class="rtds-grid rtds-gap-2 lg:rtds-gap-3 xl:rtds-gap-4">
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Oggetto:</dt>
                        <dd class="">Agenda normativa per l'anno 2003.</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Tipo pubblicazione:</dt>
                        <dd class="">Atto soggetto a pubblicazione integrale.</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Ufficio:</dt>
                        <dd class="">DIPARTIMENTO PRESIDENZA AFFARI LEGISLATIVI E GIURIDICI</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Tipo pubblicazione:</dt>
                        <dd class="">Atto soggetto a pubblicazione integrale</dd>
                    </div>
                </dl>

            </div>
        </section>

        <section class="xl:rtds-max-w-1/2 rtds-space-y-5">
            <div class="rtds-flex rtds-items-center rtds-gap-4">
                <div class="rtds-vertical-divider rtds-w-9">
                    <img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
                </div>

                <h2 class="rtds-heading-3">Documenti</h2>
            </div>

            <ul class="rtds-grid">
                <li class=" rtds-border-b rtds-border-gray-02">
                    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
                        <span class="rtds-flex rtds-gap-2 rtds-items-center">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--arrow-down-tray" />
                            </svg>

                            Allegato 1 (PDF - 40Kb)
                        </span>

                        <span class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">

                            Scarica

                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-right" />
                            </svg>

                        </span>

                    </a>
                </li>
                <li class=" rtds-border-b rtds-border-gray-02">
                    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
                        <span class="rtds-flex rtds-gap-2 rtds-items-center">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--arrow-down-tray" />
                            </svg>

                            Allegato a - Tabella proposte di legge (PDF - 40Kb)
                        </span>

                        <span class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">

                            Scarica

                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-right" />
                            </svg>

                        </span>

                    </a>
                </li>
                <li class=" rtds-border-b rtds-border-gray-02">
                    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
                        <span class="rtds-flex rtds-gap-2 rtds-items-center">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--arrow-down-tray" />
                            </svg>

                            Allegato B - Tabella proposte di legge consectetur adipiscing elit Duis posuere elit eu blandit fringilla (PDF - 40Kb)
                        </span>

                        <span class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">

                            Scarica

                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-right" />
                            </svg>

                        </span>

                    </a>
                </li>
            </ul>
        </section>

    </div>
</div>
 
<div class="rtds-widget">
    <div class="rtds-container 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">Decisione n.1 del 10-02-2003</h1>
        </div>

        <section>
            <div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
                <h2 class="rtds-sr-only">Dati atto</h2>

                <dl class="rtds-grid rtds-gap-2 lg:rtds-gap-3 xl:rtds-gap-4">
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Oggetto:</dt>
                        <dd class="">Agenda normativa per l'anno 2003.</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Tipo pubblicazione:</dt>
                        <dd class="">Atto soggetto a pubblicazione integrale.</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Ufficio:</dt>
                        <dd class="">DIPARTIMENTO PRESIDENZA AFFARI LEGISLATIVI E GIURIDICI</dd>
                    </div>
                    <div class="rtds-flex rtds-gap-[0.5ch]">
                        <dt class="rtds-font-bold">Tipo pubblicazione:</dt>
                        <dd class="">Atto soggetto a pubblicazione integrale</dd>
                    </div>
                </dl>

            </div>
        </section>

        <section class="xl:rtds-max-w-1/2 rtds-space-y-5">
            <div class="rtds-flex rtds-items-center rtds-gap-4">
                {% render '@vertical-divider',{width: 'rtds-w-9'} %}
                <h2 class="rtds-heading-3">Documenti</h2>
            </div>

            <ul class="rtds-grid">
                <li class=" rtds-border-b rtds-border-gray-02">
                    {% render '@text-link--has-cta',{label: 'Allegato 1 (PDF - 40Kb)', href: '#', hasIcon: true, icon: 'mini--arrow-down-tray', hasCta: true}, true %}
                </li>
                <li class=" rtds-border-b rtds-border-gray-02">
                    {% render '@text-link--has-cta',{label: 'Allegato a - Tabella proposte di legge (PDF - 40Kb)', href: '#', hasIcon: true, icon: 'mini--arrow-down-tray', hasCta: true}, true %}
                </li>
                <li class=" rtds-border-b rtds-border-gray-02">
                    {% render '@text-link--has-cta',{label: 'Allegato B - Tabella proposte di legge consectetur adipiscing elit Duis posuere elit eu blandit fringilla (PDF - 40Kb)', href: '#', hasIcon: true, icon: 'mini--arrow-down-tray', hasCta: true}, true %}
                </li>
            </ul>
        </section>

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