Dialog: Improve accessibilty

build/tasks/testswarm.js

@@ -15,6 +15,7 @@ var versions = {
 		"Core": "core/core.html",
 		"Datepicker": "datepicker/datepicker.html",
 		"Dialog": "dialog/dialog.html",
+		"Dialog_deprecated": "dialog/dialog_deprecated.html",
 		"Draggable": "draggable/draggable.html",
 		"Droppable": "droppable/droppable.html",
 		"Effects": "effects/effects.html",

demos/dialog/animated.html

@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../ui/jquery.ui.effect.js"></script>
 	<script src="../../ui/jquery.ui.effect-blind.js"></script>

demos/dialog/default.html

@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>

demos/dialog/modal-confirmation.html

@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>

demos/dialog/modal-form.html

@@ -12,6 +12,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<script src="../../ui/jquery.ui.effect.js"></script>
 	<link rel="stylesheet" href="../demos.css">
@@ -86,10 +87,10 @@
 
 					if ( bValid ) {
 						$( "#users tbody" ).append( "<tr>" +
-							"<td>" + name.val() + "</td>" + 
-							"<td>" + email.val() + "</td>" + 
+							"<td>" + name.val() + "</td>" +
+							"<td>" + email.val() + "</td>" +
 							"<td>" + password.val() + "</td>" +
-						"</tr>" ); 
+						"</tr>" );
 						$( this ).dialog( "close" );
 					}
 				},

demos/dialog/modal-message.html

@@ -12,6 +12,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>

demos/dialog/modal.html

@@ -11,6 +11,7 @@
 	<script src="../../ui/jquery.ui.draggable.js"></script>
 	<script src="../../ui/jquery.ui.position.js"></script>
 	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
 	<script src="../../ui/jquery.ui.dialog.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<script>

grunt.js

@@ -281,7 +281,7 @@ grunt.initConfig({
 		files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
 			// disabling everything that doesn't (quite) work with PhantomJS for now
 			// TODO except for all|index|test, try to include more as we go
-			return !( /(all|index|test|dialog|tabs|tooltip)\.html$/ ).test( file );
+			return !( /(all|index|test|dialog|dialog_deprecated|tabs|tooltip)\.html$/ ).test( file );
 		})
 	},
 	lint: {

tests/unit/all.html

@@ -22,6 +22,7 @@
 			"core/core.html",
 			"datepicker/datepicker.html",
 			"dialog/dialog.html",
+			"dialog/dialog_deprecated.html",
 			"draggable/draggable.html",
 			"droppable/droppable.html",
 			"effects/effects.html",

tests/unit/dialog/dialog.html

@@ -5,6 +5,9 @@
 	<title>jQuery UI Dialog Test Suite</title>
 
 	<script src="../../jquery.js"></script>
+	<script>
+	$.uiBackCompat = false;
+	</script>
 	<link rel="stylesheet" href="../../../external/qunit.css">
 	<script src="../../../external/qunit.js"></script>
 	<script src="../../jquery.simulate.js"></script>
@@ -19,6 +22,7 @@
 			"ui/jquery.ui.mouse.js",
 			"ui/jquery.ui.draggable.js",
 			"ui/jquery.ui.resizable.js",
+			"ui/jquery.ui.button.js",
 			"ui/jquery.ui.dialog.js"
 		]
 	});
@@ -44,6 +48,17 @@ <h2 id="qunit-userAgent"></h2>
 <div id="qunit-fixture">
 	<div id="dialog1"></div>
 	<div id="dialog2"></div>
+	<div id="form-dialog" title="Profile Information">
+		<fieldset>
+			<legend>Please share some personal information</legend>
+			<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+			<label for="favorite-color">Your favorite color</label><input id="favorite-color">
+		</fieldset>
+		<div role="group" aria-describedby="section2">
+			<p id="section2">Some more (optional) information</p>
+			<label for="favorite-food">Favorite food</label><input id="favorite-food">
+		</div>
+	</div>
 </div>
 </body>
 </html>

tests/unit/dialog/dialog_common.js

