From 917a52e03cca1b3568d29094bbf430846ba1c3c9 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 14 May 2019 18:58:43 +0200 Subject: [PATCH] fix(slide-toggle): focus ripple not hiding after click/touch (#13562) 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 --- src/material/slide-toggle/slide-toggle.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 2c3bd52b4bf..79ceda0e008 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -210,7 +210,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg opacity: 0.04; } - .mat-slide-toggle:not(.mat-disabled).cdk-focused & { + // As per specifications, the focus ripple should only show up if the slide-toggle has + // been focused through keyboard. We cannot account for `cdk-program-focused` because clicking + // on the label causes the focus origin to be `program` due to the focus redirection. + .mat-slide-toggle:not(.mat-disabled).cdk-keyboard-focused & { opacity: 0.12; }