make keyboard navigable according to WCAG-A #101
Description
Currently, in order to select from a group of these radio buttons, the user has to use the spacebar key. In order to navigate between selectable buttons, the user has to use the tab key.
These actions are WCAG non-compliant- tab should take you to the next focusable element after the radio group. Users should be able to use the up, down, right and left arrow keys to select an item in a radio group see the table delineating interaction, and keystrokes here
The issue seems to be caused by the rendering of the nested <input> inside of the <label> - though this is semantic, and is providing the ability to nicely style labels around the inputs, it is also semantically correct to have the label and input as siblings. Changing this to the latter fixes the aforementioned a11y issues with an obvious tradeoff for visual regressions.
browser: chrome v81