From 3829a37ca122e923c3a08b964c4b1a946a2a1456 Mon Sep 17 00:00:00 2001 From: Nate Eagle Date: Mon, 15 Oct 2012 16:12:21 -0400 Subject: Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets: Fixes #3534 - Dialog: Modal dialog disables all input elements on page. Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari. Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall. Fixes #5388 - Dialog: Don't change z-index when already at the top. Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events. Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead. Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work. Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle. Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6). Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps. Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog. Fixes #8583 - Dialog: Mouse event wrongly stopped. Fixes #8722 - Dialog: Remove stack option. Fixes #8729 - Dialog: Remove zIndex option. --- tests/visual/dialog/complex-dialogs.html | 89 ++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 tests/visual/dialog/complex-dialogs.html (limited to 'tests/visual/dialog') diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html new file mode 100644 index 000000000..556336d00 --- /dev/null +++ b/tests/visual/dialog/complex-dialogs.html @@ -0,0 +1,89 @@ + + + + + Dialog Visual Test + + + + + + + + + + + + + + + + + + + + + +

WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.

+

EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.

+ +Outside link + +
+

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+

+
+ +
+

Date:

+

+
+ +
+ + +
+ + + -- cgit v1.2.3 From 2a2a2c017c4395799ec07666f4ca14e078b52b5b Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 22 Oct 2012 20:33:15 -0400 Subject: Dialog: Prevent dialog form losing focus (or move it back in IE <= 8). --- tests/visual/dialog/complex-dialogs.html | 2 +- ui/jquery.ui.dialog.js | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) (limited to 'tests/visual/dialog') diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 556336d00..634bfb3d6 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -30,7 +30,7 @@ var datepickerDialog = $( "#dialog-datepicker" ).dialog({ autoOpen: false, - modal: true, + modal: true }), autocompleteDialog = $( "#dialog-autocomplete" ).dialog({ diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 93a49cfd6..2b9846b3a 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -256,8 +256,6 @@ $.widget("ui.dialog", { this.uiDialog.hide(); this._trigger( "close", event ); } - - return this; }, isOpen: function() { @@ -305,6 +303,23 @@ $.widget("ui.dialog", { return this; }, + _keepFocus: function( event ) { + function checkFocus() { + var activeElement = this.document[ 0 ].activeElement, + isActive = this.uiDialog[ 0 ] === activeElement || + $.contains( this.uiDialog[ 0 ], activeElement ); + if ( !isActive ) { + this.uiDialog.focus(); + } + } + event.preventDefault(); + checkFocus.call( this ); + // support: IE + // IE <= 8 doesn't prevent moving focus even with event.preventDefault() + // so we check again later + this._delay( checkFocus ); + }, + _createButtons: function( buttons ) { var that = this, hasButtons = false; @@ -648,6 +663,10 @@ $.extend( $.ui.dialog.overlay, { $el.appendTo( document.body ); + $el.bind( "mousedown", function( event ) { + dialog._keepFocus( event ); + }); + if ( $.fn.bgiframe ) { $el.bgiframe(); } -- cgit v1.2.3 From 14691ae6feea2732ec5aeae57b4275aa0e4d1beb Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 23 Oct 2012 10:31:10 -0400 Subject: Dialog: Save the active element that opened the dialog and restore focus to that. Fixes #8730 - Dialog: Restore focus to opener. --- tests/visual/dialog/complex-dialogs.html | 18 ++++++++++++------ ui/jquery.ui.dialog.js | 9 +++++++++ 2 files changed, 21 insertions(+), 6 deletions(-) (limited to 'tests/visual/dialog') diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 634bfb3d6..264787185 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -22,13 +22,13 @@ + + + + + + + + + + + + + + + +

WHAT: A animated modal dialog, using blind effect to show, explode to hide.

+

EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.

+ +
+

Please enter password to continue.

+ +
+ + + + + -- cgit v1.2.3 From 039ee746d3eaeeaa4ad92ecd8ebf4e6fcd11768c Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 25 Oct 2012 20:47:22 -0400 Subject: Dialog: Visual test page for modal form dialogs --- tests/visual/dialog/form.html | 70 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 tests/visual/dialog/form.html (limited to 'tests/visual/dialog') diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html new file mode 100644 index 000000000..c974a500a --- /dev/null +++ b/tests/visual/dialog/form.html @@ -0,0 +1,70 @@ + + + + + Dialog Visual Test + + + + + + + + + + + + + + + + + + +

WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.

+

EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.

+

For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.

+

NOTE: Using fieldset with legend seems to have the same result as using role="group" and aria-describedby. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.

+ +
+
+ Please share some personal information + + +
+
+

Some more (optional) information

+ +
+
+ + + +
+

Please enter password to continue.

+ +
+ + + + + -- cgit v1.2.3 From 68cab60fa758b34c024742daa9dbc3e6bf6a0521 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 26 Oct 2012 10:53:17 -0400 Subject: Removed bgiframe. --- demos/dialog/animated.html | 1 - demos/dialog/default.html | 1 - demos/dialog/modal-confirmation.html | 1 - demos/dialog/modal-form.html | 1 - demos/dialog/modal-message.html | 1 - demos/dialog/modal.html | 1 - external/jquery.bgiframe-2.1.2.js | 39 -------------------------------- tests/unit/dialog/dialog.html | 1 - tests/visual/dialog/animated.html | 1 - tests/visual/dialog/complex-dialogs.html | 1 - tests/visual/dialog/form.html | 1 - tests/visual/dialog/performance.html | 1 - ui/jquery.ui.autocomplete.js | 4 ---- ui/jquery.ui.dialog.js | 8 ------- ui/jquery.ui.position.js | 4 ---- ui/jquery.ui.tooltip.js | 3 --- 16 files changed, 69 deletions(-) delete mode 100644 external/jquery.bgiframe-2.1.2.js (limited to 'tests/visual/dialog') diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index 808d0e926..92d7b642d 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Animation - diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 5dcb1a05c..19cf912e2 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Default functionality - diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index cca3b296d..b9bf6396f 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal confirmation - diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index 48452f862..1c0cd6fc3 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal form - diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index d44331017..3c877b26e 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal message - diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 2b1ac2574..9bb6d95b2 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Basic modal - diff --git a/external/jquery.bgiframe-2.1.2.js b/external/jquery.bgiframe-2.1.2.js deleted file mode 100644 index 5cd38bb1d..000000000 --- a/external/jquery.bgiframe-2.1.2.js +++ /dev/null @@ -1,39 +0,0 @@ -/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) - * Licensed under the MIT License (LICENSE.txt). - * - * Version 2.1.2 - */ - -(function($){ - -$.fn.bgiframe = ($.browser.msie && /msie 6\.0/i.test(navigator.userAgent) ? function(s) { - s = $.extend({ - top : 'auto', // auto == .currentStyle.borderTopWidth - left : 'auto', // auto == .currentStyle.borderLeftWidth - width : 'auto', // auto == offsetWidth - height : 'auto', // auto == offsetHeight - opacity : true, - src : 'javascript:false;' - }, s); - var html = '