Regione Toscana Design System Design System Servizi

Widget: Loading Results 

<div class="rtds-widget">
    <!-- navigazione sezioni WIDGET -->
    <nav class="rtds-widget-nav" aria-label="Sezioni atti">
        <ul class="rtds-widget-nav__list">
            <li>
                <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
 is-active" id="widget-nav-tab-1">

                    <span class="rtds-tab__label">Dalla giunta</span>

                </a>
            </li>
            <li>
                <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">

                    <span class="rtds-tab__label">Dal Presidente</span>

                </a>
            </li>
            <li>
                <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">

                    <span class="rtds-tab__label">dai Dirigenti</span>

                </a>
            </li>
            <li>
                <a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">

                    <span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>

                </a>
            </li>
        </ul>
    </nav>

    <div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">
        <div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
            <!-- testata WIDGET -->
            <div class="rtds-flex rtds-items-center rtds-justify-between">
                <h1 class="rtds-heading-2">Gli atti della Giunta</h1>
            </div>
            <!-- RICERCA -->
            <section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
                <!-- SEARCH -->
                <div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
                    <h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
                        <button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
                            <span class="rtds-accordion__trigger-label">
                                Ricerca avanzata
                            </span>

                            <span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
                                <svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--chevron-up" />
                                </svg>

                            </span>

                        </button>
                    </h2>
                    <div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">

                        <form name="search-form">

                            <div class="rtds-grid rtds-gap-6">

                                <!-- ROW 1 -->
                                <div class="rtds-field-row">

                                    <!-- FIELDSET DATA -->
                                    <fieldset class="rtds-input-field rtds-input-fieldset">
                                        <legend class="rtds-input-field__label">
                                            Data atto
                                        </legend>
                                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                                <label for="attoStart" class="rtds-input-field__label rtds-sr-only">
                                                    Data inizio atto

                                                </label>

                                                <div class="rtds-input">

                                                    <input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
                                                </div>

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

                                                    <span class="rtds-input-field__description" id="inputDataInizioAtto">
                                                        Anno inizio ricerca - formato gg/mm/aaaa
                                                    </span>

                                                </span>

                                            </div>
                                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                                <label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
                                                    Data fine atto

                                                </label>

                                                <div class="rtds-input">

                                                    <input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
                                                </div>

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

                                                    <span class="rtds-input-field__description" id="inputDataFineAtto">
                                                        Anno fine ricerca - formato gg/mm/aaaa
                                                    </span>

                                                </span>

                                            </div>
                                        </div>
                                    </fieldset>
                                    <!-- FIELDSET NUMERO ATTO -->
                                    <fieldset class="rtds-input-field rtds-input-fieldset">
                                        <legend class="rtds-input-field__label">
                                            Numero atto
                                        </legend>
                                        <div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
                                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                                <label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
                                                    Numero atto - inizio

                                                </label>

                                                <div class="rtds-input">

                                                    <input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
                                                </div>

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

                                                    <span class="rtds-input-field__description" id="inputNumeroAttoInizio">
                                                        Da numero
                                                    </span>

                                                </span>

                                            </div>
                                            <div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
                                                <label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
                                                    Numero atto - fine

                                                </label>

                                                <div class="rtds-input">

                                                    <input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
                                                </div>

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

                                                    <span class="rtds-input-field__description" id="inputNumeroAttoFine">
                                                        A numero
                                                    </span>

                                                </span>

                                            </div>
                                        </div>
                                    </fieldset>
                                </div>

                                <!-- ROW 2 -->
                                <div class="rtds-field-row">
                                    <div class="rtds-input-field rtds-gap-1 ">
                                        <label for="oggetto" class="rtds-input-field__label">
                                            Oggetto

                                        </label>

                                        <div class="rtds-input">

                                            <input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
                                        </div>

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

                                            <span class="rtds-input-field__description" id="inputOggetto">
                                                Ricerca esatta del testo inserito
                                            </span>

                                        </span>

                                    </div>
                                    <div class="rtds-input-field rtds-select-field">
                                        <label for="selectId" class="rtds-input-field__label">
                                            Assessore

                                        </label>

                                        <div class="rtds-select">

                                            <select id="selectId" class="" aria-describedBy="selectAssessore">
                                                <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="selectAssessore">
                                                Seleziona nome dell&#39;assessore
                                            </span>

                                        </span>

                                    </div>
                                    <div class="rtds-input-field rtds-select-field">
                                        <label for="selectId" class="rtds-input-field__label">
                                            Tipologia Atto

                                        </label>

                                        <div class="rtds-select">

                                            <select id="selectId" class="" aria-describedBy="selectAtto">
                                                <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="selectAtto">
                                                Ricerca tipologia atto
                                            </span>

                                        </span>

                                    </div>
                                </div>

                                <!-- ROW 3 -->
                                <div class="rtds-field-row">
                                    <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 class="rtds-input-field rtds-gap-1 ">
                                        <label for="procedimento" class="rtds-input-field__label">
                                            Procedimento

                                        </label>

                                        <div class="rtds-input">

                                            <input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
                                        </div>

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

                                            <span class="rtds-input-field__description" id="inputProcedimento">
                                                Ricerca tipologia procedimento
                                            </span>

                                        </span>

                                    </div>
                                </div>

                                <!-- ROW 4 - DEM0 -->
                                <div class="rtds-field-row">
                                    <div class="rtds-input-field rtds-select-field">
                                        <label for="selectId" class="rtds-input-field__label">
                                            Field demo 1

                                        </label>

                                        <div class="rtds-select">

                                            <select id="selectId" class="" aria-describedBy="selectDemo1">
                                                <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="selectDemo1">
                                                Ricerca struttura di riferimento
                                            </span>

                                        </span>

                                    </div>
                                    <div class="rtds-input-field rtds-gap-1 ">
                                        <label for="demo2" class="rtds-input-field__label">
                                            Field demo 2

                                        </label>

                                        <div class="rtds-input">

                                            <input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
                                        </div>

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

                                            <span class="rtds-input-field__description" id="inputDemo2">
                                                Ricerca tipologia procedimento
                                            </span>

                                        </span>

                                    </div>
                                    <div class="rtds-input-field rtds-select-field">
                                        <label for="selectId" class="rtds-input-field__label">
                                            Field demo 3

                                        </label>

                                        <div class="rtds-select">

                                            <select id="selectId" class="" aria-describedBy="selectDemo3">
                                                <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="selectDemo3">
                                                Ricerca struttura di riferimento
                                            </span>

                                        </span>

                                    </div>
                                    <div class="rtds-input-field rtds-gap-1 ">
                                        <label for="demo4" class="rtds-input-field__label">
                                            Field demo 4

                                        </label>

                                        <div class="rtds-input">

                                            <input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
                                        </div>

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

                                            <span class="rtds-input-field__description" id="inputDemo4">
                                                Ricerca tipologia procedimento
                                            </span>

                                        </span>

                                    </div>
                                </div>

                                <!-- ROW ACTIONS -->
                                <div class="rtds-form-actions rtds-flex rtds-justify-start">
                                    <button type="submit" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--secondary">

                                        Cerca

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

                                    </button>

                                </div>

                            </div>

                        </form>
                    </div>

                </div>
                <!-- FILTERS -->
                <ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
                    <li><span class="rtds-chip has-button-close rtds-chip--filter">
                            ALESSANDRA NARDINI
                            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--x-mark" />
                                </svg>

                                <span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
                            </button>
                        </span></li>
                    <li>
                        <span class="rtds-chip has-button-close rtds-chip--filter">
                            Data atto inizio: 23/05/2024
                            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--x-mark" />
                                </svg>

                                <span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
                            </button>
                        </span>
                    </li>
                    <li><span class="rtds-chip has-button-close rtds-chip--filter">
                            Oggetto: Atto
                            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--x-mark" />
                                </svg>

                                <span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
                            </button>
                        </span></li>
                    <li>
                        <span class="rtds-chip has-button-close rtds-chip--filter">
                            Tipologia atto: Lorem ipsum dolor sit
                            amet
                            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--x-mark" />
                                </svg>

                                <span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
                                    amet</span>
                            </button>
                        </span>
                    </li>
                    <li>
                        <span class="rtds-chip has-button-close rtds-chip--filter">
                            Numero atto - da numero: 12
                            <button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
                                <svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--x-mark" />
                                </svg>

                                <span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
                            </button>
                        </span>
                    </li>
                </ul>

            </section>
            <!-- CONTENUTO RICERCA -->
            <section class="rtds-grid rtds-gap-4">

                <!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
            IN FASE CARICAMENTO, aria-busy = true, 
            RISULTATI CARICATI, aria-busy = false, 
            NO RISULTATI, aria-busy = false  
            in questo caso il contenuto di rtds-loading-status è il loader...

            UNA VOLTA CARICATI I RISULTATI, IL FOCUS VA SUL PRIMO DEI RISULTATI TROVATI
          -->
                <div class="rtds-loading-status" aria-live="polite" aria-busy="true" role="status">
                    <!-- MESSAGGIO DI CARICAMENTO  -->
                    <div class="rtds-loading-results rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20">
                        <svg class="rtds-icon rtds-fill-current rtds-w-12 rtds-h-12 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#spinner" />
                        </svg>

                        <h2 class="rtds-heading-3">Caricamento risultati...</h2>
                    </div>
                    <!-- <h2 class="rtds-heading-3" aria-live="polite" role="region" aria-busy="false"><span class="rtds-sr-only">Risultati: </span>2632 <span class="rtds-font-normal">Atti</span></h2> -->
                </div>

                <!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
                <div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
                </div>

            </section>

            <!-- PAGINAZIONE -->
            <nav class="rtds-pagination rtds-flex-wrap rtds-justify-center" role="navigation" aria-label="Paginazione">
                <ul class="rtds-pagination__list rtds-justify-center">

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Prima pagina">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-double-left" />
                            </svg>

                        </a>
                    </li>
                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-left" />
                            </svg>

                        </a>
                    </li>

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
                    </li>

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text  rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="page">2</a>
                    </li>

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
                    </li>

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
                    </li>

                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-right" />
                            </svg>

                        </a>
                    </li>
                    <li>
                        <a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Ultima pagina">
                            <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#mini--chevron-double-right" />
                            </svg>

                        </a>
                    </li>

                </ul>

            </nav>

        </div>

    </div>

