fix(storefront): BCTHEME-457 Update focus tooltip styles contrast to …

…achieve accessibility AA Complaince
bigcommerce · Apr 29, 2021 · 30d3da2 · 30d3da2
1 parent dd58709
commit 30d3da2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047)
 - Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034)
 - Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032)
 - Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022)

diff --git a/assets/scss/common/_focus-tooltip.scss b/assets/scss/common/_focus-tooltip.scss
@@ -6,14 +6,14 @@
             top: 50%;
             border-width: remCalc(10px);
             border-style: solid;
-            border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent;
+            border-color: transparent transparent $focusTooltip-backgroundColor transparent;
         }
 
         &:after {
             content: attr($attr);
             padding: remCalc(4px) remCalc(6px);
-            background-color: $adminBar-tooltip-bg-backgroundColor;
-            color: white;
+            background-color: $focusTooltip-backgroundColor;
+            color: $focusTooltip-textColor;
             position: absolute;
             font-size: 1rem;
             white-space: nowrap;

diff --git a/assets/scss/settings/global/color/_color.scss b/assets/scss/settings/global/color/_color.scss
@@ -67,3 +67,9 @@ $color-textSecondary-active:        stencilColor("color-textSecondary--active");
 $color-textLink:                    stencilColor("color-textLink");
 $color-textLink-hover:              stencilColor("color-textLink--hover");
 $color-textLink-active:             stencilColor("color-textLink--active");
+
+
+// Tooltips
+// -----------------------------------------------------------------------------
+$focusTooltip-textColor:            stencilColor("focusTooltip-textColor");
+$focusTooltip-backgroundColor:      stencilColor("focusTooltip-backgroundColor");
diff --git a/config.json b/config.json
@@ -309,6 +309,8 @@
     "color_badge_product_sold_out_badges": "#007dc6",
     "color_text_product_sold_out_badges": "#ffffff",
     "color_hover_product_sold_out_badges": "#000000",
+    "focusTooltip-textColor": "#ffffff",
+    "focusTooltip-backgroundColor": "#313440",
     "restrict_to_login": false,
     "swatch_option_size": "22x22",
     "social_icon_placement_top": false,
@@ -593,7 +595,9 @@
         "color_hover_product_sale_badges": "#000000",
         "color_badge_product_sold_out_badges": "#007dc6",
         "color_text_product_sold_out_badges": "#ffffff",
-        "color_hover_product_sold_out_badges": "#000000"
+        "color_hover_product_sold_out_badges": "#000000",
+        "focusTooltip-textColor": "#666666",
+        "focusTooltip-backgroundColor": "#ffffff"
       }
     },
     {
@@ -801,7 +805,9 @@
         "color_hover_product_sale_badges": "#000000",
         "color_badge_product_sold_out_badges": "#007dc6",
         "color_text_product_sold_out_badges": "#ffffff",
-        "color_hover_product_sold_out_badges": "#000000"
+        "color_hover_product_sold_out_badges": "#000000",
+        "focusTooltip-textColor": "#ffffff",
+        "focusTooltip-backgroundColor": "#313440"
       }
     }
   ]