fix(a11y): tooltip HCM fix (#7031)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 21, 2020 · 54d9079 · 54d9079
1 parent dc6b07d
commit 54d9079
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -334,6 +334,13 @@
 
   .#{$prefix}--tooltip__trigger svg {
     fill: $icon-02;
+
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      fill: ButtonText;
+    }
   }
 
   .#{$prefix}--tooltip__trigger:not(.#{$prefix}--btn--icon-only) {
@@ -376,6 +383,13 @@
     background: $inverse-02;
     border-radius: rem(2px);
 
+    // Windows, Firefox HCM Fix
+    @media screen and (-ms-high-contrast: active),
+      screen and (prefers-contrast) {
+      // `ButtonText` is a CSS2 system color to help improve colors in HCM
+      border: 1px solid transparent;
+    }
+
     // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip
     &:focus {
       outline: 0;
@@ -554,6 +568,13 @@
     &:focus {
       svg {
         fill: $icon-02;
+
+        // Windows, Firefox HCM Fix
+        @media screen and (-ms-high-contrast: active),
+          screen and (prefers-contrast) {
+          // `ButtonText` is a CSS2 system color to help improve colors in HCM
+          fill: ButtonText;
+        }
       }
     }
   }

diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
@@ -60,9 +60,8 @@
     width: auto;
   }
 
-  // Windows HCM Fix
-  @media screen and (-ms-high-contrast: active) {
-    // `GrayText` is a CSS2 system color to help improve colors in HCM
+  // Windows, Firefox HCM Fix
+  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
     border: 1px solid transparent;
   }
 }