From a06955511ba81ba000b3bcffdc23caa9fddf605e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 27 Mar 2021 17:56:53 +0100
Subject: [PATCH] fix(material-experimental/mdc-list): add high contrast mode
 treatment

Adds similar high contrast mode treatment to the non-MDC list since the MDC
implementation suffers from the same issues we had resolved before.
---
 src/material-experimental/mdc-list/list.scss | 33 ++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss
index bdc52e579bd8..6ef0f541ba00 100644
--- a/src/material-experimental/mdc-list/list.scss
+++ b/src/material-experimental/mdc-list/list.scss
@@ -1,6 +1,7 @@
 @use '@material/list' as mdc-list;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
+@use '../../cdk/a11y/a11y';
 
 @include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
@@ -124,3 +125,35 @@
   @include layout-common.fill();
   pointer-events: none;
 }
+
+
+@include a11y.high-contrast(active, off) {
+  .mat-mdc-list-option,
+  .mat-mdc-nav-list .mat-mdc-list-item,
+  .mat-mdc-action-list .mat-mdc-list-item {
+    &:hover, &:focus {
+      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-mdc-list-option.mdc-list-item--selected::after {
+    $size: 10px;
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: mdc-list.$deprecated-side-padding;
+    transform: translateY(-50%);
+    width: $size;
+    height: 0;
+    border-bottom: solid $size;
+    border-radius: $size;
+  }
+
+  [dir='rtl'] .mat-mdc-list-option.mdc-list-item--selected::after {
+    right: auto;
+    left: mdc-list.$deprecated-side-padding;
+  }
+}