Skip to content

Commit 0f28f26

Browse files
committed
fix(button): focus indication hard to see in high contrast mode
* 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.
1 parent 3bc52df commit 0f28f26

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

src/lib/button/button.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@
9393
.mat-button-focus-overlay {
9494
border-radius: inherit;
9595
opacity: 0;
96-
9796
transition: $mat-button-focus-transition;
9897

9998
._mat-animation-noopable & {
@@ -104,7 +103,14 @@
104103
// Note that IE will render this in the same way, no
105104
// matter whether the theme is light or dark. This helps
106105
// with the readability of focused buttons.
107-
background-color: rgba(white, 0.5);
106+
background-color: #fff;
107+
}
108+
109+
@include cdk-high-contrast(black-on-white) {
110+
// For the black-on-white high contrast mode, the browser will set this element
111+
// to white, making it blend in with the background, hence why we need to set
112+
// it explicitly to black.
113+
background-color: #000;
108114
}
109115
}
110116

0 commit comments

Comments
 (0)