@@ -23,10 +23,20 @@ TestHelpers.commonWidgetTests( "dialog", {
 		},
 		resizable: true,
 		show: null,
-		title: '',
+		title: null,
 		width: 300,
 
 		// callbacks
-		create: null
+		beforeClose: null,
+		close: null,
+		create: null,
+		drag: null,
+		dragStart: null,
+		dragStop: null,
+		focus: null,
+		open: null,
+		resize: null,
+		resizeStart: null,
+		resizeStop: null
 	}
 });

tests/unit/dialog/dialog_core.js

@@ -17,22 +17,18 @@ test("title id", function() {
 	el.remove();
 });
 
-test("ARIA", function() {
-	expect(4);
+test( "ARIA", function() {
+	expect( 4 );
 
-	var labelledBy,
-		el = $('<div></div>').dialog();
-
-	equal(el.dialog('widget').attr('role'), 'dialog', 'dialog role');
-
-	labelledBy = el.dialog('widget').attr('aria-labelledby');
-	ok(labelledBy.length > 0, 'has aria-labelledby attribute');
-	equal(el.dialog('widget').find('.ui-dialog-title').attr('id'), labelledBy,
-		'proper aria-labelledby attribute');
-
-	equal(el.dialog('widget').find('.ui-dialog-titlebar-close').attr('role'), 'button',
-		'close link role');
+	var el = $( "<div></div>" ).dialog(),
+		wrapper = el.dialog( "widget" );
+	equal( wrapper.attr( "role" ), "dialog", "dialog role" );
+	equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
+	equal( wrapper.attr( "aria-describedby" ), el.attr( "id" ), "aria-describedby added" );
+	el.remove();
 
+	el = $( '<div><div aria-describedby="section2"><p id="section2">descriotion</p></div></div>' ).dialog();
+	strictEqual( el.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" );
 	el.remove();
 });
 
@@ -42,4 +38,46 @@ test("widget method", function() {
 	deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]);
 });
 
+test( "focus tabbable", function() {
+	expect( 5 );
+	var el,
+		options = {
+			buttons: [{
+				text: "Ok",
+				click: $.noop
+			}]
+		};
+
+	el = $( "<div><input><input autofocus></div>" ).dialog( options );
+	equal( document.activeElement, el.find( "input" )[ 1 ], "1. first element inside the dialog matching [autofocus]" );
+	el.remove();
+
+	// IE8 fails to focus the input, <body> ends up being the activeElement
+	// so wait for that stupid browser
+	stop();
+	setTimeout(function() {
+		el = $( "<div><input><input></div>" ).dialog( options );
+		equal( document.activeElement, el.find( "input" )[ 0 ], "2. tabbable element inside the content element" );
+		el.remove();
+
+		el = $( "<div>text</div>" ).dialog( options );
+		equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], "3. tabbable element inside the buttonpane" );
+		el.remove();
+
+		el = $( "<div>text</div>" ).dialog();
+		equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], "4. the close button" );
+		el.remove();
+
+		el = $( "<div>text</div>" ).dialog({
+			autoOpen: false
+		});
+		el.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
+		el.dialog( "open" );
+		equal( document.activeElement, el.parent()[ 0 ], "5. the dialog itself" );
+		el.remove();
+
+		start();
+	}, 13);
+});
+
 })(jQuery);

tests/unit/dialog/dialog_deprecated.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog Test Suite</title>
+
+	<script src="../../jquery.js"></script>
+	<link rel="stylesheet" href="../../../external/qunit.css">
+	<script src="../../../external/qunit.js"></script>
+	<script src="../../jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		css: [ "ui.core", "ui.dialog" ],
+		js: [
+			"ui/jquery.ui.core.js",
+			"ui/jquery.ui.widget.js",
+			"ui/jquery.ui.position.js",
+			"ui/jquery.ui.mouse.js",
+			"ui/jquery.ui.draggable.js",
+			"ui/jquery.ui.resizable.js",
+			"ui/jquery.ui.button.js",
+			"ui/jquery.ui.dialog.js"
+		]
+	});
+	</script>
+
+	<script src="dialog_common.js"></script>
+	<script src="dialog_core.js"></script>
+	<script src="dialog_events.js"></script>
+	<script src="dialog_methods.js"></script>
+	<script src="dialog_options.js"></script>
+	<script src="dialog_test_helpers.js"></script>
+	<script src="dialog_tickets.js"></script>
+	<script src="dialog_deprecated.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Dialog Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+	<div id="dialog1"></div>
+	<div id="dialog2"></div>
+	<div id="form-dialog" title="Profile Information">
+		<fieldset>
+			<legend>Please share some personal information</legend>
+			<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+			<label for="favorite-color">Your favorite color</label><input id="favorite-color">
+		</fieldset>
+		<div role="group" aria-describedby="section2">
+			<p id="section2">Some more (optional) information</p>
+			<label for="favorite-food">Favorite food</label><input id="favorite-food">
+		</div>
+	</div>
+</div>
+</body>
+</html>

