source: Dev/trunk/src/client/dijit/tests/_KeyNavContainer.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.7 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4
5        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6
7        <title>_KeyNavContainer</title>
8
9        <script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="isDebug: true"></script>
10        <script type="text/javascript">
11                require([
12                        "doh/runner",
13                        "dojo/_base/declare", "dojo/dom", "dojo/keys", "dojo/on", "dojo/parser",
14                        "dijit/a11y", "dijit/focus", "dijit/registry",
15                        "dijit/_WidgetBase", "dijit/_KeyNavContainer",
16                        "dijit/tests/helpers", "dojo/domReady!"
17                ], function(doh, declare, dom, keys, on, parser, a11y, focus, registry, _WidgetBase, _KeyNavContainer, helpers){
18
19                        declare("TestContainer", [_WidgetBase, _KeyNavContainer], {
20                                postCreate: function(){
21                                        this.inherited(arguments);
22                                        this.connectKeyNavHandlers([keys.LEFT_ARROW, keys.UP_ARROW], [keys.RIGHT_ARROW, keys.DOWN_ARROW]);
23                                }
24                        });
25       
26                        declare("TestContained", _WidgetBase, {
27                                // _KeyNavContainer requires children to have focus()
28                                focus: function(){
29                                        this.domNode.focus();
30                                }
31                        });
32
33                        doh.register("parse", function(){
34                                parser.parse();
35                        });
36
37
38                        /*
39                         * Most of _KeyNavContainer is tested indirectly via Menu, Toolbar, etc. test suites, but
40                         * starting to build up some basic tests here.
41                         */
42
43                        doh.register("basic", [
44                                {
45                                        name: "initial",
46                                        runTest: function(){
47                                                var c = registry.byId("container");
48
49                                                // initially container has tabIndex of 0
50                                                doh.is(0, c.domNode.getAttribute("tabIndex"), "container tabIndex=0");
51
52                                                // and all the contents have tabIndex of -1, or no tab index
53                                                doh.f(a11y.isTabNavigable("zero"), "child not tab navigable");
54                                        }
55                                },
56                                {
57                                        name: "tab in",
58                                        runTest: function(t){
59                                                var d = new doh.Deferred();
60
61                                                var c = registry.byId("container");
62
63                                                // focusing container (simulated tabbing into container) should move focus to first child
64                                                c.focus();
65
66                                                setTimeout(d.getTestCallback(function(){
67                                                        doh.is("zero", focus.curNode.id, "focus moved to first child");
68                                                        doh.t(a11y.isTabNavigable("zero"), "child is tab navigable");
69                                                        doh.isNot(0, c.domNode.getAttribute("tabIndex"), "container tabIndex removed or set to -1");
70                                                }), 0);
71
72                                                return d;
73                                        }
74                                },
75                                {
76                                        name: "next",
77                                        runTest: function(t){
78                                                var d = new doh.Deferred();
79
80                                                var c = registry.byId("container");
81
82                                                on.emit(c.domNode, "keydown", {keyCode: keys.DOWN_ARROW, bubbles: true, cancelable: true});
83
84                                                setTimeout(d.getTestCallback(function(){
85                                                        doh.is("one", focus.curNode.id, "focus moved to second child");
86                                                        doh.f(a11y.isTabNavigable("zero"), "zero not tab navigable");
87                                                        doh.t(a11y.isTabNavigable("one"), "one tab navigable");
88                                                }), 0);
89
90                                                return d;
91                                        }
92                                },
93                                {
94                                        name: "previous",
95                                        runTest: function(t){
96                                                var d = new doh.Deferred();
97
98                                                var c = registry.byId("container");
99
100                                                on.emit(c.domNode, "keydown", {keyCode: keys.LEFT_ARROW, bubbles: true, cancelable: true});
101
102                                                setTimeout(d.getTestCallback(function(){
103                                                        doh.is("zero", focus.curNode.id, "focus moved to first child");
104                                                        doh.f(a11y.isTabNavigable("one"), "one not tab navigable");
105                                                        doh.t(a11y.isTabNavigable("zero"), "zero tab navigable");
106                                                }), 0);
107
108                                                return d;
109                                        }
110                                },
111                                {
112                                        name: "tab out",
113                                        runTest: function(t){
114                                                var d = new doh.Deferred();
115
116                                                var c = registry.byId("container");
117
118                                                dom.byId("input").focus();
119
120                                                // tab index on container restored
121                                                setTimeout(d.getTestCallback(function(){
122                                                        doh.f(a11y.isTabNavigable("zero"), "child not tab navigable");
123                                                        doh.is(0, c.domNode.getAttribute("tabIndex"), "container tabIndex restored");
124                                                }), 0);
125
126                                                return d;
127                                        }
128                                },
129                                {
130                                        name: "mouse in",
131                                        runTest: function(t){
132                                                var d = new doh.Deferred();
133
134                                                var c = registry.byId("container");
135
136                                                dom.byId("zero").focus();
137
138                                                // focusing first child directly (simulated mouse click) should remove tabIndex on container
139                                                setTimeout(d.getTestCallback(function(){
140                                                        doh.isNot(0, c.domNode.getAttribute("tabIndex"), "container tabIndex removed or set to -1");
141                                                        doh.t(a11y.isTabNavigable("zero"), "child tab navigable");
142                                                }), 0);
143
144                                                return d;
145                                        }
146                                }
147                        ]);
148
149                        doh.run();
150                });
151
152        </script>
153</head>
154<body class="claro">
155
156        <label for="input">before:</label><input id="input"/>
157        <div id="container" data-dojo-type="TestContainer">
158                <!-- comment just to make sure that numbering isn't thrown off -->
159                <div id="zero" data-dojo-type="TestContained">zero</div>
160                <div id="one" data-dojo-type="TestContained">one</div>
161                <div id="two" data-dojo-type="TestContained">two</div>
162                <div id="three" data-dojo-type="TestContained">three</div>
163        </div>
164</body>
165</html>
Note: See TracBrowser for help on using the repository browser.