Regione Toscana Design System — Servizi Design System Core

Table 

<section class="rtds-table-responsive" tabindex="0" aria-label="Contenuto tabella">
    <table class="rtds-table">

        <thead class="rtds-table__head">
            <tr>
                <th scope="col" class="rtds-min-w-60"><span>id</span></th>
                <th scope="col" class="rtds-min-w-60"><span>Nome</span></th>
                <th scope="col" class="rtds-min-w-60"><span>Bando</span></th>
                <th scope="col" class="rtds-min-w-60"><span>Codice fiscale</span></th>
                <th scope="col" class="rtds-text-center"><span>Stato</span></th>
                <th scope="col" class="rtds-text-center"><span>Azioni</span></th>
            </tr>
        </thead>
        <tbody class="rtds-table__body">

            <tr>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        shdciwheivuchwknvcwiufh247r984vscd
                    </span>
                </td>
                <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>

                <td>
                    <span class="rtds-font-medium">
                        Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
                </td>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        RMLRML75R44G687X
                    </span>
                </td>

                <td class="rtds-text-center">

                    <span class="rtds-chip rtds-chip--status is-pending">
                        <span class="rtds-sr-only">Stato: </span>

                        In attesa</span>

                </td>

                <td class="rtds-text-center">
                    <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--pencil-square" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Modifica
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--trash" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cancella
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--arrow-down-tray" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Download
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--document-duplicate" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Copia
                                </span>

                            </button>
                        </span>
                    </span>

                </td>

            </tr>

            <tr>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        shdciwheivuchwknvcwiufh247r984vscd
                    </span>
                </td>
                <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>

                <td>
                    <span class="rtds-font-medium">
                        Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
                </td>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        RMLRML75R44G687X
                    </span>
                </td>

                <td class="rtds-text-center">

                    <span class="rtds-chip rtds-chip--status is-open">
                        <span class="rtds-sr-only">Stato: </span>

                        Attivo</span>

                </td>

                <td class="rtds-text-center">
                    <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--pencil-square" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Modifica
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--trash" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cancella
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--arrow-down-tray" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Download
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--document-duplicate" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Copia
                                </span>

                            </button>
                        </span>
                    </span>

                </td>

            </tr>

            <tr>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        shdciwheivuchwknvcwiufh247r984vscd
                    </span>
                </td>
                <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>

                <td>
                    <span class="rtds-font-medium">
                        Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
                </td>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        RMLRML75R44G687X
                    </span>
                </td>

                <td class="rtds-text-center">

                    <span class="rtds-chip rtds-chip--status is-closed">
                        <span class="rtds-sr-only">Stato: </span>

                        Chiuso</span>

                </td>

                <td class="rtds-text-center">
                    <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--pencil-square" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Modifica
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--trash" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cancella
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--arrow-down-tray" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Download
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--document-duplicate" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Copia
                                </span>

                            </button>
                        </span>
                    </span>

                </td>

            </tr>

            <tr>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        shdciwheivuchwknvcwiufh247r984vscd
                    </span>
                </td>
                <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>

                <td>
                    <span class="rtds-font-medium">
                        Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
                </td>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        RMLRML75R44G687X
                    </span>
                </td>

                <td class="rtds-text-center">

                    <span class="rtds-chip rtds-chip--status is-in-progress">
                        <span class="rtds-sr-only">Stato: </span>

                        In corso</span>

                </td>

                <td class="rtds-text-center">
                    <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--pencil-square" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Modifica
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--trash" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cancella
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--arrow-down-tray" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Download
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--document-duplicate" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Copia
                                </span>

                            </button>
                        </span>
                    </span>

                </td>

            </tr>

            <tr>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        shdciwheivuchwknvcwiufh247r984vscd
                    </span>
                </td>
                <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>

                <td>
                    <span class="rtds-font-medium">
                        Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </span>
                </td>
                <td>
                    <span class="rtds-font-medium rtds-break-words">
                        RMLRML75R44G687X
                    </span>
                </td>

                <td class="rtds-text-center">

                    <span class="rtds-chip rtds-chip--status rtds-bg-info-dark rtds-border-info-dark rtds-text-white">
                        <span class="rtds-sr-only">Stato: </span>

                        Custom</span>

                </td>

                <td class="rtds-text-center">
                    <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--secondary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--pencil-square" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Modifica
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--primary"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--trash" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Cancella
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--inverted"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#solid--arrow-down-tray" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Download
                                </span>

                            </button>
                        </span>
                        <span class="rtds-flex-none"><button type="button" class="rtds-btn 
    rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined"><svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#outline--document-duplicate" />
                                </svg>
                                <span class="rtds-sr-only">

                                    Copia
                                </span>

                            </button>
                        </span>
                    </span>

                </td>

            </tr>

        </tbody>
    </table>

