1 |
(function( $ ) { |
2 |
|
3 |
var setupTeardown = TestHelpers.accordion.setupTeardown, |
4 |
state = TestHelpers.accordion.state; |
5 |
|
6 |
module( "accordion: core", setupTeardown() ); |
7 |
|
8 |
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) { |
9 |
test( "markup structure: " + type, function() { |
10 |
expect( 4 ); |
11 |
var element = $( selector ).accordion(); |
12 |
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" ); |
13 |
equal( element.find( ".ui-accordion-header" ).length, 3, |
14 |
".ui-accordion-header elements exist, correct number" ); |
15 |
equal( element.find( ".ui-accordion-content" ).length, 3, |
16 |
".ui-accordion-content elements exist, correct number" ); |
17 |
deepEqual( element.find( ".ui-accordion-header" ).next().get(), |
18 |
element.find( ".ui-accordion-content" ).get(), |
19 |
"content panels come immediately after headers" ); |
20 |
}); |
21 |
}); |
22 |
|
23 |
test( "handle click on header-descendant", function() { |
24 |
expect( 1 ); |
25 |
var element = $( "#navigation" ).accordion(); |
26 |
$( "#navigation h2:eq(1) a" ).click(); |
27 |
state( element, 0, 1, 0 ); |
28 |
}); |
29 |
|
30 |
test( "accessibility", function () { |
31 |
expect( 37 ); |
32 |
var element = $( "#list1" ).accordion({ |
33 |
active: 1 |
34 |
}), |
35 |
headers = element.find( ".ui-accordion-header" ); |
36 |
|
37 |
equal( element.attr( "role" ), "tablist", "element role" ); |
38 |
headers.each(function( i ) { |
39 |
var header = headers.eq( i ), |
40 |
panel = header.next(); |
41 |
equal( header.attr( "role" ), "tab", "header " + i + " role" ); |
42 |
equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" ); |
43 |
equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" ); |
44 |
equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" ); |
45 |
}); |
46 |
|
47 |
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" ); |
48 |
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" ); |
49 |
equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" ); |
50 |
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" ); |
51 |
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" ); |
52 |
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); |
53 |
equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" ); |
54 |
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" ); |
55 |
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" ); |
56 |
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); |
57 |
equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" ); |
58 |
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" ); |
59 |
|
60 |
element.accordion( "option", "active", 0 ); |
61 |
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header has tabindex=0" ); |
62 |
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" ); |
63 |
equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" ); |
64 |
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" ); |
65 |
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" ); |
66 |
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); |
67 |
equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" ); |
68 |
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" ); |
69 |
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" ); |
70 |
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); |
71 |
equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" ); |
72 |
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" ); |
73 |
}); |
74 |
|
75 |
asyncTest( "keyboard support", function() { |
76 |
expect( 13 ); |
77 |
var element = $( "#list1" ).accordion(), |
78 |
headers = element.find( ".ui-accordion-header" ), |
79 |
anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ), |
80 |
keyCode = $.ui.keyCode; |
81 |
equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" ); |
82 |
headers.eq( 0 ).simulate( "focus" ); |
83 |
setTimeout(function() { |
84 |
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" ); |
85 |
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); |
86 |
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" ); |
87 |
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } ); |
88 |
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" ); |
89 |
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); |
90 |
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" ); |
91 |
|
92 |
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } ); |
93 |
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" ); |
94 |
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } ); |
95 |
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" ); |
96 |
|
97 |
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } ); |
98 |
ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" ); |
99 |
headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } ); |
100 |
ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" ); |
101 |
|
102 |
headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } ); |
103 |
equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" ); |
104 |
headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); |
105 |
equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" ); |
106 |
|
107 |
anchor.simulate( "focus" ); |
108 |
setTimeout(function() { |
109 |
ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" ); |
110 |
anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } ); |
111 |
ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" ); |
112 |
start(); |
113 |
}, 1 ); |
114 |
}, 1 ); |
115 |
}); |
116 |
|
117 |
}( jQuery ) ); |