From 144268a2eb88184c34ee82a7ee422d9db8aa12a9 Mon Sep 17 00:00:00 2001 From: Scott González Date: Thu, 14 Nov 2013 10:10:42 -0500 Subject: Dialog test: Ensure dialog is tall enough to be scrolled. --- tests/unit/dialog/dialog.html | 2 ++ 1 file changed, 2 insertions(+) (limited to 'tests') diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index 7943b425b..d8506a1bd 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -52,6 +52,8 @@
+ +
...
Please share some personal information -- cgit v1.2.3 From ce5539f3681f60b997b53785c84ff66b5a61f08f Mon Sep 17 00:00:00 2001 From: Scott González Date: Thu, 14 Nov 2013 10:32:09 -0500 Subject: Dialog tests: Work around focus issue in IE8. --- tests/unit/dialog/dialog_methods.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'tests') diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index 8918e8d36..d315e5fc3 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -220,6 +220,11 @@ asyncTest( "#8958: dialog can be opened while opening", function() { } }); + // Support: IE8 + // For some reason the #favorite-color input doesn't get focus if we don't + // focus the body first, causing the test to hang. + $( "body" ).focus(); + $( "#favorite-animal" ) // We focus the input to start the test. Once it receives focus, the // dialog will open. Opening the dialog, will cause an element inside -- cgit v1.2.3 From 0e5a2e126ab4179f1ec83e1e4e773058b49e336d Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 2 Oct 2013 17:27:43 +0200 Subject: Dialog: Restore focus to the previously focused element when window regains focus. Fixes #9101 - Dialog: Track last focused element instead of always focusing the first tabbable element --- tests/unit/dialog/dialog_core.js | 48 ++++++++++++++++++++++++++++------------ ui/jquery.ui.dialog.js | 33 +++++++++++++++++++-------- 2 files changed, 58 insertions(+), 23 deletions(-) (limited to 'tests') diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index e85759dc9..062d44576 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -40,7 +40,7 @@ test("widget method", function() { }); asyncTest( "focus tabbable", function() { - expect( 5 ); + expect( 6 ); var element, options = { buttons: [{ @@ -50,6 +50,12 @@ asyncTest( "focus tabbable", function() { }; function checkFocus( markup, options, testFn, next ) { + + // Support: IE8 + // For some reason the focus doesn't get set properly if we don't + // focus the body first. + $( "body" ).focus(); + element = $( markup ).dialog( options ); setTimeout(function() { testFn(); @@ -59,43 +65,57 @@ asyncTest( "focus tabbable", function() { } function step1() { + element = $( "
" ).dialog( options ); + setTimeout(function() { + var input = element.find( "input:last" ).focus().blur(); + element.dialog( "instance" )._focusTabbable(); + setTimeout(function() { + equal( document.activeElement, input[ 0 ], + "1. an element that was focused previously." ); + element.remove(); + setTimeout( step2 ); + }); + }); + } + + function step2() { checkFocus( "
", options, function() { equal( document.activeElement, element.find( "input" )[ 1 ], - "1. first element inside the dialog matching [autofocus]" ); - }, step2 ); + "2. first element inside the dialog matching [autofocus]" ); + }, step3 ); } - function step2() { + function step3() { checkFocus( "
", options, function() { equal( document.activeElement, element.find( "input" )[ 0 ], - "2. tabbable element inside the content element" ); - }, step3 ); + "3. tabbable element inside the content element" ); + }, step4 ); } - function step3() { + function step4() { checkFocus( "
text
", options, function() { equal( document.activeElement, element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ], - "3. tabbable element inside the buttonpane" ); - }, step4 ); + "4. tabbable element inside the buttonpane" ); + }, step5 ); } - function step4() { + function step5() { checkFocus( "
text
", {}, function() { equal( document.activeElement, element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ], - "4. the close button" ); - }, step5 ); + "5. the close button" ); + }, step6 ); } - function step5() { + function step6() { element = $( "
text
" ).dialog({ autoOpen: false }); element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); element.dialog( "open" ); setTimeout(function() { - equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" ); + equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" ); element.remove(); start(); }); diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index c5bd42ab5..2684b7615 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -118,6 +118,8 @@ $.widget( "ui.dialog", { } this._isOpen = false; + + this._trackFocus(); }, _init: function() { @@ -178,6 +180,7 @@ $.widget( "ui.dialog", { } this._isOpen = false; + this._focusedElement = null; this._destroyOverlay(); if ( !this.opener.filter(":focusable").focus().length ) { @@ -256,20 +259,24 @@ $.widget( "ui.dialog", { _focusTabbable: function() { // Set focus to the first match: - // 1. First element inside the dialog matching [autofocus] - // 2. Tabbable element inside the content element - // 3. Tabbable element inside the buttonpane - // 4. The close button - // 5. The dialog itself - var hasFocus = this.element.find("[autofocus]"); + // 1. An element that was focused previously + // 2. First element inside the dialog matching [autofocus] + // 3. Tabbable element inside the content element + // 4. Tabbable element inside the buttonpane + // 5. The close button + // 6. The dialog itself + var hasFocus = this._focusedElement; + if ( !hasFocus ) { + hasFocus = this.element.find( "[autofocus]" ); + } if ( !hasFocus.length ) { - hasFocus = this.element.find(":tabbable"); + hasFocus = this.element.find( ":tabbable" ); } if ( !hasFocus.length ) { - hasFocus = this.uiDialogButtonPane.find(":tabbable"); + hasFocus = this.uiDialogButtonPane.find( ":tabbable" ); } if ( !hasFocus.length ) { - hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); + hasFocus = this.uiDialogTitlebarClose.filter( ":tabbable" ); } if ( !hasFocus.length ) { hasFocus = this.uiDialog; @@ -552,6 +559,14 @@ $.widget( "ui.dialog", { .css( "position", position ); }, + _trackFocus: function() { + this._on( this.widget(), { + "focusin": function( event ) { + this._focusedElement = $( event.target ); + } + }); + }, + _minHeight: function() { var options = this.options; -- cgit v1.2.3 From 3945a8f074e8b101a2cdcba4a3b1cdbe9a8356e2 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 15 Nov 2013 12:51:10 +0100 Subject: Menu: Update unit test that regressed from style changes (see 9910e938aad1090339a2c7f60693093ee18aba82) --- tests/unit/menu/menu_common.js | 2 +- tests/unit/menu/menu_events.js | 12 ++++++------ tests/unit/menu/menu_options.js | 9 +++------ 3 files changed, 10 insertions(+), 13 deletions(-) (limited to 'tests') diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 2404ebe02..099dd091e 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", { items: "> *", menus: "ul", position: { - my: "left top", + my: "left-1 top", at: "right top" }, role: "menu", diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 0b89b86ac..9d74b4bbb 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -389,15 +389,15 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus" log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,10", "Keydown PAGE_DOWN" ); + equal( logOutput(), "keydown,11", "Keydown PAGE_DOWN" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,20", "Keydown PAGE_DOWN" ); + equal( logOutput(), "keydown,22", "Keydown PAGE_DOWN" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,10", "Keydown PAGE_UP" ); + equal( logOutput(), "keydown,11", "Keydown PAGE_UP" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); @@ -484,15 +484,15 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f function menukeyboard3() { log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,10", "Keydown PAGE_DOWN" ); + equal( logOutput(), "keydown,11", "Keydown PAGE_DOWN" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal( logOutput(), "keydown,20", "Keydown PAGE_DOWN" ); + equal( logOutput(), "keydown,22", "Keydown PAGE_DOWN" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal( logOutput(), "keydown,10", "Keydown PAGE_UP" ); + equal( logOutput(), "keydown,11", "Keydown PAGE_UP" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index 527cc4784..c76673345 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -66,13 +66,12 @@ test( "{ icons: { submenu: 'custom' } }", function() { test( "{ role: 'menu' } ", function() { var element = $( "#menu1" ).menu(), items = element.find( "li" ); - expect( 2 + 4 * items.length ); + expect( 2 + 3 * items.length ); equal( element.attr( "role" ), "menu" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); - ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -82,13 +81,12 @@ test( "{ role: 'listbox' } ", function() { role: "listbox" }), items = element.find( "li" ); - expect( 2 + 4 * items.length ); + expect( 2 + 3 * items.length ); equal( element.attr( "role" ), "listbox" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); - ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -98,13 +96,12 @@ test( "{ role: null }", function() { role: null }), items = element.find( "li" ); - expect( 2 + 4 * items.length ); + expect( 2 + 3 * items.length ); strictEqual( element.attr( "role" ), undefined ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); - ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); -- cgit v1.2.3