Keyboard focus going on hidden elements in smaller resolutions

[SatyamSetia]

Describe the bug
When Navigation items are opened on smaller resolutions and keyboard is used for navigation elements on the page then focus goes to page elements (which are actually hidden) after nav list.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://accessibleweb.dev/ (in mobile view)
2. Click on hamburger menu icon on top right
3. Use keyboard to navigate through focusable elements
4. Focus will move to hidden elements after completing nav list

Expected behavior
Focus should not move to hidden elements.

Recording
https://github.com/AccessibleForAll/AccessibleWebDev/assets/17885747/7f25aeb7-878f-4b56-8f50-5d6b10c3d4ee

[SatyamSetia]

Hey, @EmmaDawsonDev
Just wanted to share my interest on working this bug fix.
My proposal for the fix - Removing page content from DOM when NavPrimaryMobile component is rendered.

[EmmaDawsonDev]

Hi @SatyamSetia thanks for noticing the issue. Since this is not a modal element it does not need to hold the focus and the page content should remain in the DOM. A better solution would be that the mobile menu closes when the last element is tabbed out of. This is how the theme picker element behaves. I will assign you.

[SatyamSetia]

Acknowledged 👍