Grommet: RadioButtonGroup wont blur() correctly

[santaclauze]

First of all, thanks for the great library.

We are using grommet on our platform and it works great. However, we found a small bug.

Expected Behavior

Easy blur by clicking away from the Radio Buttons. Here is an example from w3c where I can easily blur and use the arrows to move the window content.

https://recordit.co/dhjc0gBN7F

Actual Behavior

Struggle to fire the blur on Radio Buttons. If you try the same process on your documentation you have to put up a bit of a fight to get the blur to fire and be able to use the arrows to move the window content rather than the radio button selection

Steps to Reproduce

1. Go to https://v2.grommet.io/radiobuttongroup
2. Use top and bottom arrow to see the window browser move up/down
3. click a radio button and the use up and down arrow.
4. Try to click away from the radio buttons to fire blue and use the arrows to move browser window

• [ ] Focus is still stuck on radio buttons

Your Environment

its your Environment :)

[ShimiSun]

Thank you for your feedback @santaclauze !
I took a look at the WebAIM accessibility recommendations, https://webaim.org/techniques/forms/controls#radio
And IMO its radio-button behavior is similar to grommet RadioButtonGroup. From the WebAIM example, the user will keep navigating inside the radio-button-group as long the user is using up/down navigations, and for leaving the radio-button-group the user can use Tab which is similar to the grommet behavior.
An enhancement request from our end could be to allow cyclic navigation between the radio button options as shown in the WebAIM example.
let me know what you think and enlight me if I'm missing something.

[adamazing]

@ShimiSun, I think the issue is that it's really hard to wrest control from the RadioButtonGroup once it has you.

E.g. On the RadioButtonGroup docs page. If the RBG has focus, you can move up and down with arrow keys, as expected, but when you click in the sandbox textarea to the right, even though you can see the caret flashing, hitting the up/down arrows will still change the selected radio button!

1. Go to https://v2.grommet.io/radiobuttongroup
2. Click/tab into the radio button group and use up and down arrow to change selection
3. Click into the codesandbox textarea to the right
4. Try to move the flashing caret between lines by using up and down arrows
5. See the RadioButtonGroup change

https://www.youtube.com/watch?v=mXlgXJbks2c
In that video, I navigate between radio buttons with arrow keys, then click into the textarea and start typing, all good. Then at 0:15 I click into the textarea and hit up and down arrows.

Interestingly if you click in that sandbox textarea then start typing/deleting/backspacing, the RBG _does_ lose focus.

Also, to tab away from the RadioButtonGroup I have to hit the tab key twice, not once?

P.S. When this issue was first reported to us by our testers we also assumed that it was expected behaviour as seen on radio button groups everywhere 🙂

[adamazing]

@ShimiSun, the issue seems to have been resolved in v2.8.1 and I can no longer reproduce the bug on: https://v2.grommet.io/radiobuttongroup 👍