fix(material/datepicker): toggle icon not visible in high contrast mo…

…de on Chromium browsers Fixes an issue where the datepicker toggle icon blends in with the background in high contrast mode on Chromium-based browsers (Edge and Chrome).
angular · Mar 26, 2021 · 9de884a · 9de884a
1 parent b8d83cb
commit 9de884a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git 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
@@ -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;
+  }
+}