Regione Toscana Design System

tab: Borderless 

<a href="#" class="rtds-tab is-tab rtds-tab--borderless
    rtds-content-02 rtds-min-w-4
">

    <span class="rtds-tab__label">tab label</span>

</a>
 
{% extends '@tab' %}
{% block classes %} rtds-tab--borderless
{%- if classes %}
    {{ classes }}
{% endif -%}
{% endblock %}
 
{
  "label": "tab label",
  "href": "#",
  "bgColor": "rtds-background-03",
  "bgActiveColor": "rtds-bg-white",
  "classes": "rtds-content-02 rtds-min-w-4"
}
  • Content: 
    /**
 * TAB
 * 
 *
*/
/* BASE */
@layer components {
    .rtds-tab {
        @apply rtds-flex rtds-justify-center rtds-font-bold hover:rtds-background-02 rtds-transition-all;
    }

    .rtds-tab--default {
        @apply rtds-content-02 rtds-p-2 md:rtds-p-3 rtds-border-b-2 rtds-border-transparent rtds-text-sm md:rtds-text-base hover:rtds-background-02;
    }

    .rtds-tab--default.is-active,
    .rtds-tab--default[aria-selected="true"] {
        @apply rtds-content-primary rtds-border-current;
    }

    /* BORDERLESS */
    .rtds-tab--borderless {
        @apply rtds-p-4 lg:rtds-py-6 lg:rtds-px-12 xl:rtds-py-6 xl:rtds-px-16 rtds-background-03;
    }

    .rtds-tab--borderless.is-active,
    .rtds-tab--borderless[aria-selected="true"] {
        @apply rtds-bg-white rtds-content-primary;
    }
    
    .rtds-tab--icon-label {
        @apply rtds-gap-2;
    }
}
  • URL: /components/raw/tab/tab.css
  • Filesystem Path: components/03-molecules/tab/tab.css
  • Size: 872 Bytes

Componente Tab

Il componente Tab è un elemento molecolare che gestisce la visualizzazione di tab singoli, utilizzabile sia come link che come pulsante. È progettato per essere accessibile e responsive, supportando diverse configurazioni di layout e stile.

Markup

Il componente utilizza una struttura semantica con:

  • <a> o <button> come elemento principale
  • Supporto per icone a sinistra e destra
  • Gestione dello stato attivo e degli attributi ARIA

La struttura base del markup è:

<a class="rtds-tab is-tab rtds-tab--default" role="tab" aria-selected="true">
    <!-- Icona sinistra opzionale -->
    <span>Etichetta tab</span>
    <!-- Icona destra opzionale -->
</a>

Comportamento

  • Supporta layout responsive con configurazioni specifiche per mobile e desktop
  • Include supporto per icone con dimensioni personalizzabili
  • Fornisce navigazione accessibile con attributi ARIA
  • Gestisce lo stile degli elementi in modo flessibile
  • Supporta varianti con e senza bordo

Accessibilità

Il componente è stato progettato seguendo le linee guida WCAG 2.1 e implementa diverse caratteristiche per garantire l’accessibilità:

Struttura Semantica

  • Utilizzo di elementi HTML5 semantici (<a> o <button>)
  • Attributi ARIA appropriati per il ruolo di tab
  • Supporto per ID personalizzati e relazioni tra tab e pannelli

Attributi ARIA nel caso di uso all’interno di tablist

  • role="tab" per identificare l’elemento come tab
  • aria-selected per indicare lo stato di selezione
  • aria-controls per associare il tab al suo pannello
  • aria-current per indicare la posizione corrente

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

  • label: stringa - etichetta del tab
  • href: stringa - URL o hash se l’elemento è un link, altrimenti sarà un pulsante
  • roleTab: booleano - se l’elemento è incluso in una tablist (richiede role tab)
  • ariaSelected: booleano - se l’elemento è incluso in una tablist
  • ariaControls: stringa - ID del pannello tab correlato
  • ariaCurrent: stringa - valore per l’attributo aria-current (page, step, location, date, time, true)
  • id: stringa - ID del tab
  • tabIndex: booleano - se deve avere l’attributo tabindex
  • iconLeft: booleano - se ha un’icona a sinistra
  • iconRight: booleano - se ha un’icona a destra
  • borderColor: stringa - colore del bordo per lo stato attivo
  • bgColor: stringa - colore di sfondo
  • bgActiveColor: stringa - colore di sfondo per lo stato attivo
  • isActive: booleano - se ha la classe is-active (stato attivo)

Configurazione YAML

Il file di configurazione supporta le seguenti impostazioni:

  • title: stringa - titolo del componente
  • context: oggetto - configurazione di default
    • label: stringa - etichetta del tab (default: “tab label”)
    • href: stringa - URL di default (default: “#”)
    • borderColor: stringa - colore del bordo (default: “rtds-border-gray-04”)

Varianti

  • default: variante base del tab
  • active: variante con stato attivo
    • isActive: booleano - impostato a true
  • borderless: variante senza bordo
    • bgColor: stringa - colore di sfondo (default: “rtds-background-03”)
    • bgActiveColor: stringa - colore di sfondo attivo (default: “rtds-bg-white”)
    • classes: stringa - classi aggiuntive (default: “rtds-content-02 rtds-min-w-4”)

Note sull’implementazione

  • Il componente utilizza il sistema di classi utility per il layout e lo stile
  • Supporta la transizione fluida tra stati
  • Le icone sono gestite attraverso il componente icon esistente
  • Il componente supporta la personalizzazione completa delle classi CSS per adattarsi a diversi contesti di utilizzo