Button: Let change handler handle display and aria update. Fixed #551…

…8 - Button: Incorrect state after double click in Firefox

tests/unit/button/button.html

@@ -68,6 +68,7 @@ <h2 id="qunit-userAgent"></h2>
 </form>
 
 <input type="checkbox" id="check"><label for="check">Toggle</label>
+<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
 
 <div><input id="submit" type="submit" value="Label"></div>
 

tests/unit/button/button_events.js

@@ -23,4 +23,15 @@ test( "when button loses focus, ensure active state is removed (#8559)", functio
 	}).focus().simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ).simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
 });
 
+test( "ensure checked and aria after single click on checkbox label button", function() {
+	expect( 3 );
+
+	$("#check2").button().change( function() {
+		var lbl = $( this ).button("widget");
+		ok( this.checked, "checked ok" );
+		ok( lbl.attr("aria-pressed") === "true", "aria ok" );
+		ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
+	}).button("widget").simulate("click");
+});
+
 })(jQuery);

ui/jquery.ui.button.js

@@ -147,8 +147,6 @@ $.widget( "ui.button", {
 				if ( options.disabled || clickDragged ) {
 					return false;
 				}
-				$( this ).toggleClass( "ui-state-active" );
-				that.buttonElement.attr( "aria-pressed", that.element[0].checked );
 			});
 		} else if ( this.type === "radio" ) {
 			this.buttonElement.bind( "click" + this.eventNamespace, function() {