auro-radio: incorrect a11y experience

[blackfalcon]

Describe the bug

Not sure if this pull request is the cause, but it's been discovered that when selecting a radio button option on a mobile device, there is a blue halo.

This is only appearing with a radio-group.

This is not the expected experience when working with an Auro element.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://auro.alaskaair.com/components/auro/radio
2. Click on any option in a radio group
3. See the error

Expected behavior

When tapping on a radio option, there should be no halo.

Screenshots

Smartphone (please complete the following information):

• OS: iOS
• Browser: Safari
• Latest version

[blackfalcon]

Issue is currently assigned to @blackfalclon to find root cause of this issue.

[geoffrich]

It looks like whatever is compiling the Sass is combining the focus-visible declarations in WCSS, presumably because they share a ruleset:

.js-focus-visible :focus:not(.focus-visible), :focus:not(:focus-visible) { /* whatever */ }

They are separate in the _core.scss stylesheet to prevent browsers that do not support :focus-visible from throwing the whole rule out. With how it's currently minified, Safari will not remove focus styles as expected because it does not support focus-visible.

This may be the cause of the issue.