Regione Toscana Design System — Servizi Design System Core

Back button 

<a href="#sideNav" class="rtds-btn 
    rtds-btn--icon-right rtds-group/button rtds-btn--inverted rtds-btn-back-to-menu rtds-btn--s">

    Torna alle voci di esplorazione del bando

    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--arrow-up" />
    </svg>

</a>
 
{% render '@button--icon-right-s', buttonConfig, true %}
 
{
  "buttonConfig": {
    "classes": "rtds-btn--inverted rtds-btn-back-to-menu",
    "iconTransformType": "translate",
    "icon": "mini--arrow-up",
    "label": "Torna alle voci di esplorazione del bando",
    "href": "#sideNav",
    "iconSize": "rtds-w-4 rtds-h-4"
  }
}

Back to Menu Button

Pulsante di ritorno al menu di navigazione laterale, usato nelle pagine di dettaglio (es. bandi) per consentire all’utente di tornare rapidamente alla side navigation dopo aver scorso il contenuto. Visibile tipicamente su mobile/tablet.

Comportamento

Il componente è renderizzato come <a href="#sideNav"> (link-pulsante) verso un’ancora interna della pagina. L’icona freccia su indica visivamente la direzione di navigazione.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • buttonConfig (oggetto, obbligatorio): configurazione passata a @button--icon-right-s
    • label (stringa, obbligatorio): testo del pulsante (es. "Torna alle voci di esplorazione del bando")
    • href (stringa, obbligatorio): ancora di destinazione (es. "#sideNav")
    • icon (stringa, opzionale): ID icona SVG (default "mini--arrow-up")
    • iconSize (stringa, opzionale): classi CSS per la dimensione icona (es. "rtds-w-4 rtds-h-4")
    • classes (stringa, opzionale): classi CSS aggiuntive (es. "rtds-btn--inverted rtds-btn-back-to-menu")
    • iconTransformType (stringa, opzionale): tipo di trasformazione icona (es. "translate")

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 2.4.4 Scopo del collegamento (nel contesto) — il label deve descrivere chiaramente la destinazione
  • 2.4.1 Salto di blocchi — questo componente può fungere da meccanismo di skip link interno alla pagina
  • 2.1.1 Tastiera — il componente è un <a> nativo, attivabile con Enter

Struttura e semantica

  • Il componente è renderizzato come <a href="#sideNav"> — link ancora interno, nativo per la navigazione da tastiera
  • Usare <a> anziché <button> è corretto perché l’azione è una navigazione verso un’ancora, non un’azione JS

Attributi ARIA

Nessun attributo ARIA aggiuntivo: il testo del link è sufficiente come nome accessibile. L’icona SVG interna è nascosta agli screen reader (aria-hidden="true").

Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal componente
Enter Sposta il focus e lo scroll verso #sideNav

Screen reader

  • Il testo del link (“Torna alle voci di esplorazione del bando”) è letto direttamente come nome del link
  • L’icona è decorativa e non aggiunge informazioni per lo screen reader

Esempi di utilizzo

<!-- Esempio base -->
<a href="#sideNav" class="rtds-btn rtds-btn--s rtds-btn--inverted rtds-btn-back-to-menu">
  Torna alle voci di esplorazione del bando
  <svg class="rtds-icon rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false">
    <use href="#mini--arrow-up"></use>
  </svg>
</a>

Note

  • Dipende da @button--icon-right-s
  • Richiede che l’elemento con id="sideNav" esista in pagina
  • Tipicamente usato nelle pagine bando con @side-navigation