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