search

italia / bootstrap-italia

Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle "Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione"
https://italia.github.io/bootstrap-italia
BSD 3-Clause "New" or "Revised" License
310 stars 163 forks source link

Didascalie nelle liste di immagini #1078

Open cfabry opened 8 months ago

cfabry commented 8 months ago

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 commented 3 months ago

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 commented 3 months ago

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

Fupete commented 2 months ago

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 commented 2 months ago

Dobbiamo quindi procedere con revisione del template con overlay.

zetareticoli commented 2 weeks ago

I problemi dovrebbe essere ora risolti in #1150