AC-2490::Contrast insufficient - product image selected state indicat…

[glo71317]

Description

Contrast insufficient - product image selected state indicator (Product Detail Page)

Reproduction Steps
select "Blouses & Shirts" > select "Susanna Draped Tank" - [NODE][body>div:nth-of-type(1)>:nth-child(1)>:nth-child(3)]

1. Use a color contrast checker to compare foreground and background colors.

Actual Behavior
When a product image button is selected, the selection indicator does not meet the required contrast ratio of 3:1.

The style is provided by a box-shadow:
box-shadow: 0 0 10px 0 rgb(var(--venia-global-color-teal));
{}venia-global-color-teal: var({-}-venia-global-color-blue-400);
--venia-global-color-blue-400: 61 132 255;

This style results in a sampled hex color against a white background of #B5D0FF, with a contrast ratio of 1.6:1.

When sufficient contrast ratios are not met, users with low vision may have trouble identifying user interface components.

Expected Behavior
Ensure that visual indicators of state provide a contrast ratio of at least 3:1 against the background color. Refer to the Color Contrast Checker Tool for assistance: https://www.levelaccess.com/compliance-resource/color-contrast-checker

Related Issue

Closes https://jira.corp.magento.com/browse/AC-2490.

Verification Steps

Pre-Conditions:

1. Have Magento instance with sample data installed
2. Make sure to have pwa studio installed
3. Make sure to have a customer login for front end login

Manual Steps executed:

Login to venia > navigate to product detail page
navigate to serach button and serach any product
observe the Use a color contrast checker to compare foreground and background colors

✖️ Behaviour Before The Fix :
When a product image button is selected, the selection indicator does not meet the required contrast ratio of 3:1.

✔️Behaviour After The Fix: the selection indicator does meet the required contrast ratio of 3:1.

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

Resolved issues:

1. resolves [Issue] AC-2490::Contrast insufficient - product image selected state indicat… #3834: AC-2490::Contrast insufficient - product image selected state indicat…

[pwa-studio-bot]

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Associated JIRA tickets: AC-2490.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against 0f5ca0c

[glo71317]

run all tests

[supernova-at]

@magento create issue from PR

[ericeoeur]

This has passed review. Please provide a version label when able.