Dialog: Extend autofocus, starting with [autofocus], then :tabbable content, then buttonpane, then close button, then dialog. Fixes #4731 - Dialog: Add option to set which element gains focus on open

1 files changed, 42 insertions, 0 deletions

diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index b36f6204f..31b245a61 100644
--- a/tests/unit/dialog/dialog_core.js
+++ b/tests/unit/dialog/dialog_core.js
@@ -17,6 +17,8 @@ test("title id", function() {
 	el.remove();
 });
 
+// TODO test for aria-describedby
+// add only when the attribute isn't anywhere yet
 test("ARIA", function() {
 	expect(4);
 
@@ -42,4 +44,44 @@ 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
+			}]
+		};
+
+	// 1. first element inside the dialog matching [autofocus]
+	el = $( "<div><input><input autofocus></div>" ).dialog( options );
+	equal( document.activeElement, el.find( "input" )[ 1 ] );
+	el.remove();
+
+	// 2. tabbable element inside the content element
+	el = $( "<div><input><input></div>" ).dialog( options );
+	equal( document.activeElement, el.find( "input" )[ 0 ] );
+	el.remove();
+
+	// 3. tabbable element inside the buttonpane
+	el = $( "<div>text</div>" ).dialog( options );
+	equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ] );
+	el.remove();
+
+	// 4. the close button
+	el = $( "<div>text</div>" ).dialog();
+	equal( document.activeElement, el.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ] );
+	el.remove();
+
+	// 5. the dialog itself
+	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 ] );
+	el.remove();
+});
+
 })(jQuery);