From a0cfa2833fc80a85f2af823b050632fbadda26d7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 22 Feb 2020 16:55:05 +0100
Subject: [PATCH] fix(list): no selected indication in high contrast mode while
 in single selection

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 ba2fdda0dbc0..b38ab7f25ab6 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -319,6 +319,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;
+  }
 }