Widget Search

Ready

HTML
View
Context
Assets
Info
Notes


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


        <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' | path }}#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">
                            {% render '@input-field',{inputId: 'attoStart',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'date',label: 'Data inizio atto',inputDescription:'Anno inizio ricerca - formato gg/mm/aaaa', inputAriaDescribedBy:'inputDataInizioAtto'} ,true %}
                            {% render '@input-field',{inputId: 'attoEnd',classes: 'sm:rtds-flex-1',hiddenLabel: true, inputType: 'date',label: 'Data fine atto',inputDescription:'Anno fine ricerca - formato gg/mm/aaaa', inputAriaDescribedBy:'inputDataFineAtto'} ,true %}
                        </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">
                            {% render '@input-field',{inputId: 'attoNumberStart',classes: 'sm:rtds-flex-1',hiddenLabel: true, label: 'Numero atto - inizio',inputDescription:'Da numero', inputAriaDescribedBy:'inputNumeroAttoInizio'} ,true %}
                            {% render '@input-field',{inputId: 'attoNumberEnd',classes: 'sm:rtds-flex-1',hiddenLabel: true, label: 'Numero atto - fine',inputDescription:'A numero', inputAriaDescribedBy:'inputNumeroAttoFine'} ,true %}
                        </div>
                    </fieldset>
                </div>

                <!-- ROW 2 -->
                <div class="rtds-field-row">
                    {% render '@input-field',{inputId: 'oggetto',label: 'Oggetto',inputDescription:'Ricerca esatta del testo inserito', inputAriaDescribedBy:'inputOggetto'} ,true %}
                    {% render '@select-field',{inputId: 'assessore',label: 'Assessore',selectDescription:'Seleziona nome dell\'assessore', selectAriaDescribedBy:'selectAssessore'} ,true %}
                    {% render '@select-field',{inputId: 'atto',label: 'Tipologia Atto',selectDescription:'Ricerca tipologia atto', selectAriaDescribedBy:'selectAtto'} ,true %}
                </div>

                <!-- ROW 3 -->
                <div class="rtds-field-row">
                   {% render '@select-field',{inputId: 'strutturaVertice',label: 'Struttura di vertice',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectStrutturaVertice'} ,true %}
                   {% render '@input-field',{inputId: 'procedimento',label: 'Procedimento',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputProcedimento'} ,true %}
                </div>

                <!-- ROW 4 - DEM0 -->
                <div class="rtds-field-row">
                   {% render '@select-field',{inputId: 'demo1',label: 'Field demo 1',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectDemo1'} ,true %}
                   {% render '@input-field',{inputId: 'demo2',label: 'Field demo 2',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputDemo2'} ,true %}
                   {% render '@select-field',{inputId: 'demo3',label: 'Field demo 3',selectDescription:'Ricerca struttura di riferimento', selectAriaDescribedBy:'selectDemo3'} ,true %}
                   {% render '@input-field',{inputId: 'demo4',label: 'Field demo 4',inputDescription:'Ricerca tipologia procedimento', inputAriaDescribedBy:'inputDemo4'} ,true %}
                </div>

                <!-- ROW ACTIONS -->
                <div class="rtds-form-actions rtds-flex rtds-justify-start">
                    {% render '@button--icon-right',{buttonType: 'submit',label: 'Cerca', icon: 'mini--chevron-right', classes: 'rtds-btn--secondary', iconSize: 'rtds-w-5 rtds-h-5'} ,true %}
                </div>
            
            </div>

        </form>
    </div>

</div>


        
            
            /* No context defined. */

File:

Content:


                                /* WIDGET SEARCH */
.rtds-field-row {
    display: grid;
}
@media (min-width: 1024px) {
    .rtds-field-row {
        display: flex;
        gap: var(--spacing-4);
    }
}
@media (min-width: 1280px) {
    .rtds-field-row {
        gap: var(--spacing-6);
    }
}
@media (min-width: 1024px) {
    :where(.rtds-field-row > *) {
        max-width: 50%;
        flex: 1 1 0%;
    }
}

URL: /components/raw/widget-search/widget-search.built.css
Filesystem Path: components/07-widgets/widget-components/widget-search/widget-search.built.css
Size: 379 Bytes

Content:


                                /* WIDGET SEARCH */
@layer components {
    .rtds-field-row {
        @apply rtds-grid lg:rtds-flex lg:rtds-gap-4 xl:rtds-gap-6;
    }

    :where(.rtds-field-row > *) {
        @apply lg:rtds-flex-1 lg:rtds-max-w-1/2;
    }
}

URL: /components/raw/widget-search/widget-search.css
Filesystem Path: components/07-widgets/widget-components/widget-search/widget-search.css
Size: 226 Bytes

Handle: @widget-search
Preview:
- With layout
- Component only
Filesystem Path: components/07-widgets/widget-components/widget-search/widget-search.njk
References (3): @input-field, @select-field, @button--icon-right
Referenced by (5): @test-bundle, @widget, @widget--empty-state, @widget--loading-results, @widget--risultati-procedimenti

Componente di ricerca avanzata per il widget. Implementato come accordion (rtds-accordion--widget) contenente un <form> con righe di campi di ricerca (rtds-field-row) e un pulsante di invio. L’accordion permette di mostrare o nascondere l’area di ricerca avanzata.

Comportamento

<div class="rtds-accordion rtds-p-0 rtds-accordion--widget"> — accordion con header contenente il pulsante di espansione “Ricerca avanzata” e pannello contenente il form di ricerca.

Il form contiene:

Fieldset per data atto (data inizio/fine)
Fieldset per numero atto (numero inizio/fine)
Campi input (oggetto, procedimento)
Campi select (assessore, tipologia atto, struttura di vertice)
Pulsante “Cerca” (type="submit")

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

4.1.2 Nome, ruolo, valore — il pulsante accordion espone aria-expanded e aria-controls; il pannello ha role="region" e aria-labelledby
1.3.1 Informazioni e correlazioni — i <fieldset> con <legend> raggruppano semanticamente i campi correlati
2.1.1 Tastiera — tutti i controlli sono raggiungibili e azionabili da tastiera
2.4.6 Intestazioni ed etichette — ogni campo ha etichetta individuale; i fieldset hanno legend descrittive

Struttura e semantica

L’accordion è renderizzato come <div class="rtds-accordion rtds-accordion--widget">
Il trigger è un <button type="button"> dentro un <h2> — garantisce la corretta gerarchia heading nella pagina
Il pannello del form è un <div role="region" aria-labelledby="..."> — identifica l’area come regione significativa
Il form è un <form name="search-form"> — elemento semantico nativo
I campi multi-valore sono avvolti in <fieldset> con <legend>

Attributi ARIA

Attributo	Valori	Condizione
`aria-expanded`	`true` / `false`	Sul `<button>` del trigger accordion — indica lo stato di espansione
`aria-controls`	`accordionSearch-1`	Sul `<button>` — collega il trigger al pannello controllato
`id`	`accordionSearch1id`	Sul `<button>` — referenziato da `aria-labelledby` del pannello
`role="region"`	`region`	Sul pannello — identifica l’area come regione significativa
`aria-labelledby`	`accordionSearch1id`	Sul pannello — collega la regione al suo titolo
`aria-describedby`	ID descrizione campo	Su ogni `<input>` — collega la descrizione aggiuntiva
`aria-hidden="true"`	`true`	Sull’SVG decorativo dell’icona chevron

Navigazione da tastiera

Tasto	Azione
`Tab` / `Shift+Tab`	Sposta il focus tra i controlli: trigger accordion, poi campi form in ordine
`Enter` / `Space`	Espande/contrae l’accordion quando il focus è sul trigger
`Enter`	Invia il form quando il focus è sul pulsante “Cerca”

Gestione del focus

Focus iniziale: Nessuna gestione specifica; l’accordion è aperto di default (aria-expanded="true")
Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Lo screen reader annuncia il pulsante come “Ricerca avanzata, pulsante comprimibile/espandibile”
Il pannello è una region nominata “Ricerca avanzata” — i landmark sono navigabili direttamente
Nei fieldset, lo screen reader legge la <legend> prima di ogni label individuale (es. “Data atto — Data inizio atto”)
I campi con hiddenLabel: true hanno label presenti nel DOM ma nascoste visivamente: sono sempre letti dagli screen reader
I campi type="date" usano il widget nativo del browser per massima compatibilità con tecnologie assistive

Widget Search

Widget Search

Comportamento

Accessibilità

WCAG 2.1

Struttura e semantica

Attributi ARIA

Navigazione da tastiera

Gestione del focus

Screen reader