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 indicator are not properly visible for the Package for Stores button. #4218

Closed
Anshi0420 opened this issue Aug 3, 2023 · 12 comments
Closed

[PWA Builder]:Keyboard focus indicator are not properly visible for the Package for Stores button. #4218

Anshi0420 opened this issue Aug 3, 2023 · 12 comments
Assignees
@Jaylyn-Barbee
Labels
a11y Accessibility-related bugs A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 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 3, 2023 •
edited
Loading

What happened?

Keyboard boundary indicator is not properly visible on the Package for Stores button., user does not get the information that keyboard focus is present on the button.

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. Navigate to the Package for Stores button with keyboard.
  4. Observe the Issue.

What do you expect to happen?

Keyboard boundary indicator must be white in color or some visible color so that it does not get mixed with the color of the button and properly be acknowledged by the users.

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

Additional context

Note:
This issue is repro at below buttons,

  1. For Generate package button that comes after activating this Package for Stores button.
  2. For Start button at https://www.pwabuilder.com/
  3. For Home tab at https://docs.pwabuilder.com/#/
  4. Issue also repro at HC modes.

User Experience:
If the focus boundary indicator will mix with the color of the button, then some users may get confused and will not get the information of the keyboard focus indicator.

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

Attachments:

https://github.com/pwa-builder/PWABuilder/assets/117908911/4e3bea73-8f97-4661-9809-9a03696e91a3
Note

2023-08-09.00-08-53.mp4
@Anshi0420 Anshi0420 added bug 🐛 needs triage 🔍 a11y Accessibility-related bugs 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 CT-July23 HCL-E+D labels Aug 3, 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 .

@Suriya617 Suriya617 mentioned this issue Aug 17, 2023
Closed
@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 indicator are not properly visible for the Package for Stores button. [PWA Builder]:Keyboard focus indicator are not properly visible for the Package for Stores button. Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Aug 28, 2023
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Aug 30, 2023
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Aug 30, 2023
Merged
3 tasks
github-merge-queue bot pushed a commit that referenced this issue Aug 30, 2023
@Jaylyn-Barbee
[Accessibility] Fixed focus no appearing on black buttons and label o…
fbc8643 
…n input box in Image Gen page. (#4335)

fixes [#4229](#4229),
[#4218](#4218) and
[#4228](#4228)
<!-- 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. -->
1. For the padding input on the image gen page there was no accessible
label
2. For some of our black buttons the focus ring wasn't showing when
tabbed over
3. Incorrect aria roles defined

## Describe the new behavior?
1. Input has a label
2. New visible focus ring.
3. Removed unnecessary definitions of role.

## PR Checklist

- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] 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
@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 .

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

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

@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Sep 21, 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 .

1 similar comment
@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 the A11yTTValidated Accessibility team tag for closed bugs label Jun 20, 2024
@Suriya617
Copy link
Collaborator

Closing this issue as fixed
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jaylyn-Barbee Jaylyn-Barbee

Labels
a11y Accessibility-related bugs A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web
Projects
PWABuilder
Status: Done ✔️
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Jaylyn-Barbee @Suriya617 @Anshi0420