fix(material/paginator): button icons blending in with background in high contrast mode on Chromium browsers (#22385)

Setting `fill: currentColor` on an SVG element causes it to blend in with the background on Chromium-based browsers. These changes add a fallback color.

Author: crisbeto

src/material-experimental/mdc-paginator/paginator.scss

@@ -88,6 +88,10 @@ $button-icon-size: 28px;
   .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon,
   .mat-mdc-paginator-icon {
     fill: currentColor;
+
+    // On Chromium browsers the `currentColor` blends in with the
+    // background for SVGs so we have to fall back to `CanvasText`.
+    fill: CanvasText;
   }
 
   .mat-mdc-paginator-range-actions .mat-mdc-icon-button {

src/material/paginator/BUILD.bazel

@@ -42,6 +42,9 @@ sass_library(
 sass_binary(
     name = "paginator_scss",
     src = "paginator.scss",
+    deps = [
+        "//src/cdk/a11y:a11y_scss_lib",
+    ],
 )
 
 ng_test_library(

src/material/paginator/paginator.scss

@@ -1,3 +1,5 @@
+@use '../../cdk/a11y/a11y';
+
 $padding: 0 8px;
 $page-size-margin-right: 8px;
 
@@ -73,4 +75,10 @@ $button-icon-size: 28px;
   [dir='rtl'] & {
     transform: rotate(180deg);
   }
+
+  @include a11y.high-contrast(active, off) {
+    // On Chromium browsers the `currentColor` blends in with the
+    // background for SVGs so we have to fall back to `CanvasText`.
+    fill: CanvasText;
+  }
 }