Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Anshi0420 opened this issue Aug 11, 2023 · 9 comments
Labels
A11y-3P A11yExternal A11ySev2 Accessibility Team tag - P2 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 CT-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web

Comments

@Anshi0420
Copy link
Collaborator

Anshi0420 commented Aug 11, 2023

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
@Anshi0420 Anshi0420 added bug 🐛 needs triage 🔍 A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft A11ySev2 Accessibility Team tag - P2 items Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team HCL-E+D CT-July23 labels Aug 11, 2023
@microsoft-github-policy-service
Copy link
Contributor

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

2 similar comments
@microsoft-github-policy-service
Copy link
Contributor

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
Copy link
Contributor

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

@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. Aug 28, 2023
@maraah1
Copy link
Collaborator

maraah1 commented Aug 30, 2023

@Anshi0420 Created a separate issue for the second attachment as it appears to be unrelated to this ticket subject. Can be found here: #4340

@maraah1 maraah1 self-assigned this Aug 30, 2023
@maraah1 maraah1 moved this to In Progress 🚧 in PWABuilder Sep 5, 2023
@microsoft-github-policy-service
Copy link
Contributor

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

2 similar comments
@microsoft-github-policy-service
Copy link
Contributor

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
Copy link
Contributor

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

@Jaylyn-Barbee Jaylyn-Barbee removed the status in PWABuilder Oct 2, 2023
@Jaylyn-Barbee Jaylyn-Barbee moved this to Blocked 🔒 in PWABuilder Oct 4, 2023
@Anshi0420 Anshi0420 changed the title [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. {Linked:Bug214444, LinkedBug} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. Oct 17, 2023
@Suriya617
Copy link
Collaborator

IRT partner bug ID for tracking: https://dev.azure.com/CSS-IRT/CSS%20IRT/_workitems/edit/214444

@github-project-automation github-project-automation bot moved this from Blocked 🔒 to Done ✔️ in PWABuilder Oct 18, 2023
@Anshi0420 Anshi0420 changed the title {Linked:Bug214444, LinkedBug} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. {Linked:Bug214444} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. Oct 20, 2023
@Anshi0420 Anshi0420 changed the title {Linked:Bug214444} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. {Linked:Bug214444; LinkedBug} [DOCS]: Keyboard focus is moving to the hidden elements present inside the collapsed hamburger menu. Oct 20, 2023
@Suriya617
Copy link
Collaborator

Suriya617 commented Dec 4, 2023

@Jaylyn-Barbee Comment from 3P team:

Third party has closed this issue as fixed with the below comment-

Fixed via #2253 (Opens in new window or tab) and #2265 (Opens in new window or tab).
These updates will be available in the next release. Until then, you can verify the changes by visiting the develop branch preview (Opens in new window or tab). Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y-3P A11yExternal A11ySev2 Accessibility Team tag - P2 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 CT-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web
Projects
Status: Done ✔️
Development

No branches or pull requests

3 participants