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

[DOCS]: Insufficient Color Contrast for clear button in docs search input #4749

Closed

Anshi0420 opened this issue Jun 20, 2024 · 9 comments

Assignees

Labels

A11ySev2 A11yWCAG Accessibility [E+D] bug 🐛 CT-June24 HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder PWABuilder_Web

Collaborator

Anshi0420 commented Jun 20, 2024 •

edited by Jaylyn-Barbee

Loading

What happened?

The color contrast analyzer indicates that the Close icon button on the Share score dialog has a contrast ratio of 2.1:1, which is below the recommended 3:1 for non-text graphical elements.

How do we reproduce the behavior?

Repro Steps:

Go to docs.pwabuilder.com
Type some text in docs search input
Observe clear button incorrect contrast

What do you expect to happen?

Color should be within standard guidelines

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/#/
Tool: Color contrast Analyzer

Additional context

User Impact:
Users with visual impairments, such as low vision or color blindness, may struggle to perceive or locate the Close icon button on the Share score dialog due to inadequate color contrast.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast

Attachments:

Anshi0420 added bug 🐛 needs triage 🔍 A11yWCAG Accessibility [E+D] A11ySev2 HCL-E+D Product-PWABuilder labels

Jaylyn-Barbee changed the title ~~[PWA Builder-Blog]: Insufficient Color Contrast for Close Icon Button on Share Score Dialog.~~ [PWA Builder]: Insufficient Color Contrast for Close Icon Button on Share Score Dialog.

Anshi0420 added the CT-June24 label

Suriya617 mentioned this issue

Accessibility Full Conformance test pass on PWA Builder on web - June'24 #4739

Closed

Contributor

microsoft-github-policy-service bot commented Jul 4, 2024

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 bot added the needs attention 👋 label

Jaylyn-Barbee self-assigned this

Jaylyn-Barbee mentioned this issue

Fixing various accessbility bugs #4770

Merged

Jaylyn-Barbee added this to PWABuilder

Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder

jgw96 pushed a commit that referenced this issue


          Fixing various accessbility bugs (#4770)

d3245b9

Fixed:
#4259 
#4744
Half of #4749: For the search bar clear button, that comes from an
external component we have no control over.

Contributor

Jaylyn-Barbee commented Jul 8, 2024

PWABuilder issue fixed. Docs issue comes from a third party plugin

Contributor

microsoft-github-policy-service bot commented Jul 15, 2024

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

3 similar comments

Contributor

microsoft-github-policy-service bot commented Jul 23, 2024

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

Contributor

microsoft-github-policy-service bot commented Jul 31, 2024

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

Contributor

microsoft-github-policy-service bot commented Aug 7, 2024

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

Jaylyn-Barbee changed the title ~~[PWA Builder]: Insufficient Color Contrast for Close Icon Button on Share Score Dialog.~~ [DOCS]: Insufficient Color Contrast for clear button in docs search input

Jaylyn-Barbee moved this from In Review 🤔 to Todo 📃 in PWABuilder

Jaylyn-Barbee moved this from Todo 📃 to Blocked 🔒 in PWABuilder

Jaylyn-Barbee removed their assignment

Contributor

microsoft-github-policy-service bot commented Aug 16, 2024

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

1 similar comment

Contributor

microsoft-github-policy-service bot commented Aug 23, 2024

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

jgw96 self-assigned this

jgw96 added a commit that referenced this issue


          fix #4749

0b1b517

jgw96 mentioned this issue

Accessibility fixes #4795

Merged

3 tasks

jgw96 added a commit that referenced this issue


          Accessibility fixes (#4795)

05af36f

fixes #4750 
fixes #4749 
fixes #4754 

## 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: Accessibility fixes

Also added typescript as a dependency to fix a build issue with npm
start + updated shoelace to the latest version

## 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

Contributor

jgw96 commented Aug 27, 2024

Closed with the above PR

jgw96 closed this as completed

github-project-automation bot moved this from Blocked 🔒 to Done ✔️ in PWABuilder

Suriya617 added the PWABuilder_Web label

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