Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation
|Reported by:||aut0poietic||Owned by:|
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.