Widget: Stop setting ui-state-disabled and aria by default on setting disabled option.

Fixes #5973 - Resizable: disabled should not have the ui-state-disabled class or aria attribute aria-disabled
Fixes #5974 - Draggable: disabled should not have the ui-state-disabled class or aria attribute aria-disabled
Fixes #6039 - Droppable : disabled should not have ui-state-disabled

tests/unit/accordion/accordion_methods.js

@@ -14,10 +14,15 @@ test( "destroy", function() {
 });
 
 test( "enable/disable", function() {
-	expect( 4 );
+	expect( 7 );
 	var element = $( "#list1" ).accordion();
 	state( element, 1, 0, 0 );
 	element.accordion( "disable" );
+
+	ok( element.hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
+	equal( element.attr( "aria-disabled" ), "true", "element gets aria-disabled" );
+	ok( element.hasClass( "ui-accordion-disabled" ), "element gets ui-accordion-disabled" );
+
 	// event does nothing
 	element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "click" );
 	state( element, 1, 0, 0 );

tests/unit/autocomplete/autocomplete_options.js

@@ -88,17 +88,20 @@ asyncTest( "delay", function() {
 });
 
 asyncTest( "disabled", function() {
-	expect( 2 );
+	expect( 5 );
 	var element = $( "#autocomplete" ).autocomplete({
 			source: data,
-			delay: 0,
+			delay: 0
-			disabled: true
 		}),
-		menu = element.autocomplete( "widget" );
+		menu = element.autocomplete( "disable" ).autocomplete( "widget" );
 	element.val( "ja" ).keydown();
 
 	ok( menu.is( ":hidden" ) );
 
+	ok( !element.is( ".ui-state-disabled" ), "element doesn't get ui-state-disabled" );
+	ok( !element.attr( "aria-disabled" ), "element doesn't get aria-disabled" );
+	ok( menu.is( ".ui-autocomplete-disabled" ), "element gets ui-autocomplete-disabled" );
+
 	setTimeout(function() {
 		ok( menu.is( ":hidden" ) );
 		start();

tests/unit/button/button_options.js

@@ -6,16 +6,23 @@
 module( "button: options" );
 
 test( "disabled, explicit value", function() {
-	expect( 4 );
+	expect( 9 );
-	$("#radio01").button({ disabled: false });
-	deepEqual(false, $("#radio01").button("option", "disabled"),
-		"disabled option set to false");
-	deepEqual(false, $("#radio01").prop("disabled"), "element is disabled");
 
-	$("#radio02").button({ disabled: true });
+	var element = $( "#radio01" ).button({ disabled: false });
-	deepEqual(true, $("#radio02").button("option", "disabled"),
+	deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
-		"disabled option set to true");
+	deepEqual( element.prop( "disabled" ), false, "element is disabled" );
-	deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled");
+
+	ok( !element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
+	ok( !element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
+
+	element = $( "#radio02" ).button({ disabled: true });
+
+	ok( element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
+	ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
+	ok( element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
+
+	deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
+	deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
 });
 
 test("disabled, null", function() {

tests/unit/dialog/dialog_methods.js

@@ -101,11 +101,13 @@ test("#4980: Destroy should place element back in original DOM position", functi
 });
 
 test( "enable/disable disabled", function() {
-	expect( 2 );
+	expect( 4 );
 	var element = $( "<div></div>" ).dialog();
 	element.dialog( "disable" );
 	equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" );
 	ok( !element.dialog( "widget" ).hasClass( "ui-dialog-disabled" ), "disable method doesn't add ui-dialog-disabled class" );
+	ok( !element.dialog( "widget" ).hasClass( "ui-state-disabled" ), "disable method doesn't add ui-state-disabled class" );
+	ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" );
 });
 
 test("close", function() {

tests/unit/draggable/draggable_methods.js

@@ -74,7 +74,7 @@ test( "enable", function() {
 });
 
 test( "disable", function() {
-	expect( 7 );
+	expect( 10 );
 
 	element = $( "#draggable2" ).draggable({ disabled: false });
 	TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" );
@@ -91,6 +91,10 @@ test( "disable", function() {
 	equal( element.draggable( "option", "disabled" ), true, "disabled option setter" );
 	TestHelpers.draggable.shouldNotMove( element, ".draggable('option', 'disabled', true)" );
 
+	ok( !element.draggable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
+	ok( !element.draggable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
+	ok( element.draggable( "widget" ).hasClass( "ui-draggable-disabled" ), "element gets ui-draggable-disabled" );
+
 	var expected = element.draggable(),
 		actual = expected.draggable( "disable" );
 	equal( actual, expected, "disable is chainable" );

tests/unit/droppable/droppable_methods.js

@@ -64,23 +64,26 @@ test("enable", function() {
 });
 
 test( "disable", function() {
-	expect(7);
+	expect( 10 );
 
-	var el, actual, expected;
+	var actual, expected,
+		element = $( "#droppable1" ).droppable({ disabled: false });
 
-	el = $("#droppable1").droppable({ disabled: false });
 	TestHelpers.droppable.shouldDrop();
-	el.droppable("disable");
+	element.droppable( "disable" );
 	TestHelpers.droppable.shouldNotDrop();
-	equal(el.droppable("option", "disabled"), true, "disabled option getter");
+	equal( element.droppable( "option", "disabled" ), true, "disabled option getter" );
-	el.droppable("destroy");
+	element.droppable( "destroy" );
-	el.droppable({ disabled: false });
+	element.droppable({ disabled: false });
 	TestHelpers.droppable.shouldDrop();
-	el.droppable("option", "disabled", true);
+	element.droppable( "option", "disabled", true );
-	equal(el.droppable("option", "disabled"), true, "disabled option setter");
+	ok( !element.droppable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
+	ok( !element.droppable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
+	ok( element.droppable( "widget" ).hasClass( "ui-droppable-disabled" ), "element gets ui-droppable-disabled" );
+	equal( element.droppable( "option", "disabled" ), true, "disabled option setter" );
 	TestHelpers.droppable.shouldNotDrop();
 
-	expected = $("<div></div>").droppable(),
+	expected = $( "<div></div>" ).droppable();
 	actual = expected.droppable( "disable" );
 	equal( actual, expected, "disable is chainable" );
 });

tests/unit/progressbar/progressbar_methods.js

@@ -7,6 +7,16 @@ test( "destroy", function() {
 	});
 });
 
+test( "disable", function() {
+	expect( 3 );
+
+	var element = $( "#progressbar" ).progressbar().progressbar( "disable" );
+
+	ok( element.progressbar( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
+	ok( element.progressbar( "widget" ).attr( "aria-disabled" ), "element gets aria-disabled" );
+	ok( element.progressbar( "widget" ).hasClass( "ui-progressbar-disabled" ), "element gets ui-progressbar-disabled" );
+});
+
 test( "value", function() {
 	expect( 3 );
 

tests/unit/resizable/resizable_methods.js

@@ -5,8 +5,17 @@
 
 module( "resizable: methods" );
 
-// this is here to make JSHint pass "unused", and we don't want to
+test( "disable", function() {
-// remove the parameter for when we finally implement
+	expect( 5 );
-$.noop();
+
+	var element = $( "#resizable1" ).resizable({ disabled: false }),
+		chainable = element.resizable( "disable" );
+
+	ok( !element.resizable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
+	ok( !element.resizable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
+	ok( element.resizable( "widget" ).hasClass( "ui-resizable-disabled" ), "element gets ui-resizable-disabled" );
+	equal( element.resizable( "option", "disabled" ), true, "disabled option setter" );
+	equal( chainable, element, "disable is chainable" );
+});
 
 })(jQuery);

tests/unit/selectable/selectable_methods.js

@@ -72,33 +72,39 @@ test("enable", function() {
 });
 
 test( "disable", function() {
-	expect(3);
+	expect( 6 );
-	var expected, actual,
+	var chainable,
 		fired = false,
-		el = $("#selectable1");
+		element = $( "#selectable1" );
 
-	el.selectable({
+	element.selectable({
 		disabled: false,
-		start: function() { fired = true; }
+		start: function() {
+			fired = true;
+		}
 	});
-	el.simulate( "drag", {
+	element.simulate( "drag", {
 		dx: 20,
 		dy: 20
 	});
 	equal( fired, true, "start fired" );
-	el.selectable("disable");
+
+	chainable = element.selectable( "disable" );
 	fired = false;
 
-	el.simulate( "drag", {
+	element.simulate( "drag", {
 		dx: 20,
 		dy: 20
 	});
 	equal( fired, false, "start fired" );
-	el.selectable("destroy");
 
-	expected = $("<div></div>").selectable();
+	ok( !element.selectable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
-	actual = expected.selectable("disable");
+	ok( !element.selectable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
-	equal(actual, expected, "disable is chainable");
+	ok( element.selectable( "widget" ).hasClass( "ui-selectable-disabled" ), "element gets ui-selectable-disabled" );
+
+	element.selectable( "destroy" );
+
+	equal( chainable, element, "disable is chainable" );
 });
 
 })(jQuery);

tests/unit/slider/slider_methods.js

@@ -49,7 +49,7 @@ test( "enable", function() {
 });
 
 test( "disable", function() {
-	expect( 5 );
+	expect( 6 );
 	var element,
 		expected = $( "<div></div>" ).slider(),
 		actual = expected.slider( "disable" );
@@ -61,6 +61,7 @@ test( "disable", function() {
 	element.slider( "disable" );
 	ok( element.hasClass( "ui-state-disabled" ), "slider has ui-state-disabled class after disable method call" );
 	ok( element.hasClass( "ui-slider-disabled" ), "slider has ui-slider-disabled class after disable method call" );
+	ok( !element.attr( "aria-disabled" ), "slider does not have aria-disabled attr after disable method call" );
 });
 
 test( "value", function() {

tests/unit/sortable/sortable_methods.js

@@ -65,28 +65,29 @@ test("enable", function() {
 });
 
 test( "disable", function() {
-	expect(7);
+	expect( 9 );
 
-	var el, actual, expected;
+	var chainable,
+		element = $( "#sortable" ).sortable({ disabled: false });
 
-	el = $("#sortable").sortable({ disabled: false });
+	TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" );
-	TestHelpers.sortable.sort($("li", el)[0], 0, 44, 2, ".sortable({ disabled: false })");
 
-	el.sortable("disable");
+	chainable = element.sortable( "disable" );
-	TestHelpers.sortable.sort($("li", el)[0], 0, 44, 0, "disabled.sortable getter");
+	TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 0, "disabled.sortable getter" );
 
-	el.sortable("destroy");
+	element.sortable( "destroy" );
 
-	el.sortable({ disabled: false });
+	element.sortable({ disabled: false });
-	TestHelpers.sortable.sort($("li", el)[0], 0, 44, 2, ".sortable({ disabled: false })");
+	TestHelpers.sortable.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" );
-	el.sortable("option", "disabled", true);
+	element.sortable( "option", "disabled", true);
-	equal(el.sortable("option", "disabled"), true, "disabled option setter");
+	equal( element.sortable( "option", "disabled" ), true, "disabled option setter" );
-	ok(el.sortable("widget").is(":not(.ui-state-disabled)"), "sortable element does not get ui-state-disabled since it's an interaction");
-	TestHelpers.sortable.sort($("li", el)[0], 0, 44, 0, ".sortable('option', 'disabled', true)");
 
-	expected = $("<div></div>").sortable(),
+	ok( !element.sortable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" );
-	actual = expected.sortable("disable");
+	ok( !element.sortable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
-	equal(actual, expected, "disable is chainable");
+	ok( element.sortable( "widget" ).hasClass( "ui-sortable-disabled" ), "element gets ui-sortable-disabled" );
+
+	TestHelpers.sortable.sort($( "li", element )[ 0 ], 0, 44, 0, ".sortable('option', 'disabled', true)" );
+	equal( chainable, element, "disable is chainable" );
 });
 
 })(jQuery);

tests/unit/spinner/spinner_methods.js

@@ -12,7 +12,7 @@ test( "destroy", function() {
 });
 
 test( "disable", function() {
-	expect( 14 );
+	expect( 16 );
 	var element = $( "#spin" ).val( 2 ).spinner(),
 		wrapper = $( "#spin" ).spinner( "widget" );
 
@@ -21,6 +21,8 @@ test( "disable", function() {
 
 	element.spinner( "disable" );
 	ok( wrapper.hasClass( "ui-spinner-disabled" ), "after: wrapper has ui-spinner-disabled class" );
+	ok( wrapper.hasClass( "ui-state-disabled" ), "after: wrapper has ui-state-disabled class" );
+	ok( !wrapper.attr( "aria-disabled" ), "after: wrapper does not have aria-disabled attr" );
 	ok( element.is( ":disabled"), "after: input has disabled attribute" );
 
 	simulateKeyDownUp( element, $.ui.keyCode.UP );

tests/unit/tabs/tabs_options.js

@@ -144,24 +144,40 @@ test( "{ collapsible: true }", function() {
 });
 
 test( "disabled", function() {
-	expect( 10 );
+	expect( 22 );
 
 	// fully enabled by default
 	var element = $( "#tabs1" ).tabs();
 	disabled( element, false );
 
+	ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
+	ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
+	ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
+
 	// disable single tab
 	element.tabs( "option", "disabled", [ 1 ] );
 	disabled( element, [ 1 ] );
 
+	ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
+	ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
+	ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
+
 	// disabled active tab
 	element.tabs( "option", "disabled", [ 0, 1 ] );
 	disabled( element, [ 0, 1 ] );
 
+	ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
+	ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
+	ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
+
 	// disable all tabs
 	element.tabs( "option", "disabled", [ 0, 1, 2 ] );
 	disabled( element, true );
 
+	ok( !element.tabs( "widget" ).hasClass( "ui-state-disabled" ), "after: wrapper doesn't have ui-state-disabled class" );
+	ok( !element.tabs( "widget" ).hasClass( "ui-tabs-disabled" ), "after: wrapper doesn't have ui-tabs-disabled class" );
+	ok( !element.tabs( "widget" ).attr( "aria-disabled" ), "after: wrapper doesn't have aria-disabled attr" );
+
 	// enable all tabs
 	element.tabs( "option", "disabled", [] );
 	disabled( element, false );

tests/unit/tooltip/tooltip_methods.js

@@ -54,7 +54,7 @@ test( "open/close with tracking", function() {
 });
 
 test( "enable/disable", function() {
-	expect( 7 );
+	expect( 10 );
 	$.fx.off = true;
 	var tooltip,
 		element = $( "#tooltipped1" ).tooltip();
@@ -66,6 +66,11 @@ test( "enable/disable", function() {
 
 	element.tooltip( "disable" );
 	equal( $( ".ui-tooltip" ).length, 0, "no tooltip when disabled" );
+
+	ok( !element.tooltip( "widget" ).hasClass( "ui-state-disabled" ), "element doesn't get ui-state-disabled" );
+	ok( !element.tooltip( "widget" ).attr( "aria-disabled" ), "element doesn't get aria-disabled" );
+	ok( !element.tooltip( "widget" ).hasClass( "ui-tooltip-disabled" ), "element doesn't get ui-tooltip-disabled" );
+
 	// support: jQuery <1.6.2
 	// support: IE <8
 	// We should use strictEqual( ..., undefined ) when dropping jQuery 1.6.1 support (or IE6/7)

ui/jquery.ui.accordion.js

@@ -161,6 +161,9 @@ $.widget( "ui.accordion", {
 		// #5332 - opacity doesn't cascade to positioned elements in IE
 		// so we need to add the disabled class to the headers and panels
 		if ( key === "disabled" ) {
+			this.element
+				.toggleClass( "ui-state-disabled", !!value )
+				.attr( "aria-disabled", value );
 			this.headers.add( this.headers.next() )
 				.toggleClass( "ui-state-disabled", !!value );
 		}

ui/jquery.ui.button.js

@@ -207,9 +207,6 @@ $.widget( "ui.button", {
 			}
 		}
 
-		// TODO: pull out $.Widget's handling for the disabled option into
-		// $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
-		// be overridden by individual plugins
 		this._setOption( "disabled", options.disabled );
 		this._resetButton();
 	},
@@ -273,11 +270,8 @@ $.widget( "ui.button", {
 	_setOption: function( key, value ) {
 		this._super( key, value );
 		if ( key === "disabled" ) {
-			if ( value ) {
+			this.widget().toggleClass( "ui-state-disabled", !!value );
-				this.element.prop( "disabled", true );
+			this.element.prop( "disabled", !!value );
-			} else {
-				this.element.prop( "disabled", false );
-			}
 			return;
 		}
 		this._resetButton();

ui/jquery.ui.droppable.js

@@ -82,7 +82,7 @@ $.widget("ui.droppable", {
 				return d.is(value);
 			};
 		}
-		$.Widget.prototype._setOption.apply(this, arguments);
+		this._super( key, value );
 	},
 
 	_activate: function(event) {

ui/jquery.ui.menu.js

@@ -350,6 +350,11 @@ $.widget( "ui.menu", {
 				.removeClass( this.options.icons.submenu )
 				.addClass( value.submenu );
 		}
+		if ( key === "disabled" ) {
+			this.element
+				.toggleClass( "ui-state-disabled", !!value )
+				.attr( "aria-disabled", value );
+		}
 		this._super( key, value );
 	},
 

ui/jquery.ui.progressbar.js

@@ -97,7 +97,11 @@ $.widget( "ui.progressbar", {
 			// Don't allow a max less than min
 			value = Math.max( this.min, value );
 		}
-
+		if ( key === "disabled" ) {
+			this.element
+				.toggleClass( "ui-state-disabled", !!value )
+				.attr( "aria-disabled", value );
+		}
 		this._super( key, value );
 	},
 

ui/jquery.ui.slider.js

@@ -427,7 +427,11 @@ $.widget( "ui.slider", $.ui.mouse, {
 			valsLength = this.options.values.length;
 		}
 
-		$.Widget.prototype._setOption.apply( this, arguments );
+		if ( key === "disabled" ) {
+			this.element.toggleClass( "ui-state-disabled", !!value );
+		}
+
+		this._super( key, value );
 
 		switch ( key ) {
 			case "orientation":

ui/jquery.ui.sortable.js

@@ -102,17 +102,6 @@ $.widget("ui.sortable", $.ui.mouse, {
 		return this;
 	},
 
-	_setOption: function(key, value){
-		if ( key === "disabled" ) {
-			this.options[ key ] = value;
-
-			this.widget().toggleClass( "ui-sortable-disabled", !!value );
-		} else {
-			// Don't call widget base _setOption for disable as it adds ui-state-disabled class
-			$.Widget.prototype._setOption.apply(this, arguments);
-		}
-	},
-
 	_mouseCapture: function(event, overrideHandle) {
 		var currentItem = null,
 			validHandle = false,

ui/jquery.ui.spinner.js

@@ -381,13 +381,9 @@ $.widget( "ui.spinner", {
 		this._super( key, value );
 
 		if ( key === "disabled" ) {
-			if ( value ) {
+			this.widget().toggleClass( "ui-state-disabled", !!value );
-				this.element.prop( "disabled", true );
+			this.element.prop( "disabled", !!value );
-				this.buttons.button( "disable" );
+			this.buttons.button( value ? "disable" : "enable" );
-			} else {
-				this.element.prop( "disabled", false );
-				this.buttons.button( "enable" );
-			}
 		}
 	},
 

ui/jquery.ui.widget.js

@@ -345,8 +345,7 @@ $.Widget.prototype = {
 
 		if ( key === "disabled" ) {
 			this.widget()
-				.toggleClass( this.widgetFullName + "-disabled ui-state-disabled", !!value )
+				.toggleClass( this.widgetFullName + "-disabled", !!value );
-				.attr( "aria-disabled", value );
 			this.hoverable.removeClass( "ui-state-hover" );
 			this.focusable.removeClass( "ui-state-focus" );
 		}