[BITV] Menus must be focus trapped

[PVince81]

Tabbing out of a menu should close it.

Need to check all the menus in the top bar:

• search: [stable25] Close global search menu when keyboard focus leaves #35233
• notifications: Close menu when focus leaves notifications#1367
• Popover component: check if they do (at least with Escape key)

Also: probably the menu should close when Escape is hit while inside the menu ? (need to check if WCAG requires this)

[Pytal]

Notifications nextcloud/notifications#1367

[Pytal]

@PVince81 @skjnldsv focus trap all header menus like in nextcloud-libraries/nextcloud-vue#3489 or allow tabbing out and closing like in https://github.com/nextcloud/server/pull/35090/files#diff-ae814dad42ef834e47dfd1d175e798e67c703ede5105470317fafabec5c2f60f

[skjnldsv]

I added focus trap on nextcloud-libraries/nextcloud-vue#3489 too to help with your ongoing accessibility work :)

[Pytal]

Roger, so since they are mutually exclusive then which one should we go for @skjnldsv @PVince81?

[Pytal]

Will go with focus trap version introduced in nextcloud-libraries/nextcloud-vue#3489 and will have to port over the existing menus as discussed with @PVince81

• Port global search menu
• Port notifications menu

[Pytal]

• Focus trap user and contacts menus #35381
  • user menu
  • contacts menu

[Pytal]

• Clarify with accessibility reviewer

[Pytal]

@michaelnissenbaum for the top-right menus we have 2 options

1. Allow tabbing out + automatically closing these menus and setting the focus on the next element in the page
2. Trap focus within these menus so that tabbing after reaching the last item will loop back to the first menu item and allowing users to close these menus by hitting the Escape key

Which option would pass the accessibility audit?

Menu	Screenshot
Global search
Notifications
Contacts
User menu

[michaelnissenbaum]

My favourite is the version one - tabbing out and auto closing. The second version is OK as well, but then keep in mind that after you leaved the dialog using ESC key the keyboard focus must be returned back to the element which was used to open it and has to be clearly visible. And there's always a possibility that users don't know that they can use ESC to close the dialog.

[Pytal]

Thanks for your feedback @michaelnissenbaum!

After discussions with @PVince81 we've chosen go with option 2 as we have already been focus trapping many other UI elements and this will keep it consistent across the entire interface

[Pytal]

Transferred "contacts menu"

• [BITV] Contacts menu must be focus trapped #35638

[Pytal]

Transferred "Port notifications menu"

• [BITV] Notifications menu must be focus trapped notifications#1426

[Pytal]

Transferred "Port global search menu"

• [BITV] Global search menu must be focus trapped #36202

[Pytal]

Transferred "user menu"

• [BITV] User menu must be focus trapped #36201