fix(NcAppNavigation): add focus trap on mobile and improve a11y

[ShGKme]

☑️ Resolves

• A part of [BITV] 9.1.4.10/3.2 - At a browser window width of 320 CSS pixels (or at a browser window width of 1280 CSS pixels and 400% zoom enlargement), with the page navigation open on the left side, the contents are displayed incorrectly (partially cut off) during keyboard navigation. (2) nextcloud/server#36964

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Add focus trap, and activate it on open navigation on mobile, deactivate otherwise
• Improve a11y a bit:
  • Use <nav> instead of role="navigation" cc @JuliaKirschenheuter to confirm that this is fine
  • Move the toggle button out from the navigation
  • Add ariaLabel and ariaLabelledBy props to be set on navigation
• Close navigation by ESC on mobile
• Update tests
  • Test by class instead of internal data property (testing is closed or open state by class also is not great, but we should not test by internal implementation as data property is not a part of the component interface). Alternative: aria-hidden.
  • Add mobile state test
  • Add a11y tests

🏁 Checklist

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

[szaimen]

node tests seems to be failing

[szaimen]

Tested and the focus trap seems to work :)

However the ESC key doesnt toggle the navigation currently

Aufzeichnung.2023-10-12.125445.mp4

[szaimen]

This does not seem to work currently in my testing

[szaimen]

the reason was probably that I tested on a screen with higher res than 1024px (so ismobile was false)

[ShGKme]

PR Status update: checking issue with Talk loosing tab navigation with focus trap

[ShGKme]

The Talk issue is related but appears in any focus trap container with input with the trailing button visible only on focus.

What happens:

1. Tab -> Focus on input.
2. Now the "Clear" trailing button is visible.
3. Tab -> Focus the trailing button.
4. Tab -> issue
   1. Blurring focus from the trailing button hides it, and removes it from the DOM
   2. focus-trap with MutationObserver sees it and thinks that the current focused element is removed
   3. Then focus-trap moves the focus to the first element of the container

Source:
https://github.com/focus-trap/focus-trap/blob/a49e9b247bb4d15e3a16ddcc9e6b847a62725c77/index.js#L862-L875

This behavior is not configurable.

IMO, Possible solutions could be:

• Fix it on the focus-trap side
• On Nextcloud/vue: Do not remove the trailing button from the DOM, only hide it
• On Talk: Hide the trailing button with a delay

[susnux]

Maybe report this upstream, but

On Talk: Do not remove the trailing button from the DOM, only hide it

Sounds the best for now.