Radio buttons do not have appropriate focus styling

They work just fine for me. Navigating with the keyboard using arrow keys changes the background color.

I also see the background color change, but I think this actually changes the value of the radio button. I believe a user should be able to navigate with the keyboard (using the arrow keys) and see the focus change (usually an outline in orange or gray) and then press space or enter for the item to be selected (which results in the background color change). If you take a look at the other buttons you'll see what I mean. Note that with the checkbox buttons, you need to tab through.

Are you familiar with how these elements work natively? We're not changing any of the behavior.

I apologize. It seems that using arrows is supposed to change the value. However, it does still seem like the radio button should also show focus (by way of an orange outline) and it currently does not. For 508 accessibility compliance (see example http://webaim.org/techniques/forms/controls#radio) the radio button item shows focus. Are you sure that the state of the radio bubtton element is focused when the user navigates to it?

Yes, it's focused. Otherwise the native navigation would not work. We don't explicitly add outlines anywhere, is that what you're asking for?

I'm confused. The other buttons in jqueryui automatically add the default focused styling (orange border) which leads me to believe that they are in focused state. When I use the Chrome development console to force the element state of the radio button to focused, it adds the expected orange border which leads me to believe that it was not actually focused as you say.

The radio buttons have focus, but are not visible. You must be toggling the focus state of the label, but labels are never focused, because they automatically move focus to the input.

Confirmed fixed in master with the button rewrite.