Merge branch 'master' into tabs-aria

Author: scottgonzalez

tests/unit/core/core.js

@@ -153,4 +153,14 @@ test( "outerHeight(true) - setter", function() {
 	equal( el.height(), 32, "height set properly when hidden" );
 });
 
+test( "uniqueId / removeUniqueId", function() {
+	var el = $( "img" ).eq( 0 );
+
+	equal( el.attr( "id" ), undefined, "element has no initial id" );
+	el.uniqueId();
+	ok( /ui-id-\d+$/.test( el.attr( "id" ) ), "element has generated id" );
+	el.removeUniqueId();
+	equal( el.attr( "id" ), undefined, "unique id has been removed from element" );
+});
+
 })( jQuery );

tests/unit/dialog/dialog_core.js

@@ -89,26 +89,11 @@ function margin(el, side) {
 module("dialog: core");
 
 test("title id", function() {
-	expect(3);
-
-	var titleId;
-
-	// reset the uuid so we know what values to expect
-	$.ui.dialog.uuid = 0;
+	expect(1);
 
 	el = $('<div></div>').dialog();
-	titleId = dlg().find('.ui-dialog-title').attr('id');
-	equal(titleId, 'ui-dialog-title-1', 'auto-numbered title id');
-	el.remove();
-
-	el = $('<div></div>').dialog();
-	titleId = dlg().find('.ui-dialog-title').attr('id');
-	equal(titleId, 'ui-dialog-title-2', 'auto-numbered title id');
-	el.remove();
-
-	el = $('<div id="foo">').dialog();
-	titleId = dlg().find('.ui-dialog-title').attr('id');
-	equal(titleId, 'ui-dialog-title-foo', 'carried over title id');
+	var titleId = dlg().find('.ui-dialog-title').attr('id');
+	ok( /ui-id-\d+$/.test( titleId ), 'auto-numbered title id');
 	el.remove();
 });
 

tests/unit/menu/menu.html

@@ -55,7 +55,7 @@ <h2 id="qunit-userAgent"></h2>
 	<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
 	<li class="foo"><a class="foo" href="#">Ada</a></li>
 	<li class="foo"><a class="foo" href="#">Adamsville</a></li>
-	<li class="foo"><a class="foo" href="#">Addyston</a></li>
+	<li class="foo"><a id="testID1" class="foo" href="#">Addyston</a></li>
 	<li class="foo"><a class="foo" href="#">Adelphi</a></li>
 </ul>
 
@@ -235,7 +235,7 @@ <h2 id="qunit-userAgent"></h2>
 				<a href="#">Delphi</a>
 				<div>
 					<blockquote><a href="#">Ada</a></blockquote>
-					<blockquote><a href="#">Saarland</a></blockquote>
+					<blockquote><a id="testID2" href="#">Saarland</a></blockquote>
 					<blockquote><a href="#">Salzburg</a></blockquote>
 				</div>
 			</blockquote>
@@ -258,7 +258,7 @@ <h2 id="qunit-userAgent"></h2>
 	<li class="foo"><a class="foo" href="#">Adamsville</a></li>
 	<li class="foo"><a class="foo" href="#">Addyston</a></li>
 	<li class="ui-state-disabled">
-		<a href="#">Delphi</a>
+		<a id="testID3" href="#">Delphi</a>
 		<ul>
 			<li class="foo"><a class="foo" href="#">Ada</a></li>
 			<li class="foo"><a class="foo" href="#">Saarland</a></li>

tests/unit/menu/menu_core.js

@@ -23,7 +23,7 @@ test("accessibility", function () {
 
 	item = menu.find( "li:last" );
 	menu.menu( "focus", $.Event(), item );
-	equal( menu.attr("aria-activedescendant"), "menu1-4", "aria attribute, generated id");
+	ok( /^ui-id-\d+$/.test( menu.attr( "aria-activedescendant" ) ), "aria attribute, generated id");
 });
 
 })(jQuery);

tests/unit/testsuite.js

