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

…de 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).
angular · Apr 2, 2021 · ea5e5e0 · ea5e5e0
1 parent 1d906b6
commit ea5e5e0
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;
+  }
+}