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