Regione Toscana Design System — Servizi Design System Core

Link component 

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

</a>
 
<{% if span %}span{% else %}a href="{{ href }}"{% endif %}{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="rtds-action-link{%- block classes %} {{ classes }}{%- endblock -%}">
    {%- block content -%}
        {% if iconOnly %}
            <span class="rtds-sr-only">{{ label }}</span>
        {% else %}
            {{ label | safe }}
        {% endif %}
         {% if accessibleLabel %}<span class="rtds-sr-only">{{ accessibleLabel }}</span>{% endif %}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: iconSize, classes: iconClasses }, true %}
        {% endif %}
        {% if iconOnly %}
            {% render '@icon--medium', { id: icon, size: iconSize, classes: iconClasses }, true %}
        {% endif %}
    {%- endblock -%}
</{% if span %}span{% else %}a{% endif %}>
 
{
  "label": "Link text",
  "icon": "mini--arrow-small-right",
  "iconSize": ""
}
  • Content: 
    /* LINK */
.rtds-action-link {
    font-size: var(--fontsize-text-base);
        color: var(--color-link-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.rtds-action-link:hover {
    text-decoration-line: underline;
        color: var(--color-link-primary-hover);
}
.rtds-action-link:focus {
    color: var(--color-primary-800);
}
@media (min-width: 768px) {
    .rtds-action-link {
        font-size: var(--fontsize-text-base);
    }
}
.rtds-action-link--sm {
    gap: var(--spacing-1-5);
    font-size: var(--fontsize-text-sm);
}
.rtds-action-link--lg {
    gap: var(--spacing-2-5);
    font-size: var(--fontsize-text-lg);
}
.rtds-action-link--underline {
    text-decoration-line: underline;
}
/* ICON ONLY */
.rtds-action-link--icon-only {
    border-radius: 0.125rem;
    padding: var(--spacing-1);
}
.rtds-action-link--icon-only:hover {
    background-color: var(--color-secondary-50);
        color: var(--color-content-primary-dark);
}
/* SIZE */
:where(.rtds-action-link) .rtds-icon {
    width: var(--spacing-5);
    height: var(--spacing-5);
}
:where(.rtds-action-link--sm) .rtds-icon {
    width: var(--spacing-4);
    height: var(--spacing-4);
}
:where(.rtds-action-link--lg) .rtds-icon {
    width: var(--spacing-6);
    height: var(--spacing-6);
}
  • URL: /components/raw/action-link/action-link.built.css
  • Filesystem Path: components/02-atoms/action-link/action-link.built.css
  • Size: 1.5 KB
  • Content: 
    /* LINK */
@layer components {
    .rtds-action-link {
        @apply rtds-inline-flex rtds-gap-2 rtds-items-center rtds-link-primary rtds-transition-all hover:rtds-underline hover:rtds-link-primary-hover focus:rtds-text-primary-800 rtds-text-base md:rtds-text-base rtds-font-bold;
    }

    .rtds-action-link--sm {
        @apply rtds-text-sm rtds-gap-1.5;
    }

    .rtds-action-link--lg {
        @apply rtds-text-lg rtds-gap-2.5;
    }

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

    /* ICON ONLY */
    .rtds-action-link--icon-only {
        @apply rtds-p-1 hover:rtds-bg-secondary-50 hover:rtds-content-primary-dark rtds-rounded-sm;
    }

    /* SIZE */
    :where(.rtds-action-link) .rtds-icon {
        @apply rtds-w-5 rtds-h-5;
    }

    :where(.rtds-action-link--sm) .rtds-icon {
        @apply rtds-w-4 rtds-h-4;
    }

    :where(.rtds-action-link--lg) .rtds-icon {
        @apply rtds-w-6 rtds-h-6;
    }
}
  • URL: /components/raw/action-link/action-link.css
  • Filesystem Path: components/02-atoms/action-link/action-link.css
  • Size: 954 Bytes

Action Link

Componente per link di azione con supporto per icone e diverse dimensioni.

Comportamento

Il componente può essere renderizzato come:

  • <a> — quando viene specificato href nel contesto Fractal/Nunjucks; link stilizzato raggiungibile con Tab e attivabile con Enter
  • <span> — quando href non è specificato nel contesto Fractal/Nunjucks; usato come contenuto non interattivo all’interno di componenti complessi dove il click è gestito dal contenitore padre

Varianti

Varianti di Stile

  • default: Link standard
  • has-icon: Link con icona
  • icon-only: Solo icona cliccabile

Varianti di Dimensione

  • sm: Dimensione piccola
  • lg: Dimensione grande

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, opzionale): URL del link. Se non specificato, il componente renderizza uno <span>
  • classes (stringa, opzionale): Classi CSS aggiuntive

Parametri per Icone

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

Parametri di Accessibilità

  • allyHidden (booleano, opzionale): Nasconde il link agli screen reader
  • accessibleLabel (stringa, opzionale): Etichetta aggiuntiva per screen reader

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.4.3 Contrasto minimo — testo su sfondo
  • 2.1.1 Tastiera — il link <a> è raggiungibile e attivabile da tastiera
  • 2.4.4 Scopo del collegamento (nel contesto) — testo del link o etichetta SR comunica chiaramente la destinazione
  • 4.1.2 Nome, Ruolo, Valore — gli elementi interattivi hanno un nome accessibile

Struttura e semantica

  • <a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; usare per link di azione navigabili
  • <span> — nessun ruolo interattivo; non focusabile; usare come contenuto non interattivo all’interno di componenti complessi dove il click è gestito dal contenitore padre

Attributi ARIA

Attributo Valori Condizione
tabindex="-1" "-1" quando allyHidden è attivo (rimuove il link dal flusso di tab)
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

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 aggiunge contesto (es. destinazione, disambiguazione tra link con la stessa etichetta)
  • 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-action-link: Stile base del link
  • .rtds-action-link--underline: Versione sottolineata

Classi Modificatori

  • .rtds-action-link--sm: Dimensione piccola
  • .rtds-action-link--lg: Dimensione grande
  • .rtds-action-link--icon-only: Stile per versione solo icona

Esempi di utilizzo

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

<!-- Link con icona -->
<a href="#" class="rtds-action-link">
  Link text
  <svg class="rtds-icon">...</svg>
</a>

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