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

Author: ruprict

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();

ui/jquery.ui.button.js

@@ -95,19 +95,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 ) {