From 3c713488b9f6b5dd7b3b9a9dee381abfe628ee84 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 4 Jan 2019 19:45:26 +0200
Subject: [PATCH] fix(list): add hover and focus indication in high contrast
 mode (#14637)

Fixes not being able to see which lists/list items are focused or hovered in high contrast mode.
---
 src/lib/list/BUILD.bazel |  1 +
 src/lib/list/list.scss   | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/list/BUILD.bazel b/src/lib/list/BUILD.bazel
index 0f8e733d7e9..f11660ebe0e 100644
--- a/src/lib/list/BUILD.bazel
+++ b/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"
   ],
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index d3bfe00b38d..9e4bfc06a7a 100644
--- a/src/lib/list/list.scss
+++ b/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