fix: show focus outline for High-Contrast Mode

[geoffrich]

Alaska Airlines Pull Request

Summary:

Instead of resetting outline to none, we set it to transparent instead. This ensures that focus outlines still show when using Windows High-Contrast Mode.

Once this change is merged, we will need to update Auro components with non-outline focus styles to use the latest version of WCSS.

See also: AlaskaAirlines/auro-button#89

This change has been testing using npm link with auro-button and focus styles are now showing:

HCM enabled

HCM not enabled

Type of change:

• Revision of an existing capability

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Orion Design System Team

[blackfalcon]

I am not understanding this update? The intent behind WCSS is to disable standard outlines in favor of focus-visible. E.g. the emphasis is on setting a style for .focus-visible. Are you saying that these styles are now working?

Your update only works when $focus: null. What does WHCM do when $focus: true?

Tabbing to anchor tag, macOS invert mode

Using this update on the Auro doc site and having $focus: null.

Using this update on the Auro doc site and having $focus: true.

[blackfalcon]

Is this more the case that WHCM breaks specifically with auro-button because the focus-visible style is using inner shadows that Windows is dismissing for this contract mode?

If that is the case, I would suggest that we deal with this specifically with the auro-button component and not use a global use case.

[AuroDesignSystem]

🎉 This PR is included in version 2.12.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