From f2d66511323e122eb3ac775c5b4a517e9fe1f02f Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Fri, 18 Mar 2022 13:55:51 -0500
Subject: [PATCH] fix(utilities): broaden HCM mixin to include macos query
 (#10935)

* fix(utilities): broaden HCM mixin to include macos query

* fix(Utilites): update hcm media query

* fix(Utilities): remove prefers-contrast query

* fix(RadioButton): update styling to use HCM mixin
---
 .../scss/components/radio-button/_radio-button.scss  | 12 ++----------
 .../styles/scss/utilities/_high-contrast-mode.scss   |  6 ++----
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
index e5b0ccedfa3e..f5637247e311 100644
--- a/packages/styles/scss/components/radio-button/_radio-button.scss
+++ b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -15,6 +15,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert' as *;
 @use '../../config' as *;
@@ -109,16 +110,7 @@ $radio-border-width: 1px !default;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        background-color: WindowText;
-      }
-
-      // Firefox only HCM solution
-      @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        border: 2px solid WindowText;
-      }
+      @include high-contrast-mode('icon-fill');
     }
   }
 
diff --git a/packages/styles/scss/utilities/_high-contrast-mode.scss b/packages/styles/scss/utilities/_high-contrast-mode.scss
index 74252afe00c6..5bf28b1f0dc6 100644
--- a/packages/styles/scss/utilities/_high-contrast-mode.scss
+++ b/packages/styles/scss/utilities/_high-contrast-mode.scss
@@ -5,15 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// Windows HCM Mixin
+/// High Contrast Mode mixin for Windows and macOS
 /// @access public
 /// @example @include high-contrast-mode;
 /// @group utilities
 /// Set HCM styles at the end of each file to ensure they are not overwritten
 @mixin high-contrast-mode($type: '') {
-  @media screen and (-ms-high-contrast: active),
-    (forced-colors: active),
-    (prefers-contrast) {
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
     @if ($type == 'icon-fill') {
       fill: ButtonText;
     }