Material: radio-group: no indication of focus when no option selected

[codymikol]

Bug, enhancement request, or proposal: Bug

CodePen and steps to reproduce the issue:

Radio Button Demo which demonstrates the issue: Yes

Detailed Reproduction Steps:

1. In the attached code pen focus the first input box
2. Tab to the md-radio-group

What is the expected behavior?

I expect that there will be some indication of focus. In the docs there is a defined "focused state" for radio inputs.

What is the current behavior?

The current behavior is that there is no indication of focus.

What is the use-case or motivation for changing an existing behavior?

I am currently implementing a questionnaire that receives questions one by one. I would like to focus controls as they become available so users can select an option and hit enter to submit the form. This is not obvious if radio groups don't indicate focus.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: Latest
• AngularJS Material: Latest
• OS: All
• Browsers: All

Is there anything else we should know? Stack Traces, Screenshots, etc.

This is the archived material docs showing the "off / focused" radio buttons

I think the best solution to this problem while retaining a11y is to change how the arrow keys modify radio selections.

Currently focusing a radio group allows you to use the arrow keys to change the selected radio button. If we were to instead have the arrow keys change which radio button is focused and allow the enter key to change the selection. We could set the either the first radio button to focused given that no selection is made, or we could focus the selected radio button given that a selection has been made.

Now when focusing a radio group for the first time the first radio button would go into a focused state.

If a selection has already been made that radio would be selected + focused

I see a couple of closed tickets from long ago that sort of bring up this issue in a lot less detail, but they seem to have been closed without much explanation.

https://github.com/angular/material/issues/8339

https://github.com/angular/material/issues/3643

Now that the project is very much focused on a11y I am hoping this can be reconsidered. I am willing to spend some of my own time on this if the team decides this is an acceptable change.

Thanks!

[Splaktar]

I think that you accidentally pasted the same two issue numbers. Is there another that should be added here?

[codymikol]

My mistake, the other one was https://github.com/angular/material/issues/3643 I updated the ticket as well.

[Splaktar]

The individual radio buttons can be focused with a screen reader like VoiceOver. The problem is that we don't even apply the proper focus style when these radio buttons are focused but not selected.

I think that we can fix this with some CSS and no changes to the UX or behaviors.

[codymikol]

Thanks for making such an incredibly fast PR 😄 🥂

[Splaktar]

I was just testing some CSS to see if I could kind of fake it and get a screenshot to show you... and then it seemed to kind of solve it.. please take a look and test it out a bit to see if I missed any edge cases (possible).

[codymikol]

I'll build it tonight and test in our application. Thanks again! 🐔