From babfb215c2812f66aa324f3c4b09b85c278b4943 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 16 Jul 2021 21:19:26 +0200
Subject: [PATCH] fix(material-experimental/mdc-select): resolve a couple of
 visual issues 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.
---
 src/material-experimental/mdc-select/select.scss | 10 ++++++++++
 src/material/select/select.scss                  |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index 750d7bf7a743..30b01a8562e4 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/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;
 }
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index 2c345530cb56..ea69d84327a1 100644
--- a/src/material/select/select.scss
+++ b/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;
 }