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

[PWA Builder]: Keyboard Users Unable to Select or Deselect Action Icons Button. #4747

Closed
Anshi0420 opened this issue Jun 20, 2024 · 7 comments
Assignees
Labels
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-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team

Comments

@Anshi0420
Copy link
Collaborator

What happened?

Keyboard users cannot interact with the action icons button to select or deselect it using keyboard controls.

How do we reproduce the behavior?

Repro Steps:

  1. Open the above URL.
  2. Now navigate to the action icons buttons and select any action icons.
  3. Now try to select or deselect with keyboard these buttons.
  4. Observe the issue.

What do you expect to happen?

Keyboard users should be able to navigate to and activate the action icons button using standard keyboard controls, such as the Tab key to move focus and the Enter or Spacebar keys to toggle selection.

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

Observation:
Mouse users can select or deselect it by clicking.

User Impact:
Users who rely solely on keyboard navigation, including individuals with motor disabilities or those who prefer not to use a mouse, are unable to access or utilize the functionality associated with the action icons button.

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

Attachments:

MAS2.1.1_Keyboard.Users.Unable.to.Select.or.Deselect.Action.Icons.Button.mp4

Code_Snip

@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 Users Unable to Select or Deselect Action Icons Button. [PWA Builder]: Keyboard Users Unable to Select or Deselect Action Icons Button. Jun 20, 2024
Copy link
Contributor

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

Copy link
Contributor

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

3 similar comments
Copy link
Contributor

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

Copy link
Contributor

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

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 self-assigned this Aug 8, 2024
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Aug 8, 2024
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Aug 13, 2024
3 tasks
github-merge-queue bot pushed a commit that referenced this issue Aug 13, 2024
github-merge-queue bot pushed a commit that referenced this issue Aug 13, 2024
- Turns the todo-detail into just a box. Fixes nested button issue.
#4747
- #4746
Copy link
Contributor

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

jgw96 added a commit that referenced this issue Aug 22, 2024
fixes 
- #4763
- #4748
- #4783
- #4747

<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

<!-- - Bugfix -->
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->


## Describe the new behavior?


## PR Checklist

- [ ] Test: run `npm run test` and ensure that all tests pass
- [ ] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [ ] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Beth Pan <[email protected]>
Co-authored-by: Gleb Khmyznikov <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Jaylyn Barbee <[email protected]>
Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Mara'ah Lee <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <[email protected]>
Co-authored-by: Justin Willis (HE / HIM) <[email protected]>
Co-authored-by: Zach Teutsch <[email protected]>
Co-authored-by: vipul-bhojwani <[email protected]>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Federico Navarrete <[email protected]>
Co-authored-by: Toby Liu <[email protected]>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Jonas Thelemann <[email protected]>
Co-authored-by: Siraj Chokshi <[email protected]>
Co-authored-by: Thomas Peißl <[email protected]>
Co-authored-by: Migush <[email protected]>
Co-authored-by: Abdullhakim Sami Alshanqity <[email protected]>
Co-authored-by: mecmep <[email protected]>
Co-authored-by: Joel Limberg <[email protected]>
Co-authored-by: Pratik-k <[email protected]>
Co-authored-by: Maicon Carraro <[email protected]>
Copy link
Contributor

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

@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team
Projects
Status: Done ✔️
Development

No branches or pull requests

2 participants