Regione Toscana Design System Design System Servizi

Link component 

<a href="" class="rtds-link ">
    Link text

</a>
 
<a href=""{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="rtds-link{%- block classes %} {{ classes }}{%- endblock -%}">
    {%- block content -%}
        {% if iconOnly %}
            <span class="rtds-sr-only">{{ label }}</span>
        {% else %}
            {{ label }}
        {% endif %}
         {% if accessibleLabel %}<span class="rtds-sr-only">{{ accessibleLabel }}</span>{% endif %}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: iconSize, classes: 'rtds-ml-2' }, true %}
        {% endif %}
        {% if iconOnly %}
            {% render '@icon--medium', { id: icon, size: iconSize }, true %}
        {% endif %}
    {%- endblock -%}
</a>
 
{
  "label": "Link text",
  "icon": "mini--arrow-small-right",
  "iconSize": "rtds-w-5 rtds-h-5"
}
  • Content: 
    /* LINK */
.rtds-link {
    font-size: var(--fontsize-text-base);
        color: var(--color-link-primary);
    display: inline-flex;
    align-items: center;
}
.rtds-link:hover {
    text-decoration-line: underline;
        color: var(--color-link-primary-hover);
}
.rtds-link:focus {
    color: var(--color-primary-800);
}
@media (min-width: 768px) {
    .rtds-link {
        font-size: var(--fontsize-text-base);
    }
}
.rtds-link--sm {
    font-size: var(--fontsize-text-sm);
}
.rtds-link--lg {
    font-size: var(--fontsize-text-lg);
}
.rtds-link--underline {
    text-decoration-line: underline;
}
.rtds-link--secondary {
        color: var(--color-content-02);
    }
.rtds-link--secondary:hover {
        color: var(--color-content-02);
    }
  • URL: /components/raw/link/link.built.css
  • Filesystem Path: components/02-atoms/link/link.built.css
  • Size: 751 Bytes
  • Content: 
    /* LINK */
@layer components {
    .rtds-link {
        @apply rtds-inline-flex rtds-items-center rtds-link-primary hover:rtds-underline hover:rtds-link-primary-hover focus:rtds-text-primary-800 rtds-text-base md:rtds-text-base;
    }

    .rtds-link--sm {
        @apply rtds-text-sm;
    }

    .rtds-link--lg {
        @apply rtds-text-lg;
    }

    .rtds-link--underline {
        @apply rtds-underline;
    }

    .rtds-link--secondary {
        @apply rtds-content-02 hover:rtds-content-02;
    }
}
  • URL: /components/raw/link/link.css
  • Filesystem Path: components/02-atoms/link/link.css
  • Size: 505 Bytes

Link

Componente per link con supporto per diverse dimensioni e icone.

Comportamento

Il componente è sempre renderizzato come <a> — link di navigazione raggiungibile con Tab e attivabile con Enter. Supporta diverse dimensioni di testo e icone opzionali.

Varianti

Varianti di Dimensione

  • default: Dimensione standard
  • sm: Dimensione piccola
  • lg: Dimensione grande

Varianti di Stile

  • has-icon: Link con icona a destra
  • icon-only: Solo icona cliccabile

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

  • label (stringa, obbligatorio): Testo del link
  • href (stringa, obbligatorio): URL del link
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • allyHidden (booleano, opzionale): Nasconde il link agli screen reader

Parametri per Icone

  • icon (stringa, opzionale): ID dell’icona da utilizzare
  • iconSize (stringa, opzionale): Classi CSS per la dimensione dell’icona
  • hasIcon (booleano, opzionale): Abilita la visualizzazione dell’icona
  • iconOnly (booleano, opzionale): Mostra solo l’icona come link

Parametri di Accessibilità

  • accessibleLabel (stringa, opzionale): Etichetta aggiuntiva per screen reader

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.4.3 Contrasto minimo — testo link su sfondo
  • 2.1.1 Tastiera — il link <a> è raggiungibile e attivabile da tastiera
  • 2.4.4 Scopo del collegamento (nel contesto) — il testo visibile o l’etichetta SR comunica chiaramente la destinazione
  • 4.1.2 Nome, Ruolo, Valore — elemento <a> con nome accessibile garantito

Struttura e semantica

  • <a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; il testo visibile (o l’etichetta SR) costituisce il nome accessibile del link

Attributi ARIA

Attributo Valori Condizione
tabindex="-1" "-1" quando allyHidden è attivo
aria-hidden "true" quando allyHidden è attivo (nasconde il link agli screen reader)
Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal link
Enter Attiva il link

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Nei link solo icona, il testo è racchiuso in <span class="rtds-sr-only">; l’icona ha aria-hidden="true" — lo screen reader legge solo il testo nascosto come nome del link, ignorando l’icona
  • Il <span class="rtds-sr-only"> opzionale dopo il testo visibile disambigua link con la stessa etichetta visibile (es. “– titolo dell’articolo”)
  • Quando il link ha tabindex="-1" e aria-hidden="true", è escluso completamente dallo screen reader — usare solo quando un’alternativa accessibile equivalente è già presente nella pagina

Stili CSS

Classi Base

  • .rtds-link: Stile base del link
    • Layout: inline-flex, items-center
    • Colore: link-primary
    • Font: text-base
    • Stati: hover underline link-primary-hover; focus text-primary-800

Classi Modificatori

  • .rtds-link--sm: text-sm
  • .rtds-link--lg: text-lg
  • .rtds-link--underline: underline

Esempi di utilizzo

<!-- Link standard -->
<a href="#" class="rtds-link">Link Text</a>

<!-- Link piccolo -->
<a href="#" class="rtds-link rtds-link--sm">Link Piccolo</a>

<!-- Link grande -->
<a href="#" class="rtds-link rtds-link--lg">Link Grande</a>

<!-- Link con icona -->
<a href="#" class="rtds-link">
  Link con Icona
  <svg class="rtds-icon rtds-ml-2">...</svg>
</a>

<!-- Link solo icona -->
<a href="#" class="rtds-link">
  <span class="rtds-sr-only">Link Text</span>
  <svg class="rtds-icon">...</svg>
</a>

<!-- Link con etichetta aggiuntiva -->
<a href="#" class="rtds-link">
  Link Text
  <span class="rtds-sr-only">Etichetta Aggiuntiva</span>
</a>