Skip to content

Commit ce14c07

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 26c73e0 commit ce14c07

File tree

1 file changed

+8
-0
lines changed

1 file changed

+8
-0
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,14 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
240240

241241
.mat-slide-toggle-bar {
242242
background: #fff;
243+
244+
// As a focus indication in high contrast mode, we add a dotted outline to the slide-toggle
245+
// bar. Since the bar element does not have any padding, we need to specify an outline offset
246+
// because otherwise the opaque thumb element will hide the outline.
247+
.mat-slide-toggle.cdk-keyboard-focused & {
248+
outline: 1px dotted;
249+
outline-offset: ($mat-slide-toggle-height - $mat-slide-toggle-bar-height) / 2;
250+
}
243251
}
244252
}
245253

0 commit comments

Comments
 (0)