Audit #1 – General Overview when logged in – No keyboard trap, but also no focus management in mobile main menu

[marcus-herrmann]

Connected to Audit 1, see #4300
1.2 General Overview when logged in, URL: https://ocis-a11y.owncloud.works/#/files/list

Issue

The test step is controlling where there is a focus trap somewhere (a place where you can't leave with the tab key alone, but have to refresh the whole page). This is not the case. But: When the mobile menu is open the focus is not moved into the menu and a user can still tab "behind" the menu and more importantly, not directly interact with the menu and its interactive items.

Remediation

Focus management: On opening the focus should be sent programmatically into the menu (its first interactive control). Vice versa on close (focus back on the menu trigger).

Furthermore, focus should be kept inside the menu when it's open. Recommendation: inert attribute, depending on the overall DOM structure, or https://github.com/posva/focus-trap-vue.

[pascalwengerter]

Closing this since #5018 is merged and we're waiting for feedback (and will open new tickets with the requested changes from the a11y audit)