Didascalie nelle liste di immagini

[cfabry]

Versione di Bootstrap Italia

2.8.2

Comportamento atteso

Le didascalie nelle liste di immagini devono essere inserite con semantica <figure> <figcaption> per creare correlazione tra i due contenuti.

Comportamento attuale

Ora sono gestite semplicemente con <span> ossia senza correlazione.

Possibili soluzioni

Bisogna riportare la semantica corretta come giustamente abbiamo fatto in Immagini.

[zetareticoli]

Ciao @cfabry , dopo una prima analisi, ho riscontrato un problema con la struttura HTML utilizzata per l'immagine con didascalia in overlay:

<div class="it-grid-item-wrapper it-grid-item-overlay">
      <a href="#">
        <div class="img-responsive-wrapper">
          <div class="img-responsive">
            <div class="img-wrapper"><img src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine" alt="descrizione immagine"></div>
          </div>
        </div>
        <span class="it-griditem-text-wrapper">
          <span class="it-griditem-text">Didascalia</span>
          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
        </span>
      </a>
    </div>

Questo codice (e anche il relativo CSS) presuppone che la didascalia sia allo stesso livello del contenitore dell'immagine, al quale viene applicato poi l'overlay tramite lo pseudo-element ::after.

Dovendo invece utilizzare <figcaption>, questo deve essere dentro al tag <figure>, al livello di <img> che non accetta pseudo-elements.

Una soluzione si può trovare riscrivendo da zero il codice CSS, oltre alla struttura HTML, solo per il caso con overlay.

Negli altri casi, invece, funziona bene con le classi già esistenti in BS Italia.

/cc @Fupete

[zetareticoli]

@Fupete per risolvere questa issue va riscritto il codice HTML della versione con overlay. Da capire se procedere o meno in questa direzione.

[Fupete]

Esporre le didascalie in modo accessibile è un obbligo, non possiamo scegliere di non farlo.
Lascerei decidere ad @astagi come rendere meno invasivo possibile il breaking change e/o come documentarlo meglio in documentazione cc @cfabry @zetareticoli .

[zetareticoli]

Dobbiamo quindi procedere con revisione del template con overlay.