Opened 4 years ago

Closed 17 months ago

#9505 closed bug (fixed)

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.

Change History (9)

comment:1 Changed 4 years ago by scottgonzalez

  • Resolution set to worksforme
  • Status changed from new to closed

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

comment:2 Changed 4 years ago by jclarke

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.

comment:3 Changed 4 years ago by scottgonzalez

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

comment:4 Changed 4 years ago by jclarke

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?

comment:5 Changed 4 years ago by scottgonzalez

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?

comment:6 Changed 4 years ago by jclarke

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.

comment:7 Changed 4 years ago by scottgonzalez

  • Resolution worksforme deleted
  • Status changed from closed to reopened

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.

comment:8 Changed 4 years ago by scottgonzalez

  • Status changed from reopened to open

comment:9 Changed 17 months ago by scottgonzalez

  • Milestone changed from none to 1.12.0
  • Resolution set to fixed
  • Status changed from open to closed

Confirmed fixed in master with the button rewrite.

Note: See TracTickets for help on using tickets.