Skip to content

Commit 3de0b08

Browse files
crisbetommalerba
authored andcommitted
fix(material-experimental/mdc-slide-toggle): missing focus indication in high contrast mode (#17471)
Fixes the MDC-based switch not having focus indication in high contrast mode.
1 parent ece8004 commit 3de0b08

File tree

1 file changed

+14
-0
lines changed

1 file changed

+14
-0
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
@import '@material/switch/functions';
22
@import '@material/switch/mixins';
3+
@import '@material/switch/variables';
34
@import '@material/form-field/mixins';
45
@import '@material/ripple/variables';
56
@import '../mdc-helpers/mdc-helpers';
67
@import '../../material/core/style/layout-common';
8+
@import '../../cdk/a11y/a11y';
79

810
@include mdc-switch-without-ripple($query: $mat-base-styles-query);
911
@include mdc-form-field-core-styles($query: $mat-base-styles-query);
@@ -51,3 +53,15 @@
5153
}
5254
}
5355
}
56+
57+
58+
@include cdk-high-contrast {
59+
.mat-mdc-slide-toggle-focused {
60+
.mdc-switch__track {
61+
// Usually 1px would be enough, but MDC reduces the opacity on the
62+
// element so we need to make this a bit more prominent.
63+
outline: solid 2px;
64+
outline-offset: $mdc-switch-track-height / 2;
65+
}
66+
}
67+
}

0 commit comments

Comments
 (0)