Changeset 12144

Timestamp:

01/23/08 07:49:57 (12 months ago)

Author:

becky

Message:

fixes #4411, #5134 refs # 5133, #4025. Focus now goes to the first focusable item when a dialog or tooltip dialog is opened. If there is no focusable item, focus remains on the dialog or tooltip dialog container.

Location:

dijit/trunk

Files:

• Dialog.js (modified) (11 diffs)
• layout/templates/TooltipDialog.html (modified) (1 diff)
• templates/Dialog.html (modified) (2 diffs)
• tests/test_Dialog.html (modified) (1 diff)

dijit/trunk/Dialog.js

@@ -136 +136 @@
                 duration: 400,
 
+                // _firstFocusItem: DomNode
+                //              The pointer to the first focusable node in the dialog
+                _firstFocusItem:null,
+                
                 // _lastFocusItem: DomNode
                 //              The pointer to which node has focus prior to our dialog
@@ -149 +153 @@
                         this.connect(this, "onExecute", "hide");
                         this.connect(this, "onCancel", "hide");
-                        this._modalconnects = [];       
+                        this._modalconnects = [];
                 },
 
@@ -172 +176 @@
                                 "class": dojo.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ")
                         });
+                        
+                        // find and store focusable Items
+                        if (!this.firstFocusItem){
+                                var focusItem = dijit.getFirstInTabbingOrder(this.domNode);
+                                this._firstFocusItem = focusItem ? focusItem : this.domNode;
+                                focusItem = dijit.getLastInTabbingOrder(this.domNode);
+                                this._lastFocusItem = focusItem ? focusItem : this._firstFocusItem;
+                        }
 
                         var node = this.domNode;
@@ -228 +240 @@
                 },
 
