Ticket #6711 (closed bug: fixed)

Opened 4 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 3 years ago by ruprict

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.

comment:2 Changed 3 years ago by Glenn Goodrich

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

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

comment:3 Changed 3 years ago by Glenn Goodrich

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

comment:4 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.14
Note: See TracTickets for help on using tickets.