From 2a68153848715dfdbc3cd856e58640f795f27374 Mon Sep 17 00:00:00 2001 From: Ricardo Henriquez Date: Tue, 29 Sep 2020 11:44:23 -0500 Subject: [PATCH 1/2] fix(a11y): selectable tile HCM fix --- packages/components/src/components/tile/_tile.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss index 6d577922b78a..9143bfab52ea 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; + } } } @@ -176,6 +183,12 @@ > .#{$prefix}--tile__checkmark svg { fill: $ui-05; + + @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 { From 30bb8836b7ac89cf6cb2c5f52efd4ff196b103dd Mon Sep 17 00:00:00 2001 From: Ricardo Henriquez Date: Thu, 1 Oct 2020 10:15:51 -0500 Subject: [PATCH 2/2] fix(a11y): selectable tile expandable HCM fix --- packages/components/src/components/tile/_tile.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss index 9143bfab52ea..2d8a8d27e6c5 100644 --- a/packages/components/src/components/tile/_tile.scss +++ b/packages/components/src/components/tile/_tile.scss @@ -120,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 { @@ -184,6 +191,7 @@ 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