Regione Toscana Design System — Servizi Design System Core

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

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)