Button: modified the event bindings for focus and blur. Fixed #6711 - checkbox/radio...

(cherry picked from commit c49dbe0f0120dec9922d5cb6459a93d33ef41579)

diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js
index 79bbfeb5c0a731ad965ad435fbc00e07c7d47447..9a7ccae43127322fc51ffd0e6bb5ee102b51a3a0 100644 (file)
--- a/tests/unit/button/button_tickets.js
+++ b/tests/unit/button/button_tickets.js
@@ -20,6 +20,14 @@ test( "#6262 - buttonset not applying ui-corner to invisible elements", function
        ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
 });
 
+test( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
+       var check = $( "#check" ).button(),
+               label = $( "label[for='check']" );
+       ok( !label.is( ".ui-state-focus" ) );
+       check.focus();
+       ok( label.is( ".ui-state-focus" ) );
+});
+
 test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
        var group = $( "<span><label for='t7092a'/><input type='checkbox' id='t7092a'/></span>" );
        group.find( "input:checkbox" ).button();

diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
index 1bc016edd8726735895d0184feee9a471f857717..e8a0935ddad410f59f43bd264913aea26661f126 100644 (file)
--- a/ui/jquery.ui.button.js
+++ b/ui/jquery.ui.button.js
@@ -94,19 +94,21 @@ $.widget( "ui.button", {
                                }
                                $( this ).removeClass( hoverClass );
                        })
-                       .bind( "focus.button", function() {
-                               // no need to check disabled, focus won't be triggered anyway
-                               $( this ).addClass( focusClass );
-                       })
-                       .bind( "blur.button", function() {
-                               $( this ).removeClass( focusClass );
-                       })
                        .bind( "click.button", function( event ) {
                                if ( options.disabled ) {
                                        event.stopImmediatePropagation();
                                }
                        });
 
+               this.element
+                       .bind( "focus.button", function() {
+                               // no need to check disabled, focus won't be triggered anyway
+                               self.buttonElement.addClass( focusClass );
+                       })
+                       .bind( "blur.button", function() {
+                               self.buttonElement.removeClass( focusClass );
+                       });
+
                if ( toggleButton ) {
                        this.element.bind( "change.button", function() {
                                if ( clickDragged ) {