Componente `Toolbar`: Criticità di accessibilità relative al layout

[Mattia541993]

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

• [X] Ho verificato e non esiste

Versione della libreria

2.9.0

Cosa

React

• Nell'esempio con icone grandi e nell'esempio con divisori, lo screen reader legge senza spazio "Preferitielemento disabilitato". L'assenza dello spazio tra "Preferiti" e "elemento" può creare confusione in particolare in chi usa il display Braille o nei casi in cui il nome del collegamento sia costituito da una sola lettera. In questo secondo caso il lettore di schermo leggerebbe, ad esempio "Eelemento disabilitato", "Helemento disabilitato" "Nelemento disabilitato". Possibile soluzione: usare al posto di spazio " ".
• I divisori definiti con  ToolbarItemDivider non vengono letti dal lettore di schermo (sono aria-hidden="true"). Nella versione Bootstrap i divisori vengono letti correttamente.

Perché

Per omogeneità tra i vari framework considerati da Designers Italia e per chiarezza nel rendere esplicita la semantica dei divisori in React

Contesto

No response

Altro

No response

[Fupete]

Ciao @Mattia541993,

• ho verificato e il primo punto che segnali è presente solo sulla variante con icone grandi. Tutte le altre varianti non hanno il testo "elemento disabilitato" aggiunto con uno span visually hidden ad hoc, essendo in effetti sufficiente lo stato disabled sull'elemento per annunciare agli screen reader che è un elemento oscurato. Proporrei quindi in questo caso solamente di toglierlo anche dalla prima variante in questa riga per correttezza: https://github.com/italia/bootstrap-italia/blob/98498c5a6bfc809aa5ebac5d7899bcc559ebec55/docs/menu-di-navigazione/toolbar.md?plain=1#L63 trasformandola quindi nella semplice <span class="toolbar-label">preferiti</span>. Che ne dici?

• Sul secondo punto (separatori) concordo con te che devono essere annunciati, ma essendo un problema presente solo sul React kit lascerei lì la issue relativa.