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
309 stars 163 forks source link

Gruppi di input checkbox, radio e toggles #1069

Closed cfabry closed 1 day ago

cfabry commented 8 months ago

Versione di Bootstrap Italia

2.8.2

Descrizione del problema

Nella sezione Gruppi, si suggerisce una modifica del layout di default per gli elementi grafici di spunta per spostarli a destra. Tuttavia il nome "Gruppi", potrebbe essere fuorviante e richiamare all'uso della classe CSS per "raggruppare" i campi di input. Invece il "raggruppamento" di campi di input, quando semantico, deve poter essere fatto con l'elemento nativo <fieldset>.

Possibili soluzioni

Si potrebbe rinominare la sezione con un nome più consono e/o inserire un alert di accessibilità che possa invitare gli sviluppatori all'uso corretto di <fieldset>, spiegando che la soluzione indicata è puramente visiva, senza valore semantico.

Contesto

Aggiornato da @Fupete 2/9/2024:

Verifiche di accessibilità sui componenti.

⚠️ Sarà da aggiornare lo status delle verifiche nella board census alla risoluzione.

Fupete commented 7 months ago

Reference utile uscita questi giorni: https://www.tpgi.com/fieldsets-legends-and-screen-readers-again/

Fupete commented 7 months ago

@cfabry se rimandiamo al pattern aria di riferimento? Ad esempio per i Radio button: https://www.w3.org/WAI/ARIA/apg/patterns/radio/ magari anche implementando già role, aria-label etc. corretti nel markup?

Fupete commented 1 month ago

⚠️ Da notare che vale anche per Checkbox, non solo per Radio.

Fupete commented 1 month ago

Segnalo inoltre qui su Carbon la corretta implementazione dei <fieldset> con <legend> del gruppo. Può essere utile all'implementazione.

Aggiungerei poi alla presente issue, visto che ci siamo, che probabilmente in queste varianti "Gruppi" sarebbe da ricontrollare anche la semantica dei testi <small> integrati.

Il tema vale anche per i componenti Toggles, aggiorno il titolo di conseguenza.