{Linked:Bug214444; LinkedBug} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu.

[Anshi0420]

What happened?

Keyboard focus is moving to the hidden controls which is present inside the collapse hamburger menu.

How do we reproduce the behavior?

Repro Steps:

1. Open the PWA Builder URL in Anaheim dev browser.
2. PWA Builder page will appear.
3. Collapse the hamburger menu.
4. Now navigate from the top of the page.
5. Observe the issue.

What do you expect to happen?

Keyboard focus should not move inside the hamburger menu when it is in collapsed state.

What environment were you using?

Test Environment:
OS Build: Windows 11 Enterprise Insider Preview 22H2 (23493.1000)
Edge Browser: Version 115.0.1880.3 (Official build) dev (64-bit)
User ID: V-
URL: https://docs.pwabuilder.com/#/

Additional context

Note:

1. Focus should not land on the non-interactive code frame at the https://docs.pwabuilder.com/#/home/sw-intro
2. Both issues are repro at all pages.

User Experience:
If the keyboard focus will move to the hidden elements, then the keyboard dependent users may face difficulties in navigating at the UI properly and they may get confused.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Attachments:

focus.mp4

Note Attachments:

2023-08-11.18-15-50.mp4

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .