fix(radio-group): style focused but unchecked radio buttons

[Splaktar]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Based on the MD spec (image below), we fail to provide a decoration for focused but unselected radio buttons (whether disabled or enabled).

Issue Number:
Fixes #11563. Fixes #8339. Fixes #3643.

What is the new behavior?

Better align with the MD spec by decorating the focused but unselected radio buttons (whether disabled or enabled).

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[Splaktar]

@codymikol can you please take a look at this?

You can test it some by using this for your CSS (https://drive.google.com/uc?export=download&id=1Vw_o1NPFcKMqTc09ocKQsEPWn42sDvW9).

[codymikol]

I tried that CSS without any success. I also did a clean build from your commit to be sure and it seems the issue is still present.

In the conversation over here #11563

You mentioned that with VoiceOver software you are able to tab focus onto md-radio-buttons themselves. Are you able to tab over each of these md-radio-buttons?

In my codepen when tabbing from the first input I am able to set focus to the md-radio-group, but not any of the md-radio-buttons inside. Another tab will set focus to the next input in the form.

[Splaktar]

Sorry, the theme CSS is applied by the JS, so you need that one too. Here's an updated CodePen using it. You can get the links to the .js and .css from its settings.

No there is no tabbing over the radio buttons. That behavior is the same, you tab to the radio group, then use the arrow keys to move around the radio-buttons.

[codymikol]

Yeah, that definitely fixes it. Awesome job, thanks for such a quick fix! 🍻

[codymikol]

Thanks @mmalerba 🐔