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.

Sign up for GitHub

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

Jump to bottom

[PWA Builder]: Keyboard Accessibility Issue with Scrollable Content. #4760

Open
Anshi0420 opened this issue Jun 26, 2024 · 21 comments
Open

[PWA Builder]: Keyboard Accessibility Issue with Scrollable Content. #4760

Anshi0420 opened this issue Jun 26, 2024 · 21 comments
Labels
A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11yCT A11ySev3 Accessibility Team tag - P3 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 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

What happened?

Elements that contain scrollable content (such as divs or iframes) cannot be scrolled using keyboard navigation (e.g., arrow keys or tab + arrow keys).

How do we reproduce the behavior?

Repro Steps:

  1. Open the given PWA Builder URL in Anaheim dev browser.
  2. Run the Fast pass from the AI4W.
  3. Observe the issue.

What do you expect to happen?

Users should be able to navigate through and scroll within elements containing scrollable content using keyboard controls, ensuring all content within these elements is reachable and usable.

What environment were you using?

Test Environment:

OS Build: Windows 11 Enterprise Insider Preview 24H2 (26120.461)
Edge Browser: Version 123.0.2400.1 (Official build) dev (64-bit)
URL: https://docs.pwabuilder.com/#/home/pwa-workshop
Tool: AI4W

Additional context

Element path:
.language-bash[data-lang="bash"]:nth-child(45) > .language-bash

How to fix:
Fix any of the following:
Element should have focusable content
Element should be focusable

User Impact:
Users who rely solely on keyboard navigation (e.g., individuals with mobility impairments or who cannot use a mouse) may be unable to access all content within scrollable elements.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/keyboard

Attachments:

image

image

image

image
@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 A11ySev3 Accessibility Team tag - P3 items Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team HCL-E+D CT-June24 A11yCT labels Jun 26, 2024
@Suriya617 Suriya617 mentioned this issue Jun 27, 2024
Closed
@microsoft-github-policy-service 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 .

17 similar comments
@microsoft-github-policy-service 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 .

1 similar comment
@microsoft-github-policy-service 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 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11yCT A11ySev3 Accessibility Team tag - P3 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Suriya617 @Anshi0420