/[projects]/misc/horsensspejder-web/jquery/jquery-ui-1.10.3/tests/unit/tabs/tabs_core.js
ViewVC logotype

Contents of /misc/horsensspejder-web/jquery/jquery-ui-1.10.3/tests/unit/tabs/tabs_core.js

Parent Directory Parent Directory | Revision Log Revision Log

Revision 2125 - (show annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 3 months ago) by torben
File MIME type: application/javascript
File size: 34004 byte(s) 
initial import
1 (function( $ ) {
2
3 var state = TestHelpers.tabs.state;
4
5 module( "tabs: core" );
6
7 test( "markup structure", function() {
8 expect( 3 );
9 var element = $( "#tabs1" ).tabs();
10 ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
11 ok( element.find( "ul" ).hasClass( "ui-tabs-nav" ), "list item is .ui-tabs-nav" );
12 equal( element.find( ".ui-tabs-panel" ).length, 3,
13 ".ui-tabs-panel elements exist, correct number" );
14 });
15
16 $.each({
17 "deep ul": "#tabs3",
18 "multiple lists, ul first": "#tabs4",
19 "multiple lists, ol first": "#tabs5",
20 "empty list": "#tabs6"
21 }, function( type, selector ) {
22 test( "markup structure: " + type, function() {
23 expect( 2 );
24 var element = $( selector ).tabs();
25 ok( element.hasClass( "ui-tabs" ), "main element is .ui-tabs" );
26 ok( $( selector + "-list" ).hasClass( "ui-tabs-nav" ),
27 "list item is .ui-tabs-nav" );
28 });
29 });
30
31 // #5893 - Sublist in the tab list are considered as tab
32 test( "nested list", function() {
33 expect( 1 );
34
35 var element = $( "#tabs6" ).tabs();
36 equal( element.data( "ui-tabs" ).anchors.length, 2, "should contain 2 tab" );
37 });
38
39 test( "disconnected from DOM", function() {
40 expect( 2 );
41
42 var element = $( "#tabs1" ).remove().tabs();
43 equal( element.find( ".ui-tabs-nav" ).length, 1, "should initialize nav" );
44 equal( element.find( ".ui-tabs-panel" ).length, 3, "should initialize panels" );
45 });
46
47 test( "non-tab list items", function() {
48 expect( 2 );
49
50 var element = $( "#tabs9" ).tabs();
51 equal( element.tabs( "option", "active" ), 0, "defaults to first tab" );
52 equal( element.find( ".ui-tabs-nav li.ui-state-active" ).index(), 1,
53 "first actual tab is active" );
54 });
55
56 test( "aria-controls", function() {
57 expect( 7 );
58 var element = $( "#tabs1" ).tabs(),
59 tabs = element.find( ".ui-tabs-nav li" );
60 tabs.each(function() {
61 var tab = $( this ),
62 anchor = tab.find( ".ui-tabs-anchor" );
63 equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) );
64 });
65
66 element = $( "#tabs2" ).tabs();
67 tabs = element.find( ".ui-tabs-nav li" );
68 equal( tabs.eq( 0 ).attr( "aria-controls" ), "colon:test" );
69 equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" );
70 ok( /^ui-tabs-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" );
71 equal( tabs.eq( 3 ).attr( "aria-controls" ), "custom-id" );
72 });
73
74 test( "accessibility", function() {
75 expect( 49 );
76 var element = $( "#tabs1" ).tabs({
77 active: 1,
78 disabled: [ 2 ]
79 }),
80 tabs = element.find( ".ui-tabs-nav li" ),
81 anchors = tabs.find( ".ui-tabs-anchor" ),
82 panels = element.find( ".ui-tabs-panel" );
83
84 equal( element.find( ".ui-tabs-nav" ).attr( "role" ), "tablist", "tablist role" );
85 tabs.each(function( index ) {
86 var tab = tabs.eq( index ),
87 anchor = anchors.eq( index ),
88 anchorId = anchor.attr( "id" ),
89 panel = panels.eq( index );
90 equal( tab.attr( "role" ), "tab", "tab " + index + " role" );
91 equal( tab.attr( "aria-labelledby" ), anchorId, "tab " + index + " aria-labelledby" );
92 equal( anchor.attr( "role" ), "presentation", "anchor " + index + " role" );
93 equal( anchor.attr( "tabindex" ), -1, "anchor " + index + " tabindex" );
94 equal( panel.attr( "role" ), "tabpanel", "panel " + index + " role" );
95 equal( panel.attr( "aria-labelledby" ), anchorId, "panel " + index + " aria-labelledby" );
96 });
97
98 equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
99 equal( tabs.eq( 1 ).attr( "tabindex" ), 0, "active tab has tabindex=0" );
100 equal( tabs.eq( 1 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" );
101 equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "active panel has aria-expanded=true" );
102 equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "active panel has aria-hidden=false" );
103 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
104 equal( tabs.eq( 0 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" );
105 equal( tabs.eq( 0 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" );
106 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" );
107 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" );
108 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
109 equal( tabs.eq( 2 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" );
110 equal( tabs.eq( 2 ).attr( "aria-disabled" ), "true", "disabled tab has aria-disabled=true" );
111 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" );
112 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" );
113
114 element.tabs( "option", "active", 0 );
115 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
116 equal( tabs.eq( 0 ).attr( "tabindex" ), 0, "active tab has tabindex=0" );
117 equal( tabs.eq( 0 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" );
118 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "active panel has aria-expanded=true" );
119 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "active panel has aria-hidden=false" );
120 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
121 equal( tabs.eq( 1 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" );
122 equal( tabs.eq( 1 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" );
123 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" );
124 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" );
125 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
126 equal( tabs.eq( 2 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" );
127 equal( tabs.eq( 2 ).attr( "aria-disabled" ), "true", "disabled tab has aria-disabled=true" );
128 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" );
129 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" );
130 });
131
132 asyncTest( "accessibility - ajax", function() {
133 expect( 4 );
134 var element = $( "#tabs2" ).tabs(),
135 panel = $( "#custom-id" );
136
137 equal( panel.attr( "aria-live" ), "polite", "remote panel has aria-live" );
138 equal( panel.attr( "aria-busy" ), null, "does not have aria-busy on init" );
139 element.tabs( "option", "active", 3 );
140 equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" );
141 element.one( "tabsload", function() {
142 setTimeout(function() {
143 equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" );
144 start();
145 }, 1 );
146 });
147 });
148
149 asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function() {
150 expect( 92 );
151 var element = $( "#tabs1" ).tabs({
152 collapsible: true
153 }),
154 tabs = element.find( ".ui-tabs-nav li" ),
155 panels = element.find( ".ui-tabs-panel" ),
156 keyCode = $.ui.keyCode;
157
158 element.data( "ui-tabs" ).delay = 50;
159
160 equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
161 tabs.eq( 0 ).simulate( "focus" );
162
163 // down, right, down (wrap), up (wrap)
164 function step1() {
165 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" );
166 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
167 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
168
169 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
170 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" );
171 ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" );
172 equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
173 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
174 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
175 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
176 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
177 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
178 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
179 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
180
181 tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
182 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" );
183 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
184 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
185 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
186 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
187 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
188 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
189 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
190 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
191
192 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
193 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" );
194 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
195 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
196 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
197 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
198 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
199
200 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
201 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" );
202 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
203 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
204 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
205 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
206 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
207 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
208 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
209 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
210
211 setTimeout( step2, 100 );
212 }
213
214 // left, home, space
215 function step2() {
216 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
217 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
218 ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
219 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
220 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
221 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
222 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
223 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
224
225 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
226 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" );
227 equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
228 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
229 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
230 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
231 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
232 ok( panels.eq( 2 ).is( ":visible" ), "third panel is still visible" );
233 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
234 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
235
236 tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
237 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" );
238 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
239 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
240 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is still hidden" );
241 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
242 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
243 ok( panels.eq( 2 ).is( ":visible" ), "third panel is still visible" );
244 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
245 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
246
247 // SPACE activates, cancels delay
248 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
249 setTimeout( step3, 1 );
250 }
251
252 // end, enter
253 function step3() {
254 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
255 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
256 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
257 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
258 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
259 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
260 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
261 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
262
263 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
264 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" );
265 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
266 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
267 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
268 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
269 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
270 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
271 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
272 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
273
274 // ENTER activates, cancels delay
275 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
276 setTimeout( step4, 1 );
277 }
278
279 // enter (collapse)
280 function step4() {
281 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
282 ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
283 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
284 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
285 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
286 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
287 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
288
289 // ENTER collapses if active
290 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
291 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
292 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
293 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
294 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
295
296 setTimeout( start, 1 );
297 }
298
299 setTimeout( step1, 1 );
300 });
301
302 asyncTest( "keyboard support - CTRL navigation", function() {
303 expect( 115 );
304 var element = $( "#tabs1" ).tabs(),
305 tabs = element.find( ".ui-tabs-nav li" ),
306 panels = element.find( ".ui-tabs-panel" ),
307 keyCode = $.ui.keyCode;
308
309 element.data( "ui-tabs" ).delay = 50;
310
311 equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
312 tabs.eq( 0 ).simulate( "focus" );
313
314 // down
315 function step1() {
316 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" );
317 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
318 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
319
320 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN, ctrlKey: true } );
321 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" );
322 ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" );
323 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
324 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
325 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
326 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
327 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
328 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
329 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
330 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
331
332 setTimeout( step2, 100 );
333 }
334
335 // right
336 function step2() {
337 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
338 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
339 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
340 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
341 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" );
342 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
343 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
344
345 tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT, ctrlKey: true } );
346 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" );
347 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
348 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
349 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
350 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
351 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
352 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
353 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
354 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
355
356 setTimeout( step3, 100 );
357 }
358
359 // down (wrap)
360 function step3() {
361 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
362 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
363 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
364 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
365 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
366 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
367 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
368
369 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN, ctrlKey: true } );
370 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" );
371 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
372 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
373 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
374 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
375
376 setTimeout( step4, 100 );
377 }
378
379 // up (wrap)
380 function step4() {
381 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
382 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
383 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
384 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
385
386 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
387 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" );
388 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
389 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
390 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
391 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
392 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
393 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
394 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
395 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
396
397 setTimeout( step5, 100 );
398 }
399
400 // left
401 function step5() {
402 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
403 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
404 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
405 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
406 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
407 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
408 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
409
410 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT, ctrlKey: true } );
411 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" );
412 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
413 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
414 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
415 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
416 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
417 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
418 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
419 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
420
421 setTimeout( step6, 100 );
422 }
423
424 // home
425 function step6() {
426 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
427 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
428 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
429 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
430 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" );
431 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
432 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
433
434 tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME, ctrlKey: true } );
435 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" );
436 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
437 equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
438 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
439 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
440 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
441 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
442 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
443 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
444
445 setTimeout( step7, 100 );
446 }
447
448 // end
449 function step7() {
450 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
451 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
452 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
453 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
454
455 tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END, ctrlKey: true } );
456 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" );
457 equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
458 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
459 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
460 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
461 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
462 ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
463 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
464 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
465
466 setTimeout( step8, 100 );
467 }
468
469 // space
470 function step8() {
471 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
472 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
473 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
474 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
475 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
476 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
477 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
478
479 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
480 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
481 equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
482 ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
483 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
484 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
485 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
486 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
487 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
488
489 setTimeout( start, 1 );
490 }
491
492 setTimeout( step1, 1 );
493 });
494
495 asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() {
496 expect( 50 );
497 var element = $( "#tabs1" ).tabs(),
498 tabs = element.find( ".ui-tabs-nav li" ),
499 panels = element.find( ".ui-tabs-panel" ),
500 keyCode = $.ui.keyCode;
501
502 equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
503 panels.attr( "tabindex", -1 );
504 panels.eq( 0 ).simulate( "focus" );
505
506 function step1() {
507 strictEqual( document.activeElement, panels[ 0 ], "first panel is activeElement" );
508
509 panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
510 strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
511 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
512 equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
513 ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
514 equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" );
515 equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second panel has aria-hidden=false" );
516 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
517 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
518 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
519
520 tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
521 strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
522 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
523 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
524 ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
525 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
526 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
527 ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" );
528 equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
529 equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
530
531 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
532 strictEqual( document.activeElement, tabs[ 0 ], "first tab is activeElement" );
533 ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN wraps focus to first tab" );
534 equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
535 ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
536 equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
537 equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
538 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
539 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
540 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
541
542 panels.eq( 0 ).simulate( "focus" );
543 setTimeout( step2, 1 );
544 }
545
546 function step2() {
547 strictEqual( document.activeElement, panels[ 0 ], "first panel is activeElement" );
548
549 panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
550 strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
551 ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_UP wraps focus to last tab" );
552 equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
553 ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
554 equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
555 equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
556 ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
557 equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
558 equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
559
560 tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
561 strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
562 ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_UP moves focus to previous tab" );
563 equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
564 ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
565 equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" );
566 equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second panel has aria-hidden=false" );
567 ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
568 equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
569 equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
570
571 panels.eq( 1 ).simulate( "focus" );
572 setTimeout( step3, 1 );
573 }
574
575 function step3() {
576 strictEqual( document.activeElement, panels[ 1 ], "second panel is activeElement" );
577
578 panels.eq( 1 ).simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
579 strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
580
581 setTimeout( start, 1 );
582 }
583
584 setTimeout( step1, 1 );
585 });
586
587 test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() {
588 expect( 1 );
589
590 $( "#tabs2" ).tabs({
591 active: 2,
592 beforeLoad: function( event, ui ) {
593 event.preventDefault();
594 ok( /test.html$/.test( ui.ajaxSettings.url ), "should ignore fragment identifier" );
595 }
596 });
597 });
598
599 test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", function() {
600 expect( 2 );
601
602 var element = $("<div><ul><li><a href='#tab'>Tab</a></li></ul><div id='tab'></div></div>");
603 element.appendTo("#qunit-fixture");
604 element.tabs({
605 beforeLoad: function() {
606 event.preventDefault();
607 ok( false, "should not be an ajax tab" );
608 }
609 });
610
611 equal( element.find(".ui-tabs-nav li").attr("aria-controls"), "tab", "aria-contorls attribute is correct" );
612 state( element, 1 );
613 });
614
615 }( jQuery ) );
  ViewVC Help
Powered by ViewVC 1.1.20