Accessibility focus-visible default halo

[blackfalcon]

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #182

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

This PR adds a new focus-visible feature to WCSS. At the same time, the legacy focus-visible solution has been deprecated.

The use of the Sass variable to change output was not well adopted.

In order NOT to force this update into all UI scenarios as there may be local code to address this in some cases, this feature has been added as an OPT-IN feature.

See inline documentation for info related to update and install instructions.

Changes to be committed: modified: README.md modified: src/_core.scss new file: src/_focus-visible.scss new file: src/bundled/essentials+fv.scss modified: src/elementDemoStyles/elementDemoStyles.scss

See demo: https://auro-a11y-tab-fix.surge.sh/

Type of change:

Please delete options that are not relevant.

• [x] New capability
• [ ] Revision of an existing capability
• [ ] Infrastructure change (automation, etc.)
• [ ] Other (please elaborate)

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] 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!
-- Auro Design System Team

[leeejune]

@blackfalcon Would this work?

border: solid 1px var(--ds-color-border-active-default);
border-radius: var(--ds-border-radius);

[blackfalcon]

@leeejune

I am recommending that we DO NOT use border-radius. In many cases this halo tightly surrounds some content and with rounded corners, it is too close to the content.

[leeejune]

@leeejune

I am recommending that we DO NOT use border-radius. In many cases this halo tightly surrounds some content and with rounded corners, it is too close to the content.

@blackfalcon Sure, then the blue border should work.

[blackfalcon]

:tada: This PR is included in version 5.1.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: