From 76e8a386401b88d4b09aca01f48e6b3a4422e841 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 21 Mar 2020 06:06:33 +0100
Subject: [PATCH] =?UTF-8?q?fix(list):=20no=20selected=20indication=20in=20?=
 =?UTF-8?q?high=20contrast=20mode=20while=E2=80=A6=20(#18585)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a selection list is in single selection mode, it indicates which item is selected by changing its background color which is invisible in high contrast mode. These changes work around the issue by rendering out a circle next to the selected item. I went with the circle since it looks like a radio button which is what the list behaves as.
---
 src/material/list/list.scss | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index a12829c6093a..221c8525dde2 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -325,6 +325,27 @@ mat-action-list {
       outline: dotted 1px;
     }
   }
+
+  // In single selection mode, the selected option is indicated by changing its
+  // background color, but that doesn't work in high contrast mode. We add an
+  // alternate indication by rendering out a circle.
+  .mat-list-single-selected-option::after {
+    $size: 10px;
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: $mat-list-side-padding;
+    transform: translateY(-50%);
+    width: $size;
+    height: 0;
+    border-bottom: solid $size;
+    border-radius: $size;
+  }
+
+  [dir='rtl'] .mat-list-single-selected-option::after {
+    right: auto;
+    left: $mat-list-side-padding;
+  }
 }