Merge branch 'main' into renovate/carbon-telemetry-0.x

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');
     }
   }
 

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;
     }