W-14337923: Fix a11y color contrasts (#1534)

* fix a11y color contrasts
SalesforceCommerceCloud · Nov 10, 2023 · 2fc3d35 · 2fc3d35
1 parent 2a721cf
commit 2fc3d35
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,4 +1,6 @@
 ## v2.2.0-dev (Nov 3, 2023)
+- (A11y) Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)
+
 ## v2.1.0 (Nov 3, 2023)
 
 - Support Storefront Preview 

diff --git a/packages/template-retail-react-app/app/pages/product-list/partials/color-refinements.jsx b/packages/template-retail-react-app/app/pages/product-list/partials/color-refinements.jsx
@@ -50,10 +50,7 @@ const ColorRefinements = ({filter, toggleFilter, selectedFilters}) => {
                                     <Center
                                         {...styles.swatchButton}
                                         marginRight={0}
-                                        border={
-                                            value.label.toLowerCase() === 'white' &&
-                                            '1px solid black'
-                                        }
+                                        border="1px solid black"
                                     >
                                         <Box
                                             marginRight={0}

diff --git a/packages/template-retail-react-app/app/theme/components/base/checkbox.js b/packages/template-retail-react-app/app/theme/components/base/checkbox.js
@@ -12,6 +12,7 @@ export default {
         },
         control: {
             marginTop: '2px',
+            borderColor: 'gray.500',
             _checked: {
                 backgroundColor: 'blue.600',
                 borderColor: 'blue.600',

diff --git a/packages/template-retail-react-app/app/theme/components/base/input.js b/packages/template-retail-react-app/app/theme/components/base/input.js
@@ -21,11 +21,17 @@ export default {
         }
     },
     variants: {
+        outline: {
+            field: {
+                borderColor: 'gray.500'
+            }
+        },
         filled: {
             // we use filled variant for
             // search input
             field: {
-                backgroundColor: 'gray.50',
+                borderColor: 'gray.600',
+                backgroundColor: 'gray.100',
                 _focus: {
                     backgroundColor: 'white'
                 },

diff --git a/packages/template-retail-react-app/app/theme/foundations/shadows.js b/packages/template-retail-react-app/app/theme/foundations/shadows.js
@@ -5,5 +5,6 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 export default {
-    top: '0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)'
+    top: '0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)',
+    outline: '0 0 0 3px var(--chakra-colors-blue-500)'
 }