italia / design-comuni-pagine-statiche

Le pagine statiche che compongono il modello di sito web per i comuni
https://italia.github.io/design-comuni-pagine-statiche
BSD 3-Clause "New" or "Revised" License
18 stars 24 forks source link

Bug componente Rating #117

Closed AlessandroVecchi closed 1 year ago

AlessandroVecchi commented 1 year ago

Ciao, Segnalo 2 errori nel componente CmpRating.

Uno è di natura formale ed è il fatto che un <h3> non può essere annidato dentro in <legend>.

            <legend class="iscrizioni-header w-100">
              <h3 class="step-title d-flex align-items-center justify-content-between drop-shadow">
                <span class="d-block d-lg-inline" data-element="feedback-rating-question">
                  Quali sono stati gli aspetti che hai preferito?
                </span>
                <span class="step">1/2</span>
              </h3>
            </legend>

Peraltro in una versione precedente dello stesso componente il codice era:

              <div class="iscrizioni-header w-100">
                <h3 class="step-title d-flex align-items-center justify-content-between drop-shadow">
                  <legend data-element="feedback-rating-question" class="d-block d-lg-inline">
                    Dove hai incontrato le maggiori difficoltà?
                  </legend>
                  <span class="step">1/2</span>
                </h3>
              </div>

e anche in questo caso mi veniva segnalato che un <legend> non può stare all'interno di un <h3> e ha senso perché uno è un titolo di sezione, l'altro un titolo intendo ad un gruppo di campi. Quindi è sbagliato forzare un <legend> a comportarsi da h3 o viceversa. Peraltro la formattazione è data dalla classe .step-title quindi l'h3 non serve nemmeno a quello. Suggerire di eliminare l'h3 oppure il legend a seconda di cosa si vuole ottenere.

Il secondo problema è di impaginazione; da mobile (es. dalla pagina https://italia.github.io/design-comuni-pagine-statiche/sito/homepage.html) si vede così:

Immagine 2023-05-16 162040

Nel codice peraltro ci sono un sacco di classi di cui non capisco bene lo scopo... l'h3 viene impostato come d-flex e poi lo span al suo interno come d-block d-lg-inline.

Io ho risolto aggiungendo la classe "no-wrap" al legend ma è comunque un "taccone" <legend class="iscrizioni-header w-100 text-wrap">