Skip to content

Commit db09c1c

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 b5889ca commit db09c1c

File tree

1 file changed

+4
-1
lines changed

1 file changed

+4
-1
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
210210
opacity: 0.04;
211211
}
212212

213-
.mat-slide-toggle:not(.mat-disabled).cdk-focused & {
213+
// As per specifications, the focus ripple should only show up if the slide-toggle has
214+
// been focused through keyboard. We cannot account for `cdk-program-focused` because clicking
215+
// on the label causes the focus origin to be `program` due to the focus redirection.
216+
.mat-slide-toggle:not(.mat-disabled).cdk-keyboard-focused & {
214217
opacity: 0.12;
215218
}
216219

0 commit comments

Comments
 (0)