</section>
 
<section class="rtds-table-responsive" tabindex="0"{% if caption %} aria-labelledby="{{ id | default('rtds-table') }}-caption"{% else %} aria-label="{{ ariaLabel | default('Contenuto tabella') }}"{% endif %}>
    <table class="rtds-table">
        {% if caption %}<caption class="rtds-sr-only" id="{{ id | default('rtds-table') }}-caption">{{ caption }}</caption>{% endif %}
        <thead class="rtds-table__head">
    <tr>
        <th scope="col" class="rtds-min-w-60"><span>id</span></th>
        <th scope="col" class="rtds-min-w-60"><span>Nome</span></th>
        <th scope="col" class="rtds-min-w-60"><span>Bando</span></th>
        <th scope="col" class="rtds-min-w-60"><span>Codice fiscale</span></th>
        <th scope="col" class="rtds-text-center"><span>Stato</span></th>
        <th scope="col" class="rtds-text-center"><span>Azioni</span></th>
    </tr>
    </thead>
    <tbody class="rtds-table__body">
        {% for i in range(0, rows) %}
        <tr>
            <td>
                <span class="rtds-font-medium rtds-break-words">
                shdciwheivuchwknvcwiufh247r984vscd
                </span>
            </td>
            <td><a href="#" class="rtds-link-secondary rtds-underline rtds-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></td>
        
            <td>
                <span class="rtds-font-medium">
                Nome bando lorem ipsum dolor sit amet, consectetur adipiscing elit
                </span>
            </td>
            <td>
                <span class="rtds-font-medium rtds-break-words">
                RMLRML75R44G687X
                </span>
            </td>

            <td class="rtds-text-center">
                {% if loop.first %}
                    {% render '@chip--status-pending', { label: 'In attesa' }, true %}
                {% elseif loop.index == 2 %}
                    {% render '@chip--status-aperto', { label: 'Attivo' }, true %}
                {% elseif loop.index == 3 %}
                    {% render '@chip--status-chiuso', { label: 'Chiuso' }, true %}
                {% elseif loop.index == 4 %}
                    {% render '@chip--status-in-corso', { label: 'In corso' }, true %}
                {% elseif loop.index == 5 %}
                    {% render '@chip--status-custom', { label: 'Custom' }, true %}
                {% endif %}
            </td>

            <td class="rtds-text-center">
                <span class="rtds-flex rtds-gap-2 rtds-justify-center">
                    <span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--secondary', label: 'Modifica', icon: 'outline--pencil-square' }, true %}</span>
                    <span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--primary', label: 'Cancella', icon: 'outline--trash' }, true %}</span>
                    <span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--inverted', label: 'Download', icon: 'solid--arrow-down-tray' }, true %}</span>
                    <span class="rtds-flex-none">{% render '@button--icon-square', {classes: 'rtds-btn--outlined', label: 'Copia', icon: 'outline--document-duplicate' }, true %}</span>
                </span>

                
            </td>

        </tr>

        {% endfor %}
    </tbody>
</table>


    </section>
 
{
  "rows": 5
}
  • Content: 
    .rtds-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: var(--fontsize-text-sm);
}
@media (min-width: 768px) {
    .rtds-table {
        font-size: var(--fontsize-text-base);
    }
}
@media (min-width: 1280px) {
    .rtds-table {
        table-layout: fixed;
    }
}
.rtds-table__head,
    .rtds-table thead td, .rtds-table thead th {
        color: var(--color-content-inverse);
        background-color: var(--color-background-06);
    }
