<div class="rtds-social-links rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 ">
<ul class="rtds-flex rtds-items-center rtds-gap-4">
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Facebook di ???</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--facebook" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al profilo Instagram di ???</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--instagram" />
</svg>
</a>
</li>
<li class="rtds-flex rtds-items-center">
<a href="" class="rtds-link rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1 undefined rtds-link--lg">
<span class="rtds-sr-only">Vai al canale YouTube di ???</span>
<svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--youtube" />
</svg>
</a>
</li>
</ul>
</div>
<div class="rtds-social-links{% if wrapperClasses %} {{ wrapperClasses }}{% else %} rtds-grid rtds-gap-1 md:rtds-flex md:rtds-gap-6 {% endif %}">
{% if label %}<h2 {% if labelClasses %}class="{{ labelClasses }}" {% endif %}id="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}">{{ label }}</h2>{% endif %}
<ul{% if id %} id="{{ id }}"{% endif %} class="rtds-flex rtds-items-center{% if listGap %} {{ listGap }}{% endif %}{% if classes %} {{ classes }}{% endif %}"{% if label %} aria-labelledby="{% if labelId %}{{ labelId }}{% else %}socialLabelId{% endif %}"{% endif %}>
{% for item in items %}
<li class="{% if itemClasses %}{{ itemClasses }}{% endif %}">
{% render '@link--lg', { label:item.label, iconOnly:true, icon:item.icon, classes: itemLinkClasses + ' ' + item.color, iconSize: linkIconSize }, true %}
</li>
{% endfor %}
</ul>
</div>
{
"listGap": "rtds-gap-4",
"linkIconSize": "rtds-w-8 rtds-h-8 lg:rtds-w-6 lg:rtds-h-6",
"itemClasses": "rtds-flex rtds-items-center",
"itemLinkClasses": "rtds-text-2xl rtds-content-05 rtds-p-2 xl:rtds-p-1",
"items": [
{
"label": "Vai al profilo Facebook di ???",
"icon": "solid--facebook"
},
{
"label": "Vai al profilo Instagram di ???",
"icon": "solid--instagram"
},
{
"label": "Vai al canale YouTube di ???",
"icon": "solid--youtube"
}
]
}
Il componente Social Links gestisce la visualizzazione dei link ai social media. È progettato per essere accessibile e responsive, supportando diverse configurazioni di layout e stile.
Il componente è renderizzato come <div> contenente una <ul> di link social. Quando è presente un titolo, il <div> include un <h2> e la <ul> è associata ad esso tramite aria-labelledby. Ogni link è un <a> con icona SVG decorativa (aria-hidden="true") e <span class="rtds-sr-only"> con il nome del social.
Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context
.config.ymlusati 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.
label (stringa, opzionale): Etichetta visibile del bloccolabelId (stringa, opzionale): ID per l’accessibilità, utilizzato in aria-labelledby sulla listalabelClasses (stringa, opzionale): Classi per lo stile dell’etichettawrapperClasses (stringa, opzionale): Classi per il wrapper dei social links (se con etichetta)classes (stringa, opzionale): Classi per il componenteid (stringa, opzionale): ID per il componentelistGap (stringa, opzionale): Classi per lo spazio tra gli elementi della lista (default: rtds-gap-4)itemClasses (stringa, opzionale): Classi per gli elementi della lista (<li>)linkIconSize (stringa, opzionale): Classi per la dimensione dell’icona del linkitems (array, obbligatorio): Elementi sociallabel (stringa, obbligatorio): Etichetta dell’elemento (es. “Facebook”, “Twitter”)icon (stringa, obbligatorio): ID icona dell’elementoLivello AA — criteri pertinenti:
<ul> con <li>; quando è presente un’etichetta, la lista è associata tramite aria-labelledbylabel) disponibile per gli screen reader tramite rtds-sr-only (icona-only)<div> — wrapper presentazionale; non ha semantica propria<h2> (opzionale) + <ul aria-labelledby="..."> — quando è presente un titolo, la lista è associata ad esso tramite aria-labelledby; lo screen reader annuncia il titolo all’ingresso nella lista<a> (link social) — ruolo implicito link; l’icona ha aria-hidden="true"; il <span class="rtds-sr-only"> con il nome del social costituisce il nome accessibile del link| Attributo | Valori | Condizione |
|---|---|---|
aria-labelledby |
ID dell’elemento <h2> |
presente sulla <ul> quando è presente un’etichetta (label) |
| Tasto | Azione |
|---|---|
Tab / Shift+Tab |
Sposta il focus tra i link social |
Enter |
Attiva il link corrente |
:focus-visible è sempre visibile e non viene rimosso via CSS<a> social ha <span class="rtds-sr-only"> con il nome del social (es. “Facebook”, “Twitter”) come nome accessibile — lo screen reader lo annuncia al posto dell’icona, che ha aria-hidden="true" e viene ignorata<ul> con aria-labelledby (quando è presente l’<h2>) viene annunciata con il nome del titolo all’ingresso nella lista<!-- Esempio base senza etichetta -->
<div class="rtds-social-links">
<ul class="rtds-flex rtds-items-center rtds-gap-4">
<li class="rtds-flex rtds-items-center">
<a href="https://facebook.com" class="rtds-text-2xl rtds-content-05 rtds-p-2">
<svg class="rtds-icon rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false"><use href="#social--facebook"></use></svg>
<span class="rtds-sr-only">Facebook</span>
</a>
</li>
</ul>
</div>
<!-- Esempio con etichetta -->
<div class="rtds-social-links">
<h2 id="social-label">Seguici su</h2>
<ul class="rtds-flex rtds-items-center rtds-gap-4" aria-labelledby="social-label">
<li class="rtds-flex rtds-items-center">
<a href="https://twitter.com" class="rtds-text-2xl rtds-content-05 rtds-p-2">
<svg class="rtds-icon rtds-w-8 rtds-h-8" aria-hidden="true" focusable="false"><use href="#social--twitter"></use></svg>
<span class="rtds-sr-only">Twitter</span>
</a>
</li>
</ul>
</div>