Skip to content

Commit d279662

Browse files
committed
fix(slide-toggle): no focus indication in high-contrast mode
* Fixes that the slide-toggle does not have any visible focus indication in high contrast mode.
1 parent 1852563 commit d279662

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

src/lib/slide-toggle/slide-toggle.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
204204
opacity: 0.04;
205205
}
206206

207-
.mat-slide-toggle.cdk-focused & {
207+
.mat-slide-toggle.cdk-keyboard-focused & {
208208
opacity: 0.12;
209209
}
210210

@@ -230,6 +230,14 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
230230

231231
.mat-slide-toggle-bar {
232232
background: #fff;
233+
234+
// As a focus indication in high contrast mode, we add a dotted outline to the slide-toggle
235+
// bar. Since the bar element does not have any padding, we need to specify an outline offset
236+
// because otherwise the opaque thumb element will hide the outline.
237+
.mat-slide-toggle.cdk-keyboard-focused & {
238+
outline: 1px dotted;
239+
outline-offset: ($mat-slide-toggle-height - $mat-slide-toggle-bar-height) / 2;
240+
}
233241
}
234242
}
235243

0 commit comments

Comments
 (0)