From fffbcb19eefbbdfaf5bbd21d3026e9b727369a38 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 23 Jan 2019 20:14:27 +0100 Subject: [PATCH] fix(button): focus indication hard to see in high contrast mode (#13259) * When we switched to the new design, we also switched our approach to how the focus overlay is shown (using `opacity` vs `display`), however we never switched the focus indicator's background to a solid color, which means that it's opacity when displayed is close to zero (0.5 * 0.012 = 0.006). These changes switch it to a solid color. * Fixes the focus indicator being white on a white background, when the user has high contrast set to black-on-white. --- src/lib/button/button.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 30e23bd3bec..b920ed5fab4 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -109,7 +109,6 @@ // Element that overlays the button to show focus and hover effects. .mat-button-focus-overlay { opacity: 0; - transition: $mat-button-focus-transition; ._mat-animation-noopable & { @@ -120,7 +119,14 @@ // Note that IE will render this in the same way, no // matter whether the theme is light or dark. This helps // with the readability of focused buttons. - background-color: rgba(white, 0.5); + background-color: #fff; + } + + @include cdk-high-contrast(black-on-white) { + // For the black-on-white high contrast mode, the browser will set this element + // to white, making it blend in with the background, hence why we need to set + // it explicitly to black. + background-color: #000; } }