From db09c1c24a8706c036a7886afd094667f1a2df7b Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Thu, 11 Oct 2018 09:01:17 +0200 Subject: [PATCH] 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 --- 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 2c3bd52b4bf4..79ceda0e0083 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; }