Skip to content

Commit 93db2d7

Browse files
committed
fix(slide-toggle): focus ripple not hiding after click/touch
Similarly to the checkbox (#13295), the persistent ripple should only show up for focus if the slide-toggle has been focused through keyboard. https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1w3KOMo81gakKP7JC6yNogxCt-CadYQvx%2Fslidercontrols-1a-v02.mp4
1 parent 2dff301 commit 93db2d7

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,10 @@ $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+
// As per specifications, the focus ripple should only show up if the slide-toggle has
208+
// been focused through keyboard. We cannot account for `cdk-program-focused` because clicking
209+
// on the label causes the focus origin to be `program` due to the focus redirection.
210+
.mat-slide-toggle.cdk-keyboard-focused & {
208211
opacity: 0.12;
209212
}
210213

0 commit comments

Comments
 (0)