Skip to main content

Search and Top Navigation

#6711 closed bug (fixed)

Opened December 01, 2010 09:26PM UTC

Closed May 26, 2011 03:28PM UTC

Last modified May 26, 2011 03:30PM UTC

Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation

Reported by: aut0poietic Owned by:
Priority: minor Milestone: 1.8.14
Component: ui.button Version: 1.8.6
Keywords: Cc:
Blocked by: Blocking:

This appears to affect the latest version of jQuery UI (1.8.0 and 1.8.6 were tested) and all browsers I had handy to test ( Chrome 7.0.x, IE6-8, FF3.6.12 ) on Windows XP/7.

I created a jsbin example to display the issue, and a potential fix (or at least the one I'm using for now). URL is :

If you create a button from a checkbox, jQuery UI appears to preserve the actual checkbox's tab index -- as it should for multiple reasons. However, there is no visual indication of that selection. The checkbox's label does not receive the css -hover class as :focus is applied to the checkbox, not the label.

In the example above, tabbing to the first button in any browser does not update the appearance of that button. I have provided a simple (and possibly sloppy) fix for this issue by applying focus/blur events to the checkbox, and using those events to apply the style changes. You can apply this fix in the example to the first button by clicking the link.

Hopefully this is clear as mud.

Attachments (0)
Change History (4)

Changed May 23, 2011 12:31PM UTC by ruprict comment:1

Submitting a pull request to fix this

Checkbox behavior works as expected, with a focus class added when tab focus occurs on dom element. The radio button behavior is unchanged, but it (arguably) functions as expected, with the .ui-state-focus being applied to the label, but nothing is visibly indicated. I guess the real question is whether or not we want to show some indication on a radio button set when it's dom element is tabbed to, which would be a divergence from how it works when using the mouse.

Also, had to change the checkbox demo...added a form element b/c the tabbing wasn't working until I did. Also, added a test for the checkbox behavior.

This is my first attempt at contributing, so please let me know if I did something wrong. I read the commit guide a dozen times before I got the huevos to commit.

Changed May 26, 2011 03:28PM UTC by Glenn Goodrich comment:2

resolution: → fixed
status: newclosed

Button: modified the event bindings for focus and blur. Fixed #6711 - checkbox/radio button do not show focused state when using Keyboard Navigation

Changeset: c49dbe0f0120dec9922d5cb6459a93d33ef41579

Changed May 26, 2011 03:29PM UTC by Glenn Goodrich comment:3

Button: modified the event bindings for focus and blur. Fixed #6711 - checkbox/radio button do not show focused state when using Keyboard Navigation

(cherry picked from commit c49dbe0f0120dec9922d5cb6459a93d33ef41579)

Changeset: ad947c7ba981a371469bafd34ac7f88dee8995bb

Changed May 26, 2011 03:30PM UTC by scottgonzalez comment:4