-                _findLastFocus: function(/*Event*/ evt){
-                        // summary:  called from onblur of dialog container to determine the last focusable item
-                        this._lastFocused = evt.target;
-                },
-
-                _cycleFocus: function(/*Event*/ evt){
-                        // summary: when tabEnd receives focus, advance focus around to titleBar
-
-                        // on first focus to tabEnd, store the last focused item in dialog
-                        if(!this._lastFocusItem){
-                                this._lastFocusItem = this._lastFocused;
-                        }
-                        this.titleBar.focus();
-                },
-
                 _onKey: function(/*Event*/ evt){
                         // summary: handles the keyboard events for accessibility reasons
                         if(evt.keyCode){
                                 var node = evt.target;
-                                // see if we are shift-tabbing from titleBar
-                                if(node == this.titleBar && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
-                                        if(this._lastFocusItem){
-                                                this._lastFocusItem.focus(); // send focus to last item in dialog if known
+                                var singleFocusItem = (this._firstFocusItem == this._lastFocusItem);
+                                // see if we are shift-tabbing from first focusable item on dialog
+                                if(node == this._firstFocusItem && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
+                                        if(!singleFocusItem){
+                                                dijit.focus(this._lastFocusItem); // send focus to last item in dialog
+                                        }
+                                        dojo.stopEvent(evt);
+                                }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.TAB && !evt.shiftKey){
+                                        if (!singleFocusItem){
+                                                dijit.focus(this._firstFocusItem); // send focus to first item in dialog
                                         }
                                         dojo.stopEvent(evt);
@@ -271 +274 @@
                                         }else if (!dojo.isOpera){
                                                 try{
-                                                        this.titleBar.focus();
+                                                        this._firstFocusItem.focus();
                                                 }catch(e){/*squelch*/}
                                         }
@@ -296 +299 @@
                         this._modalconnects.push(dojo.connect(document.documentElement, "onkeypress", this, "_onKey"));
 
-                        // IE doesn't bubble onblur events - use ondeactivate instead
-                        var ev = typeof(document.ondeactivate) == "object" ? "ondeactivate" : "onblur";
-                        this._modalconnects.push(dojo.connect(this.containerNode, ev, this, "_findLastFocus"));
-
                         dojo.style(this.domNode, "opacity", 0);
                         this.domNode.style.display="block";
@@ -313 +312 @@
                         // set timeout to allow the browser to render dialog
                         setTimeout(dojo.hitch(this, function(){
-                                dijit.focus(this.titleBar);
+                                dijit.focus(this._firstFocusItem);
                         }), 50);
                 },
@@ -372 +371 @@
                 title: "",
 
+                // _firstFocusItem: DomNode
+                //              The pointer to the first focusable node in the dialog
+                _firstFocusItem:null,
+                
                 // _lastFocusItem: DomNode
                 //              The domNode that had focus before we took it.
@@ -382 +385 @@
                         this.inherited("postCreate",arguments);
                         this.connect(this.containerNode, "onkeypress", "_onKey");
-
-                        // IE doesn't bubble onblur events - use ondeactivate instead
-                        var ev = typeof(document.ondeactivate) == "object" ? "ondeactivate" : "onblur";
-                        this.connect(this.containerNode, ev, "_findLastFocus");
                         this.containerNode.title=this.title;
                 },
@@ -396 +395 @@
                 onOpen: function(/*Object*/ pos){
                         // summary: called when dialog is displayed
+                        
+                        // first time we show the dialog, there's some initialization stuff to do                       
+                        if(!this._alreadyInitialized){
+                                this._setup();
+                                this._alreadyInitialized=true;
+                        }
+                        
                         this.orient(this.domNode,pos.aroundCorner, pos.corner);
                         this._loadCheck(); // lazy load trigger
-                        this.containerNode.focus();
+                        dijit.focus(this._firstFocusItem);
+                },
+                
+                _setup: function(){
+                        // find and store focusable Items
+                        var focusItem = dijit.getFirstInTabbingOrder(this.containerNode);
+                        this._firstFocusItem = focusItem ? focusItem : this.containerNode;
+                        focusItem = dijit.getLastInTabbingOrder(this.containerNode);
+                        this._lastFocusItem = focusItem ? focusItem : this._firstFocusItem;
                 },
 
                 _onKey: function(/*Event*/ evt){
                         // summary: keep keyboard focus in dialog; close dialog on escape key
+                        var node = evt.target;
+                        var singleFocusItem = (this._firstFocusItem == this._lastFocusItem);
                         if(evt.keyCode == dojo.keys.ESCAPE){
                                 this.onCancel();
-                        }else if(evt.target == this.containerNode && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
-                                if (this._lastFocusItem){
-                                        this._lastFocusItem.focus();
+                        }else if(node == this._firstFocusItem && evt.shiftKey && evt.keyCode == dojo.keys.TAB){
+                                if(!singleFocusItem){
+                                        dijit.focus(this._lastFocusItem); // send focus to last item in dialog
+                                }
+                                dojo.stopEvent(evt);
+                        }else if(node == this._lastFocusItem && evt.keyCode == dojo.keys.TAB && !evt.shiftKey){
+                                if(!singleFocusItem){
+                                        dijit.focus(this._firstFocusItem); // send focus to first item in dialog
                                 }
                                 dojo.stopEvent(evt);
@@ -415 +436 @@
                                 evt.stopPropagation();
                         }
-                },
-
-                _findLastFocus: function(/*Event*/ evt){
-                        // summary: called from onblur of dialog container to determine the last focusable item
-                        this._lastFocused = evt.target;
-                },
-
-                _cycleFocus: function(/*Event*/ evt){
-                        // summary: when tabEnd receives focus, advance focus around to containerNode
-
-                        // on first focus to tabEnd, store the last focused item in dialog
-                        if(!this._lastFocusItem){
-                                this._lastFocusItem = this._lastFocused;
-                        }
-                        this.containerNode.focus();
                 }
         }       

dijit/trunk/layout/templates/TooltipDialog.html

@@ -1 +1 @@
 <div class="dijitTooltipDialog" >
         <div class="dijitTooltipContainer">
-                <div class ="dijitTooltipContents dijitTooltipFocusNode" dojoAttachPoint="containerNode" tabindex="0" waiRole="dialog"></div>
+                <div class ="dijitTooltipContents dijitTooltipFocusNode" dojoAttachPoint="containerNode" tabindex="-1" waiRole="dialog"></div>
         </div>
-        <span dojoAttachPoint="tabEnd" tabindex="0" dojoAttachEvent="focus:_cycleFocus"></span>
         <div class="dijitTooltipConnector" ></div>
 </div>

dijit/trunk/templates/Dialog.html

@@ -1 @@
-<div class="dijitDialog">
-        <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar" tabindex="0" waiRole="dialog">
-        <span dojoAttachPoint="titleNode" class="dijitDialogTitle">${title}</span>
+<div class="dijitDialog" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title">
+        <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar">
+        <span dojoAttachPoint="titleNode" class="dijitDialogTitle" id="${id}_title">${title}</span>
         <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel">
                 <span dojoAttachPoint="closeText" class="closeText">x</span>
@@ -7 +7 @@
         </div>
                 <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div>
-        <span dojoAttachPoint="tabEnd" dojoAttachEvent="onfocus:_cycleFocus" tabindex="0"></span>
 </div>

dijit/trunk/tests/test_Dialog.html

@@ -162 +162 @@
 <div dojoType="dijit.form.DropDownButton">
         <span>Test slowloading HREF Tooltip Dialog</span>
-        <div dojoType="dijit.TooltipDialog" href="layout/getResponse.php?delay=500&messId=2">
+        <div dojoType="dijit.TooltipDialog" href="layout/getResponse.php?delay=500&messId=2" title="tooltip dialog with no focusable items">
         </div>
 </div> |