From d22a24d667a16c39d4a4ec5f59b248f990fa029e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 7 Aug 2024 08:54:48 +0200
Subject: [PATCH] fix(material/list): checkmark not visible in high contrast
 mode (#29546)

We had a patch to show the checkmark in high contrast mode, but it was only applied to `mat-checkbox`. These changes move it to the common styles so it also shows up for `mat-list-option`.
---
 src/material/checkbox/_checkbox-common.scss | 16 ++++++++++++++++
 src/material/checkbox/checkbox.scss         | 18 ------------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/material/checkbox/_checkbox-common.scss b/src/material/checkbox/_checkbox-common.scss
index 20828a77e811..ea2b03748564 100644
--- a/src/material/checkbox/_checkbox-common.scss
+++ b/src/material/checkbox/_checkbox-common.scss
@@ -2,6 +2,7 @@
 @use '@angular/cdk';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 $_path-length: 29.7833385;
 $_transition-duration: 90ms;
@@ -64,6 +65,10 @@ $_fallback-size: 40px;
   .mdc-checkbox--disabled {
     cursor: default;
     pointer-events: none;
+
+    @include cdk.high-contrast(active, off) {
+      opacity: 0.5;
+    }
   }
 
   .mdc-checkbox__background {
@@ -82,6 +87,9 @@ $_fallback-size: 40px;
     transition: background-color $_transition-duration $_exit-curve,
                 border-color $_transition-duration $_exit-curve;
 
+    // Force browser to show background-color when using the print function
+    @include vendor-prefixes.color-adjust(exact);
+
     @include token-utils.use-tokens($prefix, $slots) {
       $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
       $offset: calc((#{$layer-size} - #{$_icon-size}) / 2);
@@ -167,6 +175,10 @@ $_fallback-size: 40px;
       // Always apply the color since the element becomes `opacity: 0`
       // when unchecked. This makes the animation look better.
       @include token-utils.create-token-slot(color, selected-checkmark-color);
+
+      @include cdk.high-contrast(active, off) {
+        color: CanvasText;
+      }
     }
   }
 
@@ -175,6 +187,10 @@ $_fallback-size: 40px;
       &, &.mat-mdc-checkbox-disabled-interactive {
         .mdc-checkbox__checkmark {
           @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
+
+          @include cdk.high-contrast(active, off) {
+            color: CanvasText;
+          }
         }
       }
     }
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index e21fcfc69279..5126480836e4 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -1,6 +1,4 @@
-@use '@angular/cdk';
 @use '../core/style/layout-common';
-@use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
 @use '../core/tokens/token-utils';
 @use './checkbox-common';
@@ -17,11 +15,6 @@
   // Disable the browser's tap highlight since we indicate state with the ripple instead.
   -webkit-tap-highlight-color: transparent;
 
-  .mdc-checkbox__background {
-    // Force browser to show background-color when using the print function
-    @include vendor-prefixes.color-adjust(exact);
-  }
-
   // Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
   // user of this. Therefore we add the pointer cursor on top of MDC's styles.
   label {
@@ -69,17 +62,6 @@
     display: none;
   }
 
-  @include cdk.high-contrast(active, off) {
-    &.mat-mdc-checkbox-disabled {
-      opacity: 0.5;
-    }
-
-    .mdc-checkbox__checkmark {
-      --mdc-checkbox-selected-checkmark-color: CanvasText;
-      --mdc-checkbox-disabled-selected-checkmark-color: CanvasText;
-    }
-  }
-
   // Apply base styles to the MDC ripple when not hovered, focused, or pressed.
   .mdc-checkbox__ripple {
     opacity: 0;