Skip to content

Commit 87ab033

Browse files
authored
fix(material-experimental/mdc-slide-toggle): increase contrast in high contrast mode (#22945)
Increases the contrast of disabled slide toggles in high contrast mode make them easier to see. Fixes #22941.
1 parent 1072549 commit 87ab033

File tree

1 file changed

+10
-7
lines changed

1 file changed

+10
-7
lines changed

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,15 @@
8383

8484

8585
@include a11y.high-contrast(active, off) {
86-
.mat-mdc-slide-toggle-focused {
87-
.mdc-switch__track {
88-
// Usually 1px would be enough, but MDC reduces the opacity on the
89-
// element so we need to make this a bit more prominent.
90-
outline: solid 2px;
91-
outline-offset: private.private-div(mdc-switch.$track-height, 2);
92-
}
86+
// Bump the opacity on the disable slide toggle to make it easier to see.
87+
.mat-mdc-slide-toggle .mdc-switch--disabled {
88+
opacity: 0.75;
89+
}
90+
91+
.mat-mdc-slide-toggle-focused .mdc-switch__track {
92+
// Usually 1px would be enough, but MDC reduces the opacity on the
93+
// element so we need to make this a bit more prominent.
94+
outline: solid 2px;
95+
outline-offset: private.private-div(mdc-switch.$track-height, 2);
9396
}
9497
}

0 commit comments

Comments
 (0)