Skip to content

Commit 8219a67

Browse files
devversionjosephperrott
authored andcommitted
fix(slide-toggle): no focus indication in high-contrast mode (#13287)
* Fixes that the slide-toggle does not have any visible focus indication in high contrast mode.
1 parent 275ded5 commit 8219a67

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
@@ -243,6 +243,14 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
243243

244244
.mat-slide-toggle-bar {
245245
background: #fff;
246+
247+
// As a focus indication in high contrast mode, we add a dotted outline to the slide-toggle
248+
// bar. Since the bar element does not have any padding, we need to specify an outline offset
249+
// because otherwise the opaque thumb element will hide the outline.
250+
.mat-slide-toggle.cdk-keyboard-focused & {
251+
outline: 1px dotted;
252+
outline-offset: ($mat-slide-toggle-height - $mat-slide-toggle-bar-height) / 2;
253+
}
246254
}
247255
}
248256

0 commit comments

Comments
 (0)