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

Componente `Notifications`: esempio con elementi interattivi + altre cose a11y #1177

Open Fupete opened 2 weeks ago

Fupete commented 2 weeks ago

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

Versione della libreria

2.9.0

Cosa

Integrare un esempio con elementi interattivi (pulsanti e link) come da possibilità previste dal componente presente in UI Kit Italia v3.5.0

componente notifications su UI Kit Italia

⚠️ Contenendo elementi interattivi, in questo caso la notifica andrà implementata usando role="alertDialog" e non solo alert, e facendo attenzione di spostarci subito il focus alla comparsa. La notifica in questo caso non dovrebbe poi scomparire con solo un limite temporale, dovrebbe essere l'interazione dell'utente a controllarla (chiusura, azioni, etc.).

Documentare di conseguenza anche questo caso nel box accessibilità all'inizio della documentazione di Bootstrap Italia.

Inoltre, nella documentazione valutare di integrare esempi e documentazione con la descrizione di un più "polite" approccio aria-live (o con role="status"), spiegando bene che usare alert è piuttosto intrusivo per l'utente. Vedi scheda accessibilità di Carbon per es.

Infine, integrare le versioni con icone di stato con testo visually-hidden che ne veicoli il messaggio delle icone (es: Informazione:,Successo:, Attenzione:, Errore:) prima del titolo.

Perché

Amichevole con i lettori di schermo. Navigabile. Coerenza tra risorse del Design system .italia

Contesto

Verifiche di accessibilità sui componenti.

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

Da considerare anche React kit e Angular kit. Andrà sincronizzato anche lì successivamente alla risoluzione.

Da considerare di integrare la documentazione del design system .italia sul sito Designers Italia, con esempio con elementi interattivi, e integrare/rivedere poi la citazione aria-livenel testo di questa.

Altro

Altre schede referenze MDN utili: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role e https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role

Fupete commented 2 weeks ago

FYI @zetareticoli rispetto a quanto dicevamo poco fa. Sarebbe interessante anche un parere di @cfabry quando e se avrà tempo per capire se l'approccio descritto è corretto.