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: |
Description
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 : http://jsbin.com/urupi3/2
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 comment:1
Changed May 26, 2011 03:28PM UTC by comment:2
| resolution: | → fixed |
|---|---|
| status: | new → closed |
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 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 comment:4
| milestone: | 1.9 → 1.8.14 |
|---|
Submitting a pull request to fix this
https://github.com/ruprict/jquery-ui/commit/c05074c9552762c836f7f6275b11b9122071b7dc
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.