fix(material-experimental/mdc-select): arrow not rendering in high co…

…ntrast mode (#21606)

The MDC select uses a CSS triangle for its down arrow which renders as a rectangle in
high contrast mode. These changes switch it to an SVG arrow.

These changes are identical to #14219 which had some trouble landing due to screenshot
diffs. The MDC select shouldn't have such issues.

Relates to #21263.

(cherry picked from commit fef9179)

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

@@ -21,7 +21,14 @@
     </span>
   </div>
 
-  <div class="mat-mdc-select-arrow-wrapper"><div class="mat-mdc-select-arrow"></div></div>
+  <div class="mat-mdc-select-arrow-wrapper">
+    <div class="mat-mdc-select-arrow">
+      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+      <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false">
+        <path d="M7 10l5 5 5-5z"/>
+      </svg>
+    </div>
+  </div>
 </div>
 
 <ng-template

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

@@ -61,12 +61,18 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-arrow {
-  width: 0;
-  height: 0;
-  border-left: $mat-select-arrow-size solid transparent;
-  border-right: $mat-select-arrow-size solid transparent;
-  border-top: $mat-select-arrow-size solid;
   margin: 0 $mat-select-arrow-margin;
+  width: $mat-select-arrow-size * 2;
+  height: $mat-select-arrow-size;
+  position: relative;
+
+  svg {
+    fill: currentColor;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 // Note that the `.mdc-menu-surface` is here in order to bump up the specificity