From ea5e5e04dcfbb148364b5b7cb2eb1804840c5601 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 2 Apr 2021 09:03:59 +0200
Subject: [PATCH] fix(material/datepicker): toggle icon not visible in high
 contrast mode on Chromium browsers (#22352)

Fixes an issue where the datepicker toggle icon blends in with the background in high contrast mode on Chromium-based browsers (Edge and Chrome).
---
 src/material/datepicker/BUILD.bazel            |  1 +
 src/material/datepicker/datepicker-toggle.scss | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
index 133f8db6f14e..e16ded85e99a 100644
--- a/src/material/datepicker/BUILD.bazel
+++ b/src/material/datepicker/BUILD.bazel
@@ -60,6 +60,7 @@ sass_binary(
 sass_binary(
     name = "datepicker_toggle_scss",
     src = "datepicker-toggle.scss",
+    deps = ["//src/cdk/a11y:a11y_scss_lib"],
 )
 
 sass_binary(
diff --git a/src/material/datepicker/datepicker-toggle.scss b/src/material/datepicker/datepicker-toggle.scss
index fff90c6dee02..74b6e5cc8048 100644
--- a/src/material/datepicker/datepicker-toggle.scss
+++ b/src/material/datepicker/datepicker-toggle.scss
@@ -1,3 +1,5 @@
+@use '../../cdk/a11y/a11y';
+
 .mat-form-field-appearance-legacy {
   .mat-form-field-prefix,
   .mat-form-field-suffix {
@@ -21,3 +23,11 @@
     }
   }
 }
+
+@include a11y.high-contrast(active, off) {
+  .mat-datepicker-toggle-default-icon {
+    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
+    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
+    color: CanvasText;
+  }
+}