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 Focus Not Visible on Action Items Expandable Button. #4745

Open
Anshi0420 opened this issue Jun 20, 2024 · 19 comments
Open

[PWA Builder]: Keyboard Focus Not Visible on Action Items Expandable Button. #4745

Anshi0420 opened this issue Jun 20, 2024 · 19 comments
Labels
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

Comments

@Anshi0420
Copy link
Collaborator

Anshi0420 commented Jun 20, 2024 •
edited
Loading

What happened?

When navigating using the keyboard, the focus indicator is not visible on the Action items expandable button.

How do we reproduce the behavior?

Repro Steps:

  1. Open the above URL.
  2. Navigate to the Action Items expandible button with keyboard.
  3. Observe the keyboard focus.

What do you expect to happen?

The Action items expandable button should clearly indicate keyboard focus when navigated to using the keyboard, following accessibility standards.

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://www.pwabuilder.com/reportcard?site=https://webboard.app

Additional context

Note:

  1. Keyboard focus is not visible on the View details button present on this page.
  2. Keyboard focus is not visible on the close button inside the Share dialog.

User Impact:
Users who rely on keyboard navigation, such as those with motor disabilities or who prefer not to use a mouse, may find it difficult to determine which element is currently focused on the screen.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/focus-visible

Attachments:

MAS2.4.7_Keyboard.Focus.Not.Visible.on.Action.Items.Expandable.Button.mp4
NOTE1_KB.not.visible.on.view.details.button.mp4

Note2_KB not visible on close button inside share dialog
@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 HCL-E+D Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team labels Jun 20, 2024
@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Keyboard Focus Not Visible on Action Items Expandable Button. [PWA Builder]: Keyboard Focus Not Visible on Action Items Expandable Button. Jun 20, 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 .

@Suriya617 Suriya617 added A11ySev3 Accessibility Team tag - P3 items and removed A11ySev2 Accessibility Team tag - P2 items labels Jul 9, 2024
@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 .

15 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 .

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
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
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Suriya617 @Anshi0420