Trap focus within the sidenav on small screens [WD-2277]

[lorumic]

Done

Added an example of how the focus should be controlled within a sidenav drawer to the already existing JS code of the sidenav toggle script.

Fixes #4560

QA

• Open a sidenav example.
• Resize the window so that its width becomes lower than 1036px. The sidenav switches from "pinned" to "drawer" mode.
• Hit the Tab key multiple times to check that the focus is trapped within the sidenav.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-4680.demos.haus

[ClementChaumel]

In terms of QA, it's working on the example page but not on the main/docs one. Is that expected?

[lorumic]

In terms of QA, it's working on the example page but not on the main/docs one. Is that expected?

I am just checking and I expected it to work there as well - just like any other place where the docs/examples/patterns/side-navigation/_toggle_script.js is included - but you're right, it doesn't.

Could it be that there is something with the embedded-example mechanism that prevents it from working in the docs page? I see that the same happens for the modal, from which the same behaviour (focus trap) was imported: it is working as expected in the example page, but not in the docs page.

[bartaz]

I'm not sure if it works as expected… When using Tab to go through the items on the side navigation (in mobile mode) the tab focus still doesn't return to top of sidenav but leaves side navigation and focuses on first thing on the page.

[lorumic]

I'm not sure if it works as expected… When using Tab to go through the items on the side navigation (in mobile mode) the tab focus still doesn't return to top of sidenav but leaves side navigation and focuses on first thing on the page.

If you're talking about the docs page, I haven't changed anything yet. I just rebased.
In the examples page, it works as intended in mobile mode as well.

[bartaz]

I'm not sure if it does:

When focus leaves the last link in the navigation it disappears (it is on a toggle button that is below the navigation) instead of going back to top of navigation.

Maybe it's casued by the fact that this button on the page is part of p-side-navigation component as well? Inside the same parent? The focus needs to be trapped inside the p-side-navigation__drawer I think.

[lorumic]

@bartaz Sorry for the misunderstanding about which element should the focus be trapped into. It is now trapped inside the p-side-navigation__drawer.

[bartaz]

@lorumic Looks good (just small variable rename suggestion), could you apply this to Vanilla docs as well?

[bartaz]

Well done, thanks!