Sidebar: gestione della tastiera per voci annidate

[lvalentieng]

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

• [x] Ho verificato e non esiste

Versione della libreria

20.0.0

Cosa

Quando si utilizza il componente sidebar con voci di menu annidate, la navigazione tramite tastiera presenta un comportamento non conforme alle aspettative. Attualmente, quando si arriva su una voce che contiene sotto-voci e si preme il tasto Tab, il sotto-menu si apre automaticamente. Tuttavia, se si passa nuovamente con Tab sulla stessa voce, il sotto-menu si richiude.

Comportamento attuale:

• La pressione del tasto Tab su una voce con sotto-voci apre il relativo sotto-menu.
• Ripassando con Tab sulla stessa voce, il sotto-menu si richiude.
• Questo comportamento può risultare scomodo e confondere l'utente durante la navigazione da tastiera.

Comportamento atteso:

• Il sotto-menu dovrebbe aprirsi o chiudersi solo quando l’utente preme il tasto Invio sulla voce principale, in linea con il comportamento previsto e documentato da Bootstrap Italia (vedi qui)
• La pressione del tasto Tab dovrebbe semplicemente spostare il focus sugli elementi navigabili, senza modificare lo stato di apertura/chiusura dei sotto-menu.

Passi per riprodurre:

1. Aprire una pagina con il componente sidebar che contiene voci di menu annidate (anche utilizzando l'esempio sul sito della documentazione ufficiale Design Angular KIT)
2. Utilizzare il tasto Tab per navigare tra le voci.
3. Quando il focus arriva su una voce con sotto-voci, il sotto-menu si apre automaticamente.
4. Continuando la navigazione con Tab, il sotto-menu si richiude quando il focus torna sulla voce principale.

Perché

Questo bug compromette l’usabilità e l’accessibilità della navigazione da tastiera, rendendo difficile l’interazione per chi utilizza strumenti di accessibilità.

Contesto

No response

Altro

https://italia.github.io/design-angular-kit/design-angular-kit#/menu-di-navigazione/sidebar

[astagi]

@lvalentieng questo problema (e lo lego anche a quello della paginazione #488) lo riscontri anche in Bootstrap Italia oppure è un problema relativo al solo Angular Kit?

[lvalentieng]

@astagi solo su Angular Kit; su Bootstrap Italia il comportamento è corretto; puoi provarlo qui.

Premendo TAB, si muove correttamente tra le voci senza aprire eventuali sottomenu; premendo INVIO invece si apre il sottomenu, ripremendo INVIO si chiude il sottomenu.

(anche quello della paginazione si verifica solo su Angular Kit)

[astagi]

Grazie del riscontro @lvalentieng faccio una verifica più approfondita a breve. Intanto mi segno qua il dubbio che ho e potrebbe essere relativo allo stesso discorso che stiamo facendo per liste e dropdown @valeriocomo (ovvero qualche elemento viene wrappato dall'elemento Angular?)

[valeriocomo]

Sarebbe possibile avere lo screenshot del html generato?

@lvalentieng

[lvalentieng]

@valeriocomo si, in realtà lo puoi vedere direttamente dal sito ufficiale.

[astagi]

@lvalentieng @valeriocomo Cominciamo a lavorarci dalla prossima versione, per ora rilasciamo i fix fatti.

[astagi]

@valeriocomo tu pensi che il problema sia il wrapper <it-list-item>? Nel caso potremmo modificare gli esempi facendo il plain <ul><li>?

[valeriocomo]

@astagi faccio una indagine

[astagi]

Fixed https://github.com/italia/design-angular-kit/commit/ce7fe1e713490865cd9f2141a553a0fff4ec01c3