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]: Refresh icon and Available stores icon are not visible at High contrast Aquatic Mode. #4241

Closed
Anshi0420 opened this issue Aug 8, 2023 · 17 comments
Closed

[PWA Builder]: Refresh icon and Available stores icon are not visible at High contrast Aquatic Mode. #4241

Anshi0420 opened this issue Aug 8, 2023 · 17 comments
Assignees
@Jaylyn-Barbee
Labels
a11y Accessibility-related bugs A11ySev3 Accessibility Team tag - P3 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 8, 2023 •
edited
Loading

What happened?

Refresh icon and Available stores icon are not visible at High contrast Aquatic Mode.

How do we reproduce the behavior?

Pre-Requisites:
Go to Settings> Accessibility>Change the Contrast theme to Aquatic mode.

Repro Steps:

  1. Open the PWA Builder URL in Anaheim dev browser.
  2. PWA Builder home page will appear.
  3. Now observe the refresh icon and Available stores icon are visible or not.

What do you expect to happen?

Refresh icon and Available stores icons must be properly visible in Aquatic High Contrast mode.

What environment were you using?

Test Environment:
OS Build: Windows 11 Enterprise 22H2 (22623.1325)
Edge Browser: Version 22623.1325(Official build) dev (64-bit)
User ID: V-
URL: https://www.pwabuilder.com/reportcard?site=https://webboard.app

Additional context

Observation:
Issue does not repro at HC Desert Mode.

User Experience;
If the icons will not be visible at high contrast Aquatic mode, low vision users will not get the information of it and they and may get confused in accessing the UI properly.

WCAG Reference:
EN 301 User Preferences 11.07

Attachments:
hc
@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 A11ySev3 Accessibility Team tag - P3 items Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team HCL-E+D CT-July23 labels Aug 8, 2023
@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 .

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

@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Refresh icon and Available stores icon are not visible at High contrast Aquatic Mode. [PWA Builder]: Refresh icon and Available stores icon are not visible at High contrast Aquatic Mode. Aug 28, 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 .

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

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

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 .

@Jaylyn-Barbee Jaylyn-Barbee moved this to Todo 📃 in PWABuilder Oct 25, 2023
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Oct 25, 2023
@Jaylyn-Barbee Jaylyn-Barbee mentioned this issue Oct 26, 2023
Merged
3 tasks
@Jaylyn-Barbee Jaylyn-Barbee moved this from Todo 📃 to In Review 🤔 in PWABuilder Oct 26, 2023
github-merge-queue bot pushed a commit that referenced this issue Oct 27, 2023
@Jaylyn-Barbee @jgw96
[Accessibility] Added light icons for dark themes (#4479)
37eba5d 
fixes #4241
<!-- 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. -->
Our blackicons (svgs embedded in imgs) weren't changing color when dark
mode was activated on the OS level. So they were blending in to the
background (black on black).

## Describe the new behavior?
When dark mode is detected, our black icons become white.

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

---------

Co-authored-by: Justin Willis <jgw9617@gmail.com>
@Jaylyn-Barbee Jaylyn-Barbee moved this from In Review 🤔 to Merged to Staging 🔀 in PWABuilder Oct 30, 2023
@Jaylyn-Barbee Jaylyn-Barbee moved this from Merged to Staging 🔀 to Done ✔️ in PWABuilder Oct 31, 2023
@Anshi0420
Copy link
Collaborator Author

image
Closing this as fixed.

@Anshi0420 Anshi0420 added the A11yTTValidated Accessibility team tag for closed bugs label Dec 19, 2023
@Suriya617
Copy link
Collaborator

Closing this issue as fixed.

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 A11ySev3 Accessibility Team tag - P3 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