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
20 stars 25 forks source link

Visualizzazione link (`inline-block`) #168

Closed enrimk closed 1 month ago

enrimk commented 3 months ago

Follow-up da italia/design-comuni-wordpress-theme#314

Su tutti i tag <a> viene applicato indiscriminatamente display: inline-block. In molti casi questo impedisce il corretto layout.

Ad esempio, negli elenchi puntati, come rilevato in #314.

Un altro caso, altrettanto comune, è quello di normali link in un qualunque testo di pagina, che siano però lunghi più di una riga o che comunque vadano a capo.

In questa condizione tutti i link, in qualunque zona del sito, si comportano come "box" rettangolari: formano un riquadro a parte, circondato dal testo (in modo simile a come il browser tratta le immagini).

Verosimilmente non è questo il comportamento voluto. [ NB: La regola css in questione è stata aggiunta allo stylesheet di reset. ]

image

enrimk commented 3 months ago

Lo scopo dell'aggiunta della regola, stando al messaggio di commit, è per correggere qualcosa nella linea di contorno degli stati :focus dei link.
In effetti, togliendola, si vede che i link con focus hanno un contorno irregolare.
Tuttavia, questo si è reso necessario soprattutto perché in Bootstrap Italia si è scelto di simulare l'outline con un box-shadow. Alla luce di un supporto dei browser per gli elementi di accessibilità che è sicuramente migliorato nel frattempo, andrebbe forse rivisto e aggiustato il ricorso a questi stratagemmi (compreso il polyfill :not(.focus--mouse) per simulare :focus-visible).

Ora:

errata-visualizzazione-link-modello-comuni_3

<a> inline:

errata-visualizzazione-link-modello-comuni_4

Normale outline (:focus), senza shadow:

errata-visualizzazione-link-modello-comuni__focus--outline

:focus-visible in browser moderni (Chrome):

errata-visualizzazione-link-modello-comuni__focus-visible

In ogni caso, forse non è poi appropriato che una regola con uno scopo così specifico, e soprattutto non indipendente ma in dipendenza da scelte fatte in altri stylesheet, stia proprio nello stylesheet di reset, che di solito viene usato per cose fondamentali come costituire una base di partenza e uniformare i browser.

zetareticoli commented 3 months ago

Metto in priorità alta.

stale[bot] commented 1 month ago

Questo problema è stato automaticamente contrassegnato come non aggiornato perché non ha avuto attività recentemente. Sarà chiuso se non si verificano ulteriori attività. Considerate inoltre l'aggiornamento alle ultime versioni del tema. Grazie.

enrimk commented 1 month ago

Suggerirei, per arginare Stalebot in modo che sia più utile:

diff --git a/.github/stale.yml b/.github/stale.yml
--- .github/stale.yml
+++ .github/stale.yml
@@ -5,4 +5,6 @@
 # Issues with these labels will never be considered stale
 exemptLabels:
   - pinned
   - security
+exemptProjects: true
+exemptAssignees: true

(exemptProjects, exemptAssignees)

zetareticoli commented 1 month ago

@enrimk ho aperto PR di fix in draft per testing

limiterei a rimuovere il display dal file dedicato al modello comuni, ogni riflessione su come viene applicato il focus deve essere fatta con una issue dedicata nel repo di BS Italia