Modal Share

Finestra modale per la condivisione di contenuti sui social network. Estende il componente @modal-dialog aggiungendo una lista di link social nel corpo della modale.

Comportamento

Il componente estende @modal-dialog e renderizza al suo interno il componente @social-links. L’apertura e chiusura sono gestite tramite l’ID del dialogo (dialogId).

Dipendenze

• @modal-dialog — modale base che fornisce struttura, overlay e accessibilità
• @social-links — lista di link ai social network

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.

Parametri del dialogo

• dialogId (stringa, obbligatorio): ID univoco del dialogo, usato per collegare il pulsante di apertura (aria-controls) alla modale
• label (stringa, opzionale): Titolo della modale. Default: "Condividi sui social"

Parametri dei pulsanti

• buttons (array, opzionale): Pulsanti nel footer della modale. Ogni item accetta:
  • label (stringa): Testo del pulsante
  • callback (stringa): Funzione JavaScript da chiamare al click (es. closeDialog(this))
  • classes (stringa): Classi CSS del pulsante (es. rtds-btn--outlined)

Parametri dei social links

• socialLinks.wrapperClasses (stringa): Classi CSS per il wrapper della lista
• socialLinks.listGap (stringa): Gap tra gli elementi (es. rtds-gap-2)
• socialLinks.linkIconSize (stringa): Dimensioni icone dei link (es. rtds-w-8 rtds-h-8)
• socialLinks.itemClasses (stringa): Classi CSS per ogni item
• socialLinks.itemLinkClasses (stringa): Classi CSS per ogni link
• socialLinks.items (array): Lista dei social network, ognuno con:
  • label (stringa): Testo accessibile del link (es. "Condividi su Facebook")
  • icon (stringa): ID icona dallo sprite SVG (es. solid--facebook)
  • color (stringa): Classe colore (es. rtds-text-social-facebook)

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

• 4.1.2 Nome, Ruolo, Valore — la modale eredita role="dialog", aria-modal="true" e aria-labelledby da @modal-dialog
• 2.4.4 Scopo del collegamento (nel contesto) — i link social devono avere label che descriva l’azione e la destinazione (non solo il nome del social)
• 2.1.1 Tastiera — focus trap e navigazione da tastiera gestiti da @modal-dialog

Struttura e semantica

• Il componente estende @modal-dialog — eredita tutta la struttura ARIA della modale base
• I link social sono forniti dal componente @social-links

Attributi ARIA

Gestione del focus

• Focus trap e focus restoration: gestiti da @modal-dialog
• Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

• I link social devono avere label descrittive (es. "Condividi su Facebook", non solo "Facebook")
• La modale viene annunciata con il titolo label (default: "Condividi sui social")

Esempi di utilizzo

<!-- Pulsante che apre la modale -->
<button
  type="button"
  aria-controls="openModalShare"
  class="rtds-btn rtds-btn--primary"
>
  Condividi
</button>

<!-- La modale viene renderizzata tramite Fractal/Nunjucks -->

<div class="rtds-dialog">
    <div role="dialog" id="openModalShare" aria-labelledby="openModalShareLabel" aria-modal="true" class="rtds-hidden">
        
        
        <div class="rtds-dialog__header">
            <h2 id="openModalShareLabel" class="rtds-dialog__title">
                
                Condividi sui social
            </h2>

            
            
            
        </div>
        
        
        
        <div class="rtds-dialog__content" tabindex="0">
            
    
<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 rtds-text-social-facebook rtds-link--lg">
            <span class="rtds-sr-only">Condividi su Facebook</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 rtds-text-social-linkedin rtds-link--lg">
            <span class="rtds-sr-only">Condividi su LinkedIn</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--linkedin" />
</svg>

        </a>
        </li>
        
    </ul>

</div>



        </div>
        

    
        
    
    
    
    </div>
</div>