[BITV] 9.2.4.3/3.1 - Note: When the Settings menu is open, it is only possible to exit the menu using the ESC key. (3)

[JuliaKirschenheuter]

https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-89806fe784-v3-n1

9.2.4.3/4.1 - https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-89806fe784-v4-n1

9.2.4.3/11.1 - https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-89806fe784-v11-n1

[szaimen]

What is the expected behaviour here?

[ShGKme]

What is the expected behaviour here?

This menu should work the same way as other menus and NcAction:

• Arrows should be used to navigate between elements of an interactive component
• TAB should be used to navigate between interactive components

So, here pressing TAB should close the menu and navigate to the next interactive component. Same as on desktop apps.

[Pytal]

I have been looking into the W3 patterns and possible implementations for this case, ⬆⬇⬅➡, Tab nav etc., but this pattern does not make sense in this case as we'd already concluded that this is not an application menu but a FlyOut menu, ref https://github.com/nextcloud/server/issues/37095#issuecomment-1711517641

Can you confirm that the menu in the screenshot above is a FlyOut menu and therefore does not require application menu-like navigation @michaelnissenbaum?

edit: Also for escaping I believe we had already agreed that focus trapping this, though not required, was valid so only being able to exit the menu with Esc or clicking outside is sufficient

[michaelnissenbaum]

From my perspective, this is a FlyOut menu. Navigation through the menu items should be done using the TAB key. When the last item in the menu is reached, it would be best if pressing the TAB key shifts the keyboard focus to the next interactive element in the DOM while simultaneously closing the menu. As an example, you can refer to the following page, which provides a menu button in its mobile view - https://www.bmas.de/EN/Service/Press/News/2020/online-accessibility-monitoring-authority.html.

[szaimen]

I am not sure how this should work in the end but if I read correctly reaching the end of the list should directly focus on the next element in the dom, no? Currently it seems like still the ESC button is enforced at least on stable28

See

https://github.com/nextcloud/server/assets/42591237/d210d6e1-ff34-41be-8f12-8dc2f8274ed5

[Pytal]

I am not sure how this should work in the end but if I read correctly reaching the end of the list should directly focus on the next element in the dom, no?

Yes that's the correct behaviour and works on master, still needs stable28 to be unfrozen for dep update merge