Skip to main content

Search and Top Navigation

#9505 closed bug (fixed)

Opened August 20, 2013 04:23PM UTC

Closed October 27, 2015 01:44PM UTC

Radio buttons do not have appropriate focus styling

Reported by: jclarke Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.button Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

All the other button types display the focus styling properly, but the radio buttons do not. For an example see the demo page: and attempt to navigate with the keyboard. The expected highlighted outline does not appear.

Attachments (0)
Change History (9)

Changed August 20, 2013 04:26PM UTC by scottgonzalez comment:1

resolution: → worksforme
status: newclosed

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

Changed August 20, 2013 04:33PM UTC by jclarke comment:2

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.

Changed August 20, 2013 04:59PM UTC by scottgonzalez comment:3

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

Changed August 20, 2013 05:25PM UTC by jclarke comment:4

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 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?

Changed August 20, 2013 05:35PM UTC by scottgonzalez comment:5

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?

Changed August 20, 2013 05:46PM UTC by jclarke comment:6

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.

Changed August 20, 2013 05:53PM UTC by scottgonzalez comment:7

resolution: worksforme
status: closedreopened

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.

Changed August 20, 2013 05:54PM UTC by scottgonzalez comment:8

status: reopenedopen

Changed October 27, 2015 01:44PM UTC by scottgonzalez comment:9

milestone: none1.12.0
resolution: → fixed
status: openclosed

Confirmed fixed in master with the button rewrite.