From 1abe95929756b9be4b4d0e5ac28aa45af7db5b15 Mon Sep 17 00:00:00 2001
From: Ricardo Henriquez <ricardojhenriquez@gmail.com>
Date: Fri, 2 Oct 2020 12:46:49 -0500
Subject: [PATCH] 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 <Ricardo@Ricardos-MBP.lan>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
---
 .../components/src/components/tile/_tile.scss | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index 6d577922b78a..2d8a8d27e6c5 100644
--- 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 {