[mat-slider] slider is visually focused when parent is focused and uses cdkMonitorSubtreeFocus directive

[jpnickolas]

mat-slider will be styled as if focused if a parent element to the slider has its focus being monitored with something like the cdkMonitorSubtreeFocus directive.

What is the expected behavior?

Focusing an element on a page should not cause an unrelated mat-slider to become focused.

What is the current behavior?

If a parent element to the mat-slider has the focus of it and its children being monitored, it will also cause mat-slider to be focused when the parent is keyboard focused.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-ykmdsb

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material Version: 7.0.2

Is there anything else we should know?

I believe this is being caused by the following css rule:
https://github.com/angular/material2/blob/master/src/lib/slider/slider.scss#L97

It specifies that any parent of .mat-slider-focus-ring with the .cdk-keyboard-focused or .cdk-program-focused class should apply the focus styles to .mat-slider-focus-ring.

I believe specifying that the .cdk-*-focused selectors should apply only to a .mat-slider parent should be enough to fix this issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}