From be0f17e28a5c1315c651e7fda727b0353cd92da7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 6 Mar 2018 10:36:12 -0500 Subject: [PATCH] fix(select, autocomplete): no indication of active option in high contrast mode. (#10229) Fixes users in high contrast mode not being able to distinguish the active option from all the other options. Fixes #10207. --- src/lib/core/option/option.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss index 7b522635bb8..8cc84151b76 100644 --- a/src/lib/core/option/option.scss +++ b/src/lib/core/option/option.scss @@ -27,6 +27,23 @@ padding-right: $mat-menu-side-padding * 2; } } + + @include cdk-high-contrast { + $high-contrast-border-width: 1px; + + // Add a margin to offset the border that we're adding to active option, in order + // to avoid the options shifting as the user is moving through the list. + margin: 0 $high-contrast-border-width; + + &.mat-active { + // We use a border here, rather than an outline, because the outline will be cut off + // by the `overflow: hidden` on the panel wrapping the options, whereas a border + // will push the element inwards. This could be done using `outline-offset: -1px`, + // however the property isn't supported on IE11. + border: solid $high-contrast-border-width currentColor; + margin: 0; + } + } } // Collapses unwanted whitespace created by newlines in code like the following: