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

{Freeway-Bug}[PWA Builder]: Color contrast ratio fails for the URL after pasting inside the 'enter the URL' edit field. #4743

Closed

Anshi0420 opened this issue Jun 20, 2024 · 15 comments

Assignees

Labels

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

Collaborator

Anshi0420 commented Jun 20, 2024

What happened?

When a URL is pasted into the 'enter the URL' edit field, the color contrast ratio between the text color and the background fails to meet accessibility standards i.e., 2.8:1.

How do we reproduce the behavior?

Repro Steps:

Open the above URL.
Navigate to the 'Enter URL' edit field.
Pase any URL.
Check the color contrast ratio with the color contrast analyzer tool.
Observe the issue.

What do you expect to happen?

The text color and background should ensure a sufficient color contrast ratio (typically 4.5:1 for normal text) after a URL is pasted into the edit field.

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

Additional context

User Impact:
Users with visual impairments, such as low vision or color blindness, may find it difficult or impossible to read the pasted URL in the edit field due to inadequate color contrast.

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

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]: Color contrast ratio fails for the URL after pasting inside the 'enter the URL' edit field.~~ [PWA Builder]: Color contrast ratio fails for the URL after pasting inside the 'enter the URL' edit field.

Anshi0420 added the CT-June24 label

Suriya617 mentioned this issue

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

Closed

Anshi0420 changed the title ~~[PWA Builder]: Color contrast ratio fails for the URL after pasting inside the 'enter the URL' edit field.~~ {Freeway-Bug}[PWA Builder]: Color contrast ratio fails for the URL after pasting inside the 'enter the URL' edit field.

microsoft-github-policy-service bot added the needs attention 👋 label

Contributor

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

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

4 similar comments

Contributor

microsoft-github-policy-service bot commented Jul 13, 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 20, 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 29, 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 5, 2024

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

Jaylyn-Barbee added this to PWABuilder

Jaylyn-Barbee moved this to Blocked 🔒 in PWABuilder

Jaylyn-Barbee self-assigned this

Jaylyn-Barbee added the cannot reproduce label

Jaylyn-Barbee assigned jgw96 and unassigned Jaylyn-Barbee

Contributor

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

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


          fixes #4743

7b24362

jgw96 mentioned this issue

fixes #4743 #4797

Merged

3 tasks

jgw96 added a commit that referenced this issue


          fixes #4743 (#4797)

535d3ad

fixes #4743 
<!-- 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. -->
When the input was autofilled, the color was a bright blue that did not
have good contrast.

## Describe the new behavior?
It now uses our standard input color.

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

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

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

2 similar comments

Contributor

microsoft-github-policy-service bot commented Sep 6, 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 Sep 16, 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 Sep 24, 2024

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

4 similar comments

Contributor

microsoft-github-policy-service bot commented Oct 2, 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 Oct 9, 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 Oct 17, 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 Oct 27, 2024

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

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

Contributor

Jaylyn-Barbee commented Oct 28, 2024

Fixed by #4797

Jaylyn-Barbee closed this as completed

github-project-automation bot moved this from Todo 📃 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

Labels

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