.rtds-table th {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    font-weight: 700;
}
@media (min-width: 768px) {
    .rtds-table th {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
}
:where(.rtds-table th, .rtds-table td) {
    text-align: left;
}
/*.rtds-table tr {
        @apply even:rtds-bg-white odd:rtds-background-02;
    }*/
.rtds-table tr:not(:first-child) {
    border-top-width: 1px;
        border-color: var(--color-border-gray-02);
}
.rtds-table th,
    .rtds-table td {
    padding: var(--spacing-3);
}
.rtds-table__body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
/* Table container - responsive */
.rtds-table-responsive {
    display: inline-block;
    width: 100%;
    min-width: var(--spacing-0);
    overflow-x: auto;
}
.rtds-table .rtds-chip {
    white-space: nowrap;
}
  • URL: /components/raw/table/table.built.css
  • Filesystem Path: components/04-organisms/table/table.built.css
  • Size: 1.4 KB
  • Content: 
    @layer components {
    .rtds-table {
        @apply rtds-w-full rtds-text-sm md:rtds-text-base rtds-border-collapse rtds-table-auto xl:rtds-table-fixed;
    }

    .rtds-table__head,
    .rtds-table thead td, .rtds-table thead th {
        @apply rtds-background-06 rtds-content-inverse;
    }

   .rtds-table th {
        @apply rtds-font-bold rtds-py-3 md:rtds-py-4;
    }

    :where(.rtds-table th, .rtds-table td) {
        @apply rtds-text-left;
    }

    /*.rtds-table tr {
        @apply even:rtds-bg-white odd:rtds-background-02;
    }*/

    .rtds-table tr:not(:first-child) {
        @apply rtds-border-gray-02 rtds-border-t;
    }

    .rtds-table th,
    .rtds-table td {
        @apply rtds-p-3;
    }

    .rtds-table__body {
        @apply rtds-bg-white;
    }

    /* Table container - responsive */
    .rtds-table-responsive {
        @apply rtds-inline-block rtds-overflow-x-auto rtds-w-full rtds-min-w-0;
    }

    .rtds-table .rtds-chip {
        @apply rtds-whitespace-nowrap;
    }

}
  • URL: /components/raw/table/table.css
  • Filesystem Path: components/04-organisms/table/table.css
  • Size: 1 KB

Table

Componente per la visualizzazione di dati tabulari con supporto per scroll orizzontale su schermi piccoli, intestazioni stilizzate e integrazione con chip di stato e pulsanti azione.

Comportamento

Il componente viene renderizzato come un wrapper <section class="rtds-table-responsive" tabindex="0"> che contiene un <table>. Il wrapper gestisce lo scroll orizzontale su mobile ed è raggiungibile da tastiera (tabindex="0"), per permettere lo scroll anche senza mouse/touch. Il nome accessibile del wrapper è aria-labelledby verso la <caption> quando il parametro caption è presente, altrimenti aria-label (parametro ariaLabel). Il numero di righe nel preview Fractal è controllato dal parametro rows.

Il template di preview mostra una tabella esempio con colonne: ID, Nome, Bando, Codice fiscale, Stato (con @chip), Azioni (con @button--icon-square). Nelle implementazioni reali, la struttura delle colonne viene definita direttamente nell’HTML.

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 da usare nei temi o ambienti di implementazione.

  • rows (numero, opzionale): Numero di righe da generare nel preview Fractal. Default: 5
  • id (stringa, opzionale): Identificativo univoco dell’istanza, usato per generare l’id della <caption> ({id}-caption) referenziato da aria-labelledby sul wrapper. Default: rtds-table
  • caption (stringa, opzionale): Testo della <caption class="rtds-sr-only">. Se presente, il wrapper usa aria-labelledby verso la caption. Se assente, il componente non renderizza alcuna <caption> e il wrapper usa aria-label
  • ariaLabel (stringa, opzionale): Nome accessibile del wrapper scrollabile, usato solo quando caption non è presente. Default: "Contenuto tabella" — generico: si raccomanda di passare un valore descrittivo dello scopo della tabella (es. "Elenco bandi disponibili")

In produzione, la tabella viene costruita con HTML diretto — il parametro rows è usato solo per il preview.

Stili CSS

Classi Base

  • .rtds-table-responsive: Wrapper per lo scroll orizzontale — inline-block, overflow-x: auto, width: 100%
  • .rtds-table: Tabella — width: 100%, border-collapse: collapse, text-sm su mobile, text-base da md

Classi Elementi (BEM)

  • .rtds-table__head: Intestazione della tabella — sfondo background-06, testo content-inverse
  • .rtds-table__body: Corpo della tabella — sfondo bg-white

Comportamento delle celle

  • <th> e <td>: padding p-3, testo allineato a sinistra
  • <th>: font bold, padding verticale maggiore (py-3 / py-4 da md)
  • Righe successive alla prima: bordo superiore border-gray-02
  • I chip all’interno della tabella hanno white-space: nowrap

Accessibilità

WCAG 2.1 AA

Criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — intestazioni di colonna marcate con <th scope="col"> per associarle alle celle correttamente; la <caption> (se presente) descrive lo scopo della tabella
  • 1.4.4 Ridimensionamento del testo — il wrapper rtds-table-responsive gestisce l’overflow orizzontale evitando testo troncato
  • 2.1.1 Tastiera — il wrapper è un <section tabindex="0">: la regione scrollabile è raggiungibile e scrollabile da tastiera anche senza mouse/touch
  • 4.1.2 Nome, ruolo, valore — il wrapper ha sempre un nome accessibile: aria-labelledby verso la <caption> se presente, altrimenti aria-label (parametro ariaLabel)

Struttura e semantica

  • Il componente è renderizzato come <section class="rtds-table-responsive" tabindex="0"> con un <table> interno — la regione scrollabile è un landmark identificabile e raggiungibile da tastiera (pattern descritto in Accessible tables)
  • Ogni <th> ha scope="col" per associare l’intestazione alle celle della colonna
  • Per intestazioni di riga aggiungere scope="row" sui <td> o <th> della prima colonna
  • Se il parametro caption è presente, la <caption class="rtds-sr-only"> diventa il nome accessibile del wrapper via aria-labelledby — evita di duplicare il testo tra caption e aria-label
  • Se caption è assente, il wrapper usa aria-label (parametro ariaLabel): passare sempre un testo che descriva lo scopo della tabella (es. "Elenco bandi disponibili") — il default "Contenuto tabella" è un fallback generico

Attributi ARIA

Attributo Valori Condizione
scope="col" su <th> — sempre presente sulle intestazioni di colonna
scope="row" su <th> — quando la prima colonna funge da intestazione di riga
tabindex="0" su <section class="rtds-table-responsive"> — sempre presente, rende la regione scrollabile raggiungibile da tastiera
aria-labelledby su <section class="rtds-table-responsive"> id della <caption> quando il parametro caption è presente
aria-label su <section class="rtds-table-responsive"> testo descrittivo (param ariaLabel) quando caption è assente

Screen reader

  • Gli screen reader usano scope per associare intestazioni alle celle durante la lettura della tabella
  • I pulsanti azione (@button--icon-square) devono avere label descrittiva dell’azione (es. "Modifica", "Cancella")
  • Il wrapper scrollabile ha sempre un nome accessibile (aria-labelledby o aria-label), annunciato quando lo screen reader entra nella regione

Esempi di utilizzo

<!-- Tabella senza caption: aria-label con testo descrittivo obbligatorio -->
<section class="rtds-table-responsive" tabindex="0" aria-label="Elenco pratiche">
  <table class="rtds-table">
    <thead class="rtds-table__head">
      <tr>
        <th scope="col"><span>Nome</span></th>
        <th scope="col"><span>Data</span></th>
        <th scope="col" class="rtds-text-center"><span>Stato</span></th>
      </tr>
    </thead>
    <tbody class="rtds-table__body">
      <tr>
        <td><span class="rtds-font-medium">Mario Rossi</span></td>
        <td>01/01/2025</td>
        <td class="rtds-text-center">
          <span class="rtds-chip rtds-chip--status is-open">Attivo</span>
        </td>
      </tr>
    </tbody>
  </table>
</section>

<!-- Tabella con caption: aria-labelledby referenzia la caption, nessun aria-label duplicato -->
<section class="rtds-table-responsive" tabindex="0" aria-labelledby="table-pratiche-caption">
  <table class="rtds-table">
    <caption class="rtds-sr-only" id="table-pratiche-caption">Elenco pratiche con azioni disponibili</caption>
    <thead class="rtds-table__head">
      <tr>
        <th scope="col"><span>Nome</span></th>
        <th scope="col" class="rtds-text-center"><span>Azioni</span></th>
      </tr>
    </thead>
    <tbody class="rtds-table__body">
      <tr>
        <td>Lorem ipsum</td>
        <td class="rtds-text-center">
          <span class="rtds-flex rtds-gap-2 rtds-justify-center">
            <!-- Pulsanti azione con @button--icon-square -->
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</section>