|
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 |
| -}); |
| 1 | +define([ |
| 2 | + "jquery", |
| 3 | + "./accordion_test_helpers", |
| 4 | + "ui/accordion", |
| 5 | + "jquery.simulate" |
| 6 | +], function( $, accordionTestHelper ) { |
22 | 7 |
|
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 |
| -}); |
| 8 | +return function() { |
| 9 | + |
| 10 | + var setupTeardown = accordionTestHelper.setupTeardown, |
| 11 | + state = accordionTestHelper.state; |
| 12 | + |
| 13 | + module( "accordion: core", setupTeardown() ); |
29 | 14 |
|
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" ); |
| 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 | + }); |
45 | 28 | });
|
46 | 29 |
|
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 ).attr( "aria-expanded" ), "true", "active tab 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 ).attr( "aria-expanded" ), "false", "inactive tab 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 ).attr( "aria-expanded" ), "false", "inactive tab 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 ).attr( "aria-expanded" ), "true", "active tab 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 ).attr( "aria-expanded" ), "false", "inactive tab 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 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); |
72 |
| - equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" ); |
73 |
| -}); |
| 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" ); |
74 | 66 |
|
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" ); |
| 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" ); |
108 | 90 | 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(); |
| 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 ); |
113 | 121 | }, 1 );
|
114 |
| - }, 1 ); |
115 |
| -}); |
| 122 | + }); |
116 | 123 |
|
117 |
| -}( jQuery ) ); |
| 124 | +}; |
| 125 | + |
| 126 | +}); |
0 commit comments