Dialog: Extend autofocus, starting with [autofocus], then :tabbable content, then...

diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index b36f6204fc52ac2c57edb89c97e82153b58ff03b..31b245a61f12bc121ea6121857069790c05fcdb9 100644 (file)
--- 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);

diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
index 03bb160fb647b028827087a3bc1b977d8db01c8e..5c2e1d8a12cd5d8ae934aa121270c48cb67c5fb2 100644 (file)
--- a/tests/visual/dialog/complex-dialogs.html
+++ b/tests/visual/dialog/complex-dialogs.html
@@ -107,7 +107,7 @@
 
 <div id="dialog-datepicker" title="A dialog with a datepicker">
        <p>Date: <input id="datepicker"></p>
-       <p><button id="open-autocomplete">Open another window with an autocomplete and a tooltip.</button></p>
+       <p><button id="open-autocomplete" autofocus>Open another window with an autocomplete and a tooltip.</button></p>
 </div>
 
 <div id="dialog-autocomplete">

diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
index 0033898234a4597bf08d9fffeb45998879b23322..c48d1a804e1db04682b073769fa2b58d2f9fa371 100644 (file)
--- a/ui/jquery.ui.dialog.js
+++ b/ui/jquery.ui.dialog.js
@@ -224,15 +224,24 @@ $.widget("ui.dialog", {
                return this;
        },
 
-       // TODO check if dialog already has focus, merge with _keepFocus
        _focusTabbable: function() {
-               // set focus to the first tabbable element in the content area or the first button
-               // if there are no tabbable elements, set focus on the dialog itself
-               var hasFocus = this.element.find( ":tabbable" );
+               // 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]" );
                if ( !hasFocus.length ) {
-                       hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
+                       hasFocus = this.element.find( ":tabbable" );
                        if ( !hasFocus.length ) {
-                               hasFocus = this.uiDialog;
+                               hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
+                               if ( !hasFocus.length ) {
+                                       hasFocus = this.uiDialogTitlebarClose.filter( ":tabbable" );
+                                       if ( !hasFocus.length ) {
+                                               hasFocus = this.uiDialog;
+                                       }
+                               }
                        }
                }
                hasFocus.eq( 0 ).focus();
@@ -316,7 +325,6 @@ $.widget("ui.dialog", {
                        .prependTo( this.uiDialog );
                this._on( this.uiDialogTitlebar, {
                        mousedown: function() {
-                               // TODO call _focusTabbable or _keepFocus
                                // Dialog isn't getting focus when dragging (#8063)
                                this.uiDialog.focus();
                        }