fix(list): add hover and focus indication in high contrast mode (angu…

…lar#14637)

Fixes not being able to see which lists/list items are focused or hovered in high contrast mode.

src/lib/list/BUILD.bazel

@@ -33,6 +33,7 @@ sass_binary(
   name = "list_scss",
   src = "list.scss",
   deps = [
+    "//src/cdk/a11y:a11y_scss_lib",
     "//src/lib/core:core_scss_lib",
     "//src/lib/divider:divider_scss_lib"
   ],

src/lib/list/list.scss

@@ -2,6 +2,7 @@
 @import '../core/style/list-common';
 @import '../core/style/layout-common';
 @import '../divider/divider-offset';
+@import '../../cdk/a11y/a11y';
 
 
 $mat-list-side-padding: 16px;
@@ -269,7 +270,7 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 mat-action-list {
-  //remove the native button look and make it look like a list item
+  // Remove the native button look and make it look like a list item
   button {
     background: none;
     color: inherit;
@@ -289,6 +290,20 @@ mat-action-list {
   outline: none;
 }
 
+@include cdk-high-contrast {
+  .mat-selection-list:focus {
+    outline-style: dotted;
+  }
+
+  .mat-list-option,
+  .mat-nav-list .mat-list-item,
+  mat-action-list .mat-list-item {
+    &:hover, &:focus {
+      outline: dotted 1px;
+    }
+  }
+}
+
 
 // Disable the hover styles on non-hover devices. Since this is more of a progressive
 // enhancement and not all desktop browsers support this kind of media query, we can't