@@ -5,122 +5,118 @@ define([
55 "jquery.simulate"
66] , function ( $ , accordionTestHelper ) {
77
8- return function ( ) {
9-
10- var setupTeardown = accordionTestHelper . setupTeardown ,
11- state = accordionTestHelper . state ;
12-
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- } ) ;
28- } ) ;
29-
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 ) ;
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" ) ;
3525 } ) ;
26+ } ) ;
3627
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" ) ;
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+ } ) ;
6634
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" ) ;
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" ) ;
8050 } ) ;
8151
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" ) ;
90- setTimeout ( function ( ) {
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" ) ;
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+ } ) ;
11379
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 ) ;
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" ) ;
113+ 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 ( ) ;
121118 } , 1 ) ;
122- } ) ;
123-
124- } ;
119+ } , 1 ) ;
120+ } ) ;
125121
126122} ) ;
0 commit comments