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).

(cherry picked from commit ea5e5e0)

Author: crisbeto

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(

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