@@ -138,12 +138,16 @@ TestHelpers.commonWidgetTests = function( widget, settings ) {
 /*
  * Experimental assertion for comparing DOM objects.
  *
- * Serializes an element and some properties and it's children if any, otherwise the text.
+ * Serializes an element and some properties and attributes and it's children if any, otherwise the text.
  * Then compares the result using deepEqual.
  */
 window.domEqual = function( selector, modifier, message ) {
 	var expected, actual,
 		properties = [
+			"disabled",
+			"readOnly"
+		],
+		attributes = [
 			"autocomplete",
 			"aria-activedescendant",
 			"aria-controls",
@@ -159,11 +163,9 @@ window.domEqual = function( selector, modifier, message ) {
 			"aria-valuemin",
 			"aria-valuenow",
 			"class",
-			"disabled",
 			"href",
 			"id",
 			"nodeName",
-			"readOnly",
 			"role",
 			"tabIndex",
 			"title"
@@ -179,7 +181,12 @@ window.domEqual = function( selector, modifier, message ) {
 		var children,
 			result = {};
 		$.each( properties, function( index, attr ) {
-			result[ attr ] = elem.prop( attr );
+			var value = elem.prop( attr );
+			result[ attr ] = value !== undefined ? value : "";
+		});
+		$.each( attributes, function( index, attr ) {
+			var value = elem.attr( attr );
+			result[ attr ] = value !== undefined ? value : "";
 		});
 		children = elem.children();
 		if ( children.length ) {

ui/jquery.ui.core.js

@@ -9,6 +9,9 @@
  */
 (function( $, undefined ) {
 
+var uuid = 0,
+	runiqueId = /^ui-id-\d+$/;
+
 // prevent duplicate loading
 // this is only a problem because we proxy existing functions
 // and we don't want to double proxy them
@@ -107,6 +110,22 @@ $.fn.extend({
 		return 0;
 	},
 
+	uniqueId: function() {
+		return this.each(function() {
+			if ( !this.id ) {
+				this.id = "ui-id-" + (++uuid);
+			}
+		});
+	},
+
+	removeUniqueId: function() {
+		return this.each(function() {
+			if ( runiqueId.test( this.id ) ) {
+				$( this ).removeAttr( "id" );
+			}
+		});
+	},
+
 	disableSelection: function() {
 		return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) +
 			".ui-disableSelection", function( event ) {

ui/jquery.ui.dialog.js

@@ -87,7 +87,6 @@ $.widget("ui.dialog", {
 			options = this.options,
 
 			title = options.title || " ",
-			titleId = $.ui.dialog.getTitleId( this.element ),
 
 			uiDialog = ( this.uiDialog = $( "<div>" ) )
 				.addClass( uiDialogClasses + options.dialogClass )
@@ -105,10 +104,6 @@ $.widget("ui.dialog", {
 						event.preventDefault();
 					}
 				})
-				.attr({
-					role: "dialog",
-					"aria-labelledby": titleId
-				})
 				.mousedown(function( event ) {
 					that.moveToTop( false, event );
 				})
@@ -140,8 +135,8 @@ $.widget("ui.dialog", {
 				.appendTo( uiDialogTitlebarClose ),
 
 			uiDialogTitle = $( "<span>" )
+				.uniqueId()
 				.addClass( "ui-dialog-title" )
-				.attr( "id", titleId )
 				.html( title )
 				.prependTo( uiDialogTitlebar ),
 
@@ -152,6 +147,11 @@ $.widget("ui.dialog", {
 				.addClass( "ui-dialog-buttonset" )
 				.appendTo( uiDialogButtonPane );
 
+		uiDialog.attr({
+			role: "dialog",
+			"aria-labelledby": uiDialogTitle.attr( "id" )
+		});
+
 		uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();
 		this._hoverable( uiDialogTitlebarClose );
 		this._focusable( uiDialogTitlebarClose );

ui/jquery.ui.menu.js

@@ -13,8 +13,7 @@
  */
 (function($) {
 
-var idIncrement = 0,
-	currentEventTarget = null;
+var currentEventTarget = null;
 
 $.widget( "ui.menu", {
 	version: "@VERSION",
@@ -35,12 +34,11 @@ $.widget( "ui.menu", {
 	},
 	_create: function() {
 		this.activeMenu = this.element;
-		this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
 		this.element
+			.uniqueId()
 			.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
 			.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length )
 			.attr({
-				id: this.menuId,
 				role: this.options.role,
 				tabIndex: 0
 			})
@@ -145,18 +143,21 @@ $.widget( "ui.menu", {
 				.removeAttr( "aria-labelledby" )
 				.removeAttr( "aria-expanded" )
 				.removeAttr( "aria-hidden" )
+				.removeAttr( "aria-disabled" )
+				.removeUniqueId()
 				.show();
 
 		// destroy menu items
 		this.element.find( ".ui-menu-item" )
 			.removeClass( "ui-menu-item" )
 			.removeAttr( "role" )
+			.removeAttr( "aria-disabled" )
 			.children( "a" )
+				.removeUniqueId()
 				.removeClass( "ui-corner-all ui-state-hover" )
 				.removeAttr( "tabIndex" )
 				.removeAttr( "role" )
 				.removeAttr( "aria-haspopup" )
-				.removeAttr( "id" )
 				// TODO: is this correct? Don't these exist in the original markup?
 				.children( ".ui-icon" )
 					.remove();
@@ -273,7 +274,6 @@ $.widget( "ui.menu", {
 	refresh: function() {
 		// initialize nested menus
 		var menus,
-			menuId = this.menuId,
 			submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
 				.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
 				.hide()
@@ -290,13 +290,11 @@ $.widget( "ui.menu", {
 			.addClass( "ui-menu-item" )
 			.attr( "role", "presentation" )
 			.children( "a" )
+				.uniqueId()
 				.addClass( "ui-corner-all" )
 				.attr({
 					tabIndex: -1,
-					role: this._itemRole(),
-					id: function( i ) {
-						return menuId + "-" + i;
-					}
+					role: this._itemRole()
 				});
 
 		// initialize unlinked menu-items containing spaces and/or dashes only as dividers

ui/jquery.ui.tabs.js

@@ -345,7 +345,9 @@ $.widget( "ui.tabs", {
 			if ( panel.length) {
 				that.panels = that.panels.add( panel );
 			}
-			tab.attr( "aria-controls", selector.substring( 1 ) );
+			tab
+				.data( "ui-tabs-aria-controls", tab.attr( "aria-controls" ) )
+				.attr( "aria-controls", selector.substring( 1 ) );
 		});
 
 		this.panels
@@ -634,6 +636,16 @@ $.widget( "ui.tabs", {
 			}
 		});
 
+		this.lis.each(function() {
+			var li = $( this ),
+				prev = li.data( "ui-tabs-aria-controls" );
+			if ( prev ) {
+				li.attr( "aria-controls", prev );
+			} else {
+				li.removeAttr( "aria-controls" );
+			}
+		});
+
 		if ( this.options.heightStyle !== "content" ) {
 			this.panels.css( "height", "" );
 		}