Regione Toscana Design System — Servizi Design System Core

Back Link: Piu Aggiornamenti 

<div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-1 md:rtds-gap-2">
    <p class="rtds-text-xs md:rtds-body-sm rtds-content-03 rtds-m-0">
        Aggiornamento presente in:
    </p>
    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

        Formazione

    </a>

    <span class="rtds-border-gray-02">|</span>

    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

        Giovani

    </a>

    <span class="rtds-border-gray-02">|</span>

    <a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--s">

        Nome Tema

    </a>
</div>
 
<div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-1 md:rtds-gap-2">
    <p class="rtds-text-xs md:rtds-body-sm rtds-content-03 rtds-m-0">
        Aggiornamento presente in:
    </p>
    {% render '@text-link--aggiornamenti', {
        label: "Formazione",
        hasIcon: false
    }, true %}
    
    <span class="rtds-border-gray-02">|</span>
    
    {% render '@text-link--aggiornamenti', {
        label: "Giovani",
        hasIcon: false
    }, true %}
    
    <span class="rtds-border-gray-02">|</span>
    
    {% render '@text-link--aggiornamenti', {
        label: "Nome Tema",
        hasIcon: false
    }, true %}
</div>
 
{
  "backLink": {
    "label": "Torna a: Nome Tema",
    "icon": "solid--arrow-left",
    "classes": "rtds-content-03"
  },
  "variants": [
    {
      "name": "default"
    },
    {
      "name": "piu-aggiornamenti",
      "context": {
        "backLink": {
          "label": "Nome Tema",
          "classes": "rtds-content-03"
        }
      }
    }
  ]
}

Back Link

Componente di navigazione a ritroso verso la pagina o il tema di provenienza. Composto da un @text-link--s con icona freccia sinistra. Include una variante per indicare la presenza di aggiornamenti su più temi correlati.

Comportamento

Il componente viene renderizzato come un wrapper <div class="rtds-flex"> che include un @text-link--s, il quale produce un <a> con icona e label.

Nella variante piu-aggiornamenti il wrapper aggiunge l’indicazione “Aggiornamento presente in:” seguita da una lista di link a temi correlati separati da divisori visivi.

Varianti

Varianti di Stile

  • default: link singolo “Torna a: Nome Tema” con icona freccia sinistra
  • piu-aggiornamenti: intestazione testuale + lista di link a più temi correlati

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

  • backLink (oggetto, obbligatorio): configurazione passata a @text-link--s
    • label (stringa, obbligatorio): testo del link (es. "Torna a: Nome Tema")
    • icon (stringa, opzionale): ID icona SVG (default "solid--arrow-left")
    • classes (stringa, opzionale): classi CSS aggiuntive (es. "rtds-content-03")
    • href (stringa, opzionale): URL di destinazione

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 2.4.4 Scopo del collegamento (nel contesto) — il testo del link deve essere descrittivo della destinazione (es. “Torna a: Nome Tema” anziché “Indietro”)
  • 1.4.3 Contrasto minimo — colore rtds-content-03 deve rispettare il rapporto di contrasto 4.5:1

Struttura e semantica

  • <a> — ruolo implicito link; attivabile con Enter; usare per navigare alla pagina o sezione di provenienza
  • <span> (separatori | nella variante piu-aggiornamenti) — puramente decorativo; non ha semantica né interattività; deve avere aria-hidden="true" per essere ignorato dagli screen reader

Attributi ARIA

Nessun attributo ARIA aggiuntivo rispetto a quelli ereditati dal componente @text-link. L’icona SVG interna è nascosta agli screen reader (aria-hidden="true").

Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal componente
Enter Attiva il link

Screen reader

  • Il testo del link è letto direttamente; includere sempre un label descrittivo della destinazione
  • Nella variante piu-aggiornamenti, il testo “Aggiornamento presente in:” è un <p> leggibile prima dei link
  • I separatori | sono letti come testo: valutare se avvolgerli in <span aria-hidden="true"> nell’implementazione

Esempi di utilizzo

<!-- Variante default -->
<div class="rtds-flex">
  <a href="/tema-nome" class="rtds-text-link rtds-text-link--s rtds-content-03">
    <svg class="rtds-icon" aria-hidden="true" focusable="false">
      <use href="#solid--arrow-left"></use>
    </svg>
    Torna a: Nome Tema
  </a>
</div>

<!-- Variante piu-aggiornamenti -->
<div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-1 md:rtds-gap-2">
  <p class="rtds-text-xs md:rtds-body-sm rtds-content-03 rtds-m-0">Aggiornamento presente in:</p>
  <a href="/formazione" class="rtds-text-link rtds-text-link--aggiornamenti">Formazione</a>
  <span aria-hidden="true" class="rtds-border-gray-02">|</span>
  <a href="/giovani" class="rtds-text-link rtds-text-link--aggiornamenti">Giovani</a>
</div>

Note

  • Dipende da @text-link--s e @text-link--aggiornamenti
  • Il separatore | nella variante piu-aggiornamenti è visivo: aggiungi aria-hidden="true" nello span nell’implementazione finale