High contrast focus indicators conflict with strong focus indicators

[zelliott]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Unsure - will have to look - but I'm fairly certain this is a regression.

Description

I noticed that dedicated focus indicators for Windows HCM have been added to various components (#22145, #22889). Unfortunately, these HCM focus indicators conflict with the existing system-wide strong focus indicators if the user has opted into strong focus indicators. By "conflict", I mean multiple focus indicators render where only one should render.

For example, in the screenshot below, two focus indicators render on a radio button when in HCM with strong focus indicators opted-in.

I'm not sure yet how many components this bug affects, but I wanted to file this sooner rather than later so that we didn't merge in some pending PRs (#22889) until a fix was identified.

Reproduction

I'd share a Stackblitz link, but Stackblitz is being buggy at the moment and so repro steps are a bit more involved.

Steps to reproduce:

1. Go to material.angular.io/components/checkbox/examples on a Windows PC.
2. Open the first example in Stackblitz.
3. Add the mat.strong-focus-indicators styles to the theme.scss file:

@include mat.strong-focus-indicators();
@include mat.strong-focus-indicators-theme($theme);

4. Turn on HCM.
5. Refresh the Stackblitz.
6. Focus the first checkbox in the Stackblitz demo.
7. Observe the double focus indicator on the checkbox.

Expected Behavior

One focus indicator should be present on the checkbox.

Actual Behavior

Two focus indicators were present on the checkbox.

Environment

• Angular: Latest
• CDK/Material: Latest
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

It's worth noting that the majority of the HC-specific styles were in place long before the strong focus indicators.

[zelliott]

To resolve this, we need to show one of either the HCM outline or the strong focus indicator when HCM is on and strong focus indicators is opted in. If we want to show just the HCM outline, we should be able to add logic to the strong focus indicator mixin that only applies styles if the HCM class isn't detected on the body. If we want to show just the strong focus indicators, I'm not sure how to do so. We'd have to be able to check within the high contrast mixin if strong focus indicators are enabled, and I'm not sure how to check to see if a mixin has been included.

[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.}