fix(material-experimental/mdc-select): resolve a couple of visual iss…

…ues in high contrast mode (#23007)

* Fixes that a small rectangle is rendered over the select placeholder text.
* Fixes that the dropdown arrow wasn't visible.

(cherry picked from commit babfb21)

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

@@ -72,6 +72,12 @@ $scale: 0.75 !default;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+
+    @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;
+    }
   }
 }
 
@@ -159,4 +165,8 @@ $scale: 0.75 !default;
   content: ' ';
   white-space: pre;
   width: 1px;
+
+  // Prevents some browsers from rendering the element in high contrast mode.
+  display: inline-block;
+  opacity: 0;
 }

src/material/select/select.scss

@@ -158,4 +158,8 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
   content: ' ';
   white-space: pre;
   width: 1px;
+
+  // Prevents some browsers from rendering the element in high contrast mode.
+  display: inline-block;
+  opacity: 0;
 }