fix(NcAppSidebar): add focus trap on mobile

[ShGKme]

☑️ Resolves

• Fix [BITV] 9.1.3.2/3.1 - Mobile (responsive) view - After the menu button receives focus from the screen reader, visually hidden elements receive keyboard focus. It was not entirely clear during testing which elements were involved in this case. (2) nextcloud/server#41839

On mobile view, the sidebar is full-screen. But it doesn't have a focus trap. So the focus may fall into the main content below the sidebar.

🖼️ Screenshots

🏚️ Before	🏡 After
Focus is lost on the main content	It's a trap

🚧 Tasks

• Add a focus trap on mobile
• Add a header to the trap as it is fully visible

For discussion

• Add a navigation toggle button to the trap so a user can open navigation above the focus trap
  • Alternative — hide toggle navigation button on mobile
• Close the sidebar by ESC on mobile

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[ShGKme]

There is an issue with NcActions on mobile view now. But the same issue happens in NcAppNavigation, NcModal, and other components with the focus trap.

See: #4910

[JuliaKirschenheuter]

Works, great!

do we need a focus here

nextcloud-vue/src/components/NcAppSidebar/NcAppSidebar.vue

Lines 368 to 369 in 5e8aa01

	tabindex="0"
	@click="onFigureClick"

?

[ShGKme]

Works, great!

do we need a focus here

nextcloud-vue/src/components/NcAppSidebar/NcAppSidebar.vue

Lines 368 to 369 in 5e8aa01

	tabindex="0"
	@click="onFigureClick"

?

Yep, but it should also have a button role and have a label

[jancborchardt]

Seems like an important improvement! 👍

[ShGKme]

Rebased onto master