@@ -5,118 +5,122 @@ define([
55 "jquery.simulate"
66] , function ( $ , accordionTestHelper ) {
77
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 ( ) {
279
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 ;
3412
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+ } ) ;
5028 } ) ;
5129
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" ) ;
7966
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" ) ;
11390 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 ) ;
118121 } , 1 ) ;
119- } , 1 ) ;
120- } ) ;
122+ } ) ;
123+
124+ } ;
121125
122126} ) ;
0 commit comments