fix(a11y): fixing Selectable Tile HCM accessibility (#6932)

* fix(a11y): selectable tile HCM fix * fix(a11y): selectable tile expandable HCM fix Co-authored-by: Ricardo Henriquez <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Oct 2, 2020 · 1abe959 · 1abe959
1 parent 282bdd4
commit 1abe959
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -30,6 +30,13 @@
 
     &:focus {
       @include focus-outline('outline');
+
+      // Windows, Firefox HCM Fix
+      @media screen and (-ms-high-contrast: active),
+        screen and (prefers-contrast) {
+        outline: 3px solid transparent;
+        outline-offset: -3px;
+      }
     }
   }
 
@@ -113,6 +120,13 @@
       transform-origin: center;
       transition: $duration--fast-02 motion(standard, productive);
       fill: $ui-05;
+
+      // 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;
+      }
     }
 
     &:hover {
@@ -176,6 +190,13 @@
     > .#{$prefix}--tile__checkmark
     svg {
     fill: $ui-05;
+
+    // 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}--tile-content {