From 7609ba1acab870e50098f9132404d5cc3581a818 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 19 Jan 2021 22:47:17 +0100
Subject: [PATCH] fix(material/select): arrow not rendering correctly in high
 contrast mode

Since all borders get rendered out in high contrast mode, we can't use a CSS triangle to
render out the `mat-select` dropdown arrow. These changes replace it with an SVG arrow.

Fixes #14207.
---
 src/material/select/select.html |  9 ++++++++-
 src/material/select/select.scss | 19 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/material/select/select.html b/src/material/select/select.html
index a0c66b30ac8d..b3dda4e0a38a 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -21,7 +21,14 @@
     </span>
   </div>
 
-  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
+  <div class="mat-select-arrow-wrapper">
+      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode -->
+      <div class="mat-select-arrow">
+        <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/select/select.scss b/src/material/select/select.scss
index d5cd1f6e937b..8a2ae4d10184 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -75,12 +75,21 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-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;
+
+    // Note that we use specific values here in order to position the arrow exactly
+    // where the old one used to be and to avoid screenshot diff failures.
+    top: 2.5px;
+    left: 5px;
+    transform: translate(-50%, -50%);
+  }
 }
 
 .mat-select-panel-wrap {