7 module("dialog: core");
9 test("title id", function() {
13 element = $("<div></div>").dialog();
15 titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
16 ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
20 test( "ARIA", function() {
23 var element = $( "<div></div>" ).dialog(),
24 wrapper = element.dialog( "widget" );
25 equal( wrapper.attr( "role" ), "dialog", "dialog role" );
26 equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );
27 equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" );
30 element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog();
31 strictEqual( element.dialog( "widget" ).attr( "aria-describedby" ), undefined, "no aria-describedby added, as already present in markup" );
35 test("widget method", function() {
37 var dialog = $("<div>").appendTo("#qunit-fixture").dialog();
38 deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]);
42 asyncTest( "focus tabbable", function() {
52 function checkFocus( markup, options, testFn, next ) {
53 element = $( markup ).dialog( options );
54 setTimeout(function() {
62 checkFocus( "<div><input><input autofocus></div>", options, function() {
63 equal( document.activeElement, element.find( "input" )[ 1 ],
64 "1. first element inside the dialog matching [autofocus]" );
69 checkFocus( "<div><input><input></div>", options, function() {
70 equal( document.activeElement, element.find( "input" )[ 0 ],
71 "2. tabbable element inside the content element" );
76 checkFocus( "<div>text</div>", options, function() {
77 equal( document.activeElement,
78 element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
79 "3. tabbable element inside the buttonpane" );
84 checkFocus( "<div>text</div>", {}, function() {
85 equal( document.activeElement,
86 element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
87 "4. the close button" );
92 element = $( "<div>text</div>" ).dialog({
95 element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
96 element.dialog( "open" );
97 setTimeout(function() {
98 equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" );
107 test( "#7960: resizable handles below modal overlays", function() {
110 var resizable = $( "<div>" ).resizable(),
111 dialog = $( "<div>" ).dialog({ modal: true }),
112 resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ),
113 overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 );
115 ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" );
116 dialog.dialog( "destroy" );
119 asyncTest( "Prevent tabbing out of dialogs", function() {
122 var element = $( "<div><input><input></div>" ).dialog(),
123 inputs = element.find( "input" ),
124 widget = element.dialog( "widget" )[ 0 ];
126 function checkTab() {
127 ok( $.contains( widget, document.activeElement ), "Tab key event moved focus within the modal" );
130 $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true });
131 setTimeout( checkShiftTab );
134 function checkShiftTab() {
135 ok( $.contains( widget, document.activeElement ), "Shift-Tab key event moved focus within the modal" );
142 setTimeout(function() {
143 equal( document.activeElement, inputs[1], "Focus set on second input" );
144 inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB });
146 setTimeout( checkTab );
150 asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() {
152 $( "#dialog1, #dialog2" ).dialog({ autoOpen: false, modal:true });
153 $( "#dialog1" ).dialog( "open" );
154 $( "#dialog2" ).dialog( "open" );
155 $( "#dialog1" ).dialog( "close" );
156 setTimeout(function() {
157 $( "#dialog2" ).dialog( "close" );
158 $( "#favorite-animal" ).focus();
159 ok( true, "event handlers cleaned up (no errors thrown)" );