tests/unit/dialog/dialog_deprecated.js

@@ -0,0 +1,53 @@
+module("dialog (deprecated): position option with string and array");
+
+if ( !$.ui.ie ) {
+	test("position, right bottom on window w/array", function() {
+		expect( 2 );
+		var el = $('<div></div>').dialog({ position: ["right", "bottom"] }),
+			dialog = el.dialog('widget'),
+			offset = dialog.offset();
+		closeEnough(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft(), 1);
+		closeEnough(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop(), 1);
+		el.remove();
+	});
+
+	test("position, right bottom on window", function() {
+		expect( 2 );
+		var el = $('<div></div>').dialog({ position: "right bottom" }),
+			dialog = el.dialog('widget'),
+			offset = dialog.offset();
+		closeEnough(offset.left, $(window).width() - dialog.outerWidth() + $(window).scrollLeft(), 1);
+		closeEnough(offset.top, $(window).height() - dialog.outerHeight() + $(window).scrollTop(), 1);
+		el.remove();
+	});
+}
+
+test("position, offset from top left w/array", function() {
+	expect( 2 );
+	var el = $('<div></div>').dialog({ position: [10, 10] }),
+		dialog = el.dialog('widget'),
+		offset = dialog.offset();
+	closeEnough(offset.left, 10 + $(window).scrollLeft(), 1);
+	closeEnough(offset.top, 10 + $(window).scrollTop(), 1);
+	el.remove();
+});
+
+test("position, top on window", function() {
+	expect( 2 );
+	var el = $('<div></div>').dialog({ position: "top" }),
+		dialog = el.dialog('widget'),
+		offset = dialog.offset();
+	closeEnough(offset.left, Math.round($(window).width() / 2 - dialog.outerWidth() / 2) + $(window).scrollLeft(), 1);
+	closeEnough(offset.top, $(window).scrollTop(), 1);
+	el.remove();
+});
+
+test("position, left on window", function() {
+	expect( 2 );
+	var el = $('<div></div>').dialog({ position: "left" }),
+		dialog = el.dialog('widget'),
+		offset = dialog.offset();
+	closeEnough(offset.left, 0, 1);
+	closeEnough(offset.top, Math.round($(window).height() / 2 - dialog.outerHeight() / 2) + $(window).scrollTop(), 1);
+	el.remove();
+});

tests/unit/dialog/dialog_events.js

@@ -39,6 +39,51 @@ test("open", function() {
 	el.remove();
 });
 
+
+test( "focus", function() {
+	expect( 5 );
+	var el, other;
+	el = $("#dialog1").dialog({
+		autoOpen: false
+	});
+	other = $("#dialog2").dialog({
+		autoOpen: false
+	});
+
+	el.one( "dialogopen", function() {
+		ok( true, "open, just once" );
+	});
+	el.one( "dialogfocus", function() {
+		ok( true, "focus on open" );
+	});
+	other.dialog( "open" );
+
+	el.one( "dialogfocus", function() {
+		ok( true, "when opening and already open and wasn't on top" );
+	});
+	other.dialog( "open" );
+	el.dialog( "open" );
+
+	el.one( "dialogfocus", function() {
+		ok( true, "when calling moveToTop and wasn't on top" );
+	});
+	other.dialog( "moveToTop" );
+	el.dialog( "moveToTop" );
+
+	el.bind( "dialogfocus", function() {
+		ok( true, "when mousedown anywhere on the dialog and it wasn't on top" );
+	});
+	other.dialog( "moveToTop" );
+	el.trigger( "mousedown" );
+
+	// triggers just once when already on top
+	el.dialog( "open" );
+	el.dialog( "moveToTop" );
+	el.trigger( "mousedown" );
+
+	el.add( other ).remove();
+});
+
 test("dragStart", function() {
 	expect(9);