From f6aa10ee6c7e3915ae25c9c0ccaf9e1714057c01 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 15 Jan 2021 18:13:16 +0100
Subject: [PATCH] fix(material-experimental/mdc-select): arrow not rendering in
 high contrast mode

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.
---
 src/material-experimental/mdc-select/select.html |  9 ++++++++-
 src/material-experimental/mdc-select/select.scss | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html
index ec8d4f773f4f..dd899f304465 100644
--- a/src/material-experimental/mdc-select/select.html
+++ b/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
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index f414c74951ff..1c321fd5aa32 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -60,12 +60,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