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

Componente `Input`: indagare ulteriormente la variante Password navigando da tastiera o con screen reader #1216

Closed Fupete closed 3 weeks ago

Fupete commented 1 month ago

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

Versione della libreria

2.9.0

Cosa

La variante Password non permette di attivare il "Mostra password" navigando da tastiera o ascoltando da lettore di schermo.

Entrambe funzionanità che credo sarebbero necessarie e molto utili. Da verificare anche rispetto alle WCAG 2.2.

Update: C'è anche il tema che il "Mostra password" deve avere la semantica corretta (es. di un pulsante) e le alternative testuali adeguate (vedi commento di rscano che segue per dettagli).

Perché

Navigabile. Amichevole con i lettori di schermo. Comprensibile.

Contesto

Verifiche di accessibilità sui componenti.

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

Altro

Per chi gestirà la risoluzione della presente segnalazione segnalo la documentazione del componente su Gov UK che può essere utile per raffronto: https://design-system.service.gov.uk/components/password-input/

Il problema è in caso presente anche su React e Angular kit, da gestire anche lì alla risoluzione della presente.

Fupete commented 1 month ago

Un contributo di @cfabry su questo sarebbe molto utile.

rscano commented 1 month ago

Attualmente l'oggetto mostra password non è conforme alla EN / WCAG 2, in particolare al criterio di successo 2.1.1. Va quindi innanzitutto dato un ruolo adeguato (es: pulsante) fornendo anche alternative testuali adeguate (mostra password / nascondi password) in quanto va garantita anche la possibilità agli utenti non vedenti di gestire / farsi leggere la password (che altrimenti viene letta come punto elenco o similare).

Consiglio per approfondimenti: Password Forms — 3 Ways to Make Them More Accessible

Fupete commented 1 month ago

Ho aperto una prima PR di evoluzione: https://github.com/italia/bootstrap-italia/pull/1232 La marco come sandbox perché ancora prematura, alcune soluzioni sono solo abbozzate. Seppure mi sembra già così funzioni abbastanza meglio.

@astagi dobbiamo capire se procedere così, fixando quando c'è, oppure se fare un refactoring completo affidandosi a qualcosa di già completo da trovare altrove.