Ticket #5973: TitlePane-Focus.patch

dijit/tests/test_TitlePane.html

@@ -19 +19 @@
                 function randomMessageId(){
                         return Math.floor(Math.random() * 3) + 3;
                 }
+
+                dojo.declare("dijit.TestTitlePane", dijit.TitlePane, {
+                        templateString: '<div class="dijitTitlePane">' +
+                                                        '    <div class="dijitTitlePaneTitle" dojoAttachPoint="titleBarNode" style="cursor: default;">' +
+                                                        '        <div dojoAttachEvent="onclick:toggle,onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus" tabindex="0"' +
+                                                        '                waiRole="button" dojoAttachPoint="focusNode,arrowNode" class="dijitInline dijitArrowNode" style="cursor: pointer;"><span dojoAttachPoint="arrowNodeInner" class="dijitArrowNodeInner"></span></div>' +
+                                                        '        <div dojoAttachPoint="titleNode" class="dijitTitlePaneTextNode"></div>' +
+                                                        '    </div>' +
+                                                        '    <div class="dijitTitlePaneContentOuter" dojoAttachPoint="hideNode">' +
+                                                        '        <div class="dijitReset" dojoAttachPoint="wipeNode">' +
+                                                        '            <div class="dijitTitlePaneContentInner" dojoAttachPoint="containerNode" waiRole="region" tabindex="-1">' +
+                                                        '            </div>' +
+                                                        '        </div>' +
+                                                        '    </div>' +
+                                                        '</div>'
+                });
+
         </script>
 
         <style type="text/css">
@@ -87 +104 @@
                 <p>And this is the closing line for the outer title pane.
         </div>
 
+        <h1>Test #7: subclassed title pane (only arrow is selectable and focusable)</h1>
+        <div dojoType="dijit.TestTitlePane" title="Title Pane #7" style="width: 300px;">
+                Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
+                iaculis, nulla id semper faucibus, pede tellus nonummy magna, vitae adipiscing
+                orci arcu ut augue. Nunc condimentum, magna a vestibulum convallis, libero purus
+                pulvinar orci, sed vestibulum urna sem ut pede. More Ipsum...
+                Sed sollicitudin suscipit risus. Nam ullamcorper. Sed nisl lectus, pellentesque
+                nec, malesuada eget, ornare a, libero. Lorem ipsum dolor sit amet,
+                consectetuer adipiscing elit.
+        </div>
+
         <table style="border: solid blue 2px; margin-top: 1em;">
                 <tr>
                         <td>

dijit/templates/TitlePane.html

@@ -1 +1 @@
 <div class="dijitTitlePane">
         <div dojoAttachEvent="onclick:toggle,onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus" tabindex="0"
-                        waiRole="button" class="dijitTitlePaneTitle" dojoAttachPoint="focusNode">
+                        waiRole="button" class="dijitTitlePaneTitle" dojoAttachPoint="titleBarNode,focusNode">
                 <div dojoAttachPoint="arrowNode" class="dijitInline dijitArrowNode"><span dojoAttachPoint="arrowNodeInner" class="dijitArrowNodeInner"></span></div>
                 <div dojoAttachPoint="titleNode" class="dijitTitlePaneTextNode"></div>
         </div>

dijit/TitlePane.js

@@ -121 +121 @@
                 // summary: set the open/close css state for the TitlePane
                 var classes = ["dijitClosed", "dijitOpen"];
                 var boolIndex = this.open;
-                dojo.removeClass(this.focusNode, classes[!boolIndex+0]);
-                this.focusNode.className += " " + classes[boolIndex+0];
+                dojo.removeClass(this.titleBarNode, classes[!boolIndex+0]);
+                this.titleBarNode.className += " " + classes[boolIndex+0];
 
                 // provide a character based indicator for images-off mode
                 this.arrowNodeInner.innerHTML = this.open ? "-" : "+";