Search Results Header

Intestazione della pagina di risultati di ricerca. Compone un titolo <h1> e il componente @search-bar in un’area a larghezza piena con padding responsive.

Comportamento

Il componente è renderizzato come <div class="rtds-search-results-header">, con all’interno un rtds-container che contiene:

1. Area contenuto (rtds-search-results-header__content) — titolo <h1> e descrizione opzionale
2. Area search bar (rtds-search-results-header__search) — componente @search-bar con autocomplete, label, submit e clear button

Varianti

• default: Sfondo rtds-background-01 (classes: "rtds-background-01")

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — parametri del context .config.yml. Non descrivono attributi HTML da usare nei CMS o ambienti di implementazione.

Parametri titolo e descrizione

• title (stringa, opzionale): Testo del titolo <h1>. Default: "Risultati di ricerca"
• description (stringa, opzionale): Testo descrittivo sotto il titolo; se presente viene renderizzato in <div class="rtds-search-results-header__description">
• classes (stringa, opzionale): Classi CSS aggiuntive sull’elemento radice (es. "rtds-background-01")
• contentClasses (stringa, opzionale): Classi CSS aggiuntive sul wrapper rtds-search-results-header__content

Parametri search bar

Tutti i parametri sono passati direttamente al componente @search-bar:

• searchId (stringa, opzionale): ID del campo di ricerca. Default: "searchResultsBar"
• label (stringa, opzionale): Label accessibile del campo. Default: "Cerca"
• submitLabel (stringa, opzionale): Testo del pulsante submit. Default: "Cerca"
• showClearButton (booleano, opzionale): Mostra il pulsante per cancellare il campo. Default: true
• placeholder (stringa, opzionale): Placeholder del campo di ricerca. Default: "Search"
• formAction (stringa, opzionale): Attributo action del form. Default: "/search"
• formMethod (stringa, opzionale): Attributo method del form. Default: "get"
• allResultsHref (stringa, opzionale): URL del link “Tutti i risultati” nell’autocomplete. Default: "/search?q="
• allResultsLabel (stringa, opzionale): Testo del link “Tutti i risultati”. Default: "Tutti i risultati"
• searchOptions (array, opzionale): Opzioni per l’autocomplete; struttura delegata a @search-bar
• variant (stringa, opzionale): Variante del componente @search-bar
• searchBarClasses (stringa, opzionale): Classi CSS aggiuntive per il wrapper della search bar e passate a @search-bar

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — <h1> come titolo principale della pagina; struttura heading rispettata
• 2.4.6 Intestazioni ed etichette — il titolo <h1> descrive lo scopo della pagina di risultati
• 3.3.2 Etichette o istruzioni — la search bar eredita la label accessibile dal parametro label, passato a @search-bar

Struttura e semantica

• <div class="rtds-search-results-header"> — wrapper presentazionale; non introduce landmark
• <h1> — titolo principale della pagina; deve comparire una sola volta per pagina; usare isContextBanner su @page-header-base se l’<h1> reale si trova altrove
• La search bar è delegata al componente @search-bar, che gestisce internamente label, submit, clear button e attributi ARIA dell’input

Attributi ARIA

La gestione degli attributi ARIA è interamente delegata al componente @search-bar incluso.

Screen reader

• <h1> è il primo heading della pagina di risultati — annunciato dagli screen reader come intestazione principale
• Il campo di ricerca è identificato dalla label passata a @search-bar; il pulsante clear ha testo accessibile gestito internamente

Stili CSS

Classi Base

• .rtds-search-results-header: Larghezza piena (rtds-w-full)

Classi Elementi (BEM)

• .rtds-search-results-header__content: Wrapper di titolo e descrizione
• .rtds-search-results-header__description: Wrapper del testo descrittivo opzionale
• .rtds-search-results-header__search: Wrapper del componente search bar; larghezza piena (rtds-w-full)

Esempi di utilizzo

<!-- Variante default con sfondo e descrizione -->
<div class="rtds-search-results-header rtds-background-01">
  <div class="rtds-container rtds-space-y-4 lg:rtds-space-y-6 rtds-py-10 lg:rtds-py-12 xl:rtds-py-16">
    <div class="rtds-search-results-header__content">
      <h1 class="rtds-heading-1">Risultati di ricerca</h1>
      <div class="rtds-search-results-header__description">
        Cerca nel sito per trovare informazioni e servizi
      </div>
    </div>
    <div class="rtds-search-results-header__search">
      <!-- @search-bar -->
    </div>
  </div>
</div>

<!-- Senza descrizione -->
<div class="rtds-search-results-header">
  <div class="rtds-container rtds-space-y-4 lg:rtds-space-y-6 rtds-py-10 lg:rtds-py-12 xl:rtds-py-16">
    <div class="rtds-search-results-header__content">
      <h1 class="rtds-heading-1">Servizi</h1>
    </div>
    <div class="rtds-search-results-header__search">
      <!-- @search-bar -->
    </div>
  </div>
</div>

Note

• Usato nella variante v2 del template @ricerca al posto di @page-header-base — centralizza il titolo e la barra di ricerca nell’header invece della sidebar
• I blocchi Nunjucks sovrascrivibili: {% block title %}, {% block description %}, {% block searchBar %}
• Il padding verticale responsive è definito nel template: rtds-py-10 (mobile), rtds-py-12 (lg), rtds-py-16 (xl)
• Dipende da: @search-bar