RadioButtonGroup tab index

[laurenfb]

Hi folks,

I'm using a RadioButtonGroup with the buttons attached. As reported in #1782, the focus doesn't move to the next option when tabbed onto the button group. I noticed the answer to that says: you can use up/down arrow keys to navigate between the Radio options, but when I tried that, I found it does not do this in my context. Up/down scrolls if the modal is long, and does nothing if the modal does not overflow.

Is it still the case that the up/down arrow keys should move between two RadioButtons? Or is it the fact that the buttons are attached that is causing this problem?

If the up/down arrows should move focus to the next RadioButton, is this a recent bug in Paste, or is it more likely that we have not implemented it correctly?

I can provide a video if it would be helpful, but a video of "nothing happens" is kind of moot.

Thanks,
Lauren

[laurenfb]

If it's helpful, here's the branch that uses the RadioButtonGroup - https://github.com/segmentio/content-editors/pull/94

[TheSisb]

Hi @laurenfb,

Unfortunately I'm unable to access your repo, however a Radio in HTML naturally navigates with 1 tab stop and arrow keys. This is inbuilt behavior into the browser, but depends on each Radio having the same name attribute. If you pass the name once in the RadioGroup, it will pass it down into each child Radio component.

I built a demo on Codesandbox for you. You can also see other examples on our website.

If you're still running into issues, could you please create a Codesandbox reproduction and post it here? Thanks!

[laurenfb]

Thanks @TheSisb! This fixed it. Thank you for taking the time!