The design of the Radio component includes a focused but unselected style:
This style was never implemented since we did not think there was a use case for a focused but unselected Radio. Focus styles are only applied to checked radios.
However, this is not the case: when there is no initial selection and a user navigates to the radio group via keyboard, they land on the first radio (or the last one, if they shift+tab back into the group) and it becomes focused but not selected (it can be selected with space). This follows the pattern described here for the most part, although the DST engineers decided that we would prefer to allow native browser behavior to persist when it comes to shift+tabbing back into a radio group (some browsers will land the user on the last radio, which we think is acceptable).
Currently, if you keyboard navigate to a radio group with no selection, you will see no visual feedback of which radio you are on, making it very difficult to use the keyboard to use a radio group with no initial selection.
Acceptance criteria
NOTE: There is an existing proof-of-concept patch for this that just needs to be updated and merged.
- Implement focus/unselected styles for the Radio component
- Determine whether to also enable selection of a radio with the enter key, like we do with Checkbox (see Volker's comment; we decided not to do this)