</div>
 
<div class="rtds-widget">
  <!-- navigazione sezioni WIDGET -->
  {% render '@widget-nav' %}

  <div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">  
      <div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
        <!-- testata WIDGET -->
        <div class="rtds-flex rtds-items-center rtds-justify-between">
          <h1 class="rtds-heading-2">Gli atti della Giunta</h1>
        </div>
        <!-- RICERCA -->
        <section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
          <!-- SEARCH -->
          {% render '@widget-search' %}
          <!-- FILTERS -->
          {% render '@widget-chip-filters' %}

        </section>
        <!-- CONTENUTO RICERCA -->
        <section class="rtds-grid rtds-gap-4">

          <!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
            IN FASE CARICAMENTO, aria-busy = true, 
            RISULTATI CARICATI, aria-busy = false, 
            NO RISULTATI, aria-busy = false  
            in questo caso il contenuto di rtds-loading-status è il loader...

            UNA VOLTA CARICATI I RISULTATI, IL FOCUS VA SUL PRIMO DEI RISULTATI TROVATI
          -->
          <div class="rtds-loading-status" aria-live="polite" aria-busy="true" role="status">
            <!-- MESSAGGIO DI CARICAMENTO  -->
            <div class="rtds-loading-results rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20" >
                {% render '@icon', { id: 'spinner', classes: 'rtds-animate-spin' }, true %}
                <h2 class="rtds-heading-3">Caricamento risultati...</h2>
              </div>
              <!-- <h2 class="rtds-heading-3" aria-live="polite" role="region" aria-busy="false"><span class="rtds-sr-only">Risultati: </span>2632 <span class="rtds-font-normal">Atti</span></h2> -->
            </div>

            <!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
            <div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
            </div>

        </section>

      <!-- PAGINAZIONE -->
      {% render '@pagination',{ centered: 'true' }, true %}
      </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)