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
305 stars 161 forks source link

navigazione tab dropdown #1091

Closed davidefrancesconi closed 3 months ago

davidefrancesconi commented 3 months ago

Versione di Bootstrap Italia

[https://designers.italia.it/design-system/componenti/dropdown/]

Comportamento atteso

In caso di navigazione da tastiera con tab il comportamento atteso dovrebbe essere spostare il focus al prossimo elemento focusabile (fonte [https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html])

Comportamento attuale

Navigazione tramite tab mi sposta il focus su un item della lista

Possibili soluzioni

Gestire la navigazione dei list items solo attraverso le frecce e con il tab spostarsi al prossimo elemento focusabile nel dom

Fupete commented 3 months ago

Ciao @davidefrancesconi,

grazie per la segnalazione ma il realtà il Dropdown di Bootstrap Italia corrisponde a questo pattern ARIA standard: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/, è un menu vero e proprio. E ti confermo che l'interazione da tastiera è quindi corretta con il Tab che salta tra gli elementi focusable interni.

Per implementare scelte in un modulo c'è il componente ad hoc Select, che usa la select standard del browser e quindi sì funziona come il pattern che segnali.

In cc @cfabry che ci ha aiutato a rivedere tutti questi pattern proprio l'anno scorso.

cfabry commented 3 months ago

Si @Fupete confermo, il comportamento del componente è corretto. @davidefrancesconi se non mi sbaglio il link che metti è della vecchia aria-practices che è ormai deprecata, ora c'è tutto il progetto APG. In ogni caso, il comportamento che segnali è tipico dei ruoli "menu", che però non si devono confondere con i ruoli i ruoli di "navigation" e in ogni caso non adatto al componente generico dropdown che, nella quasi totalità dei casi, non sarà utilizzato in un role menu.