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

@@ -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-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-side-padding;
+  }
+}