Skip to content

Commit ab798cb

Browse files
scottgonzalezscottgonzalez
committed
Accordion: Set aria-expanded when collapsing
Fixes #10703 Closes gh-1413
1 parent c89cb74 commit ab798cb

File tree

2 files changed

+62
-29
lines changed

2 files changed

+62
-29
lines changed

‎tests/unit/accordion/accordion_core.js‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,10 @@ test( "handle click on header-descendant", function() {
2828
});
2929

3030
test( "accessibility", function () {
31-
expect( 37 );
31+
expect( 61 );
3232
var element = $( "#list1" ).accordion({
33-
active: 1
33+
active: 1,
34+
collapsible: true
3435
}),
3536
headers = element.find( ".ui-accordion-header" );
3637

@@ -45,31 +46,60 @@ test( "accessibility", function () {
4546
});
4647

4748
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" );
49+
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
50+
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
51+
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
52+
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
53+
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
54+
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
55+
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
56+
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
57+
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
58+
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
59+
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
5960

6061
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" );
62+
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header (0) has tabindex=0" );
63+
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab (0) has aria-selected=true" );
64+
equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab (0) has aria-expanded=true" );
65+
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel (0) has aria-hidden=false" );
66+
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
67+
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
68+
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
69+
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
70+
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
71+
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
72+
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
73+
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
74+
75+
element.accordion( "option", "active", false );
76+
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "previously active header (0) has tabindex=0" );
77+
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
78+
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
79+
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
80+
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
81+
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
82+
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
83+
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
84+
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
85+
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
86+
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
87+
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
88+
89+
element.accordion( "option", "active", 1 );
90+
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
91+
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
92+
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
93+
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
94+
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
95+
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
96+
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
97+
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
98+
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
99+
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
100+
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
101+
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
102+
73103
});
74104

75105
asyncTest( "keyboard support", function() {

‎ui/accordion.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,10 @@ return $.widget( "ui.accordion", {
488488
toHide.attr({
489489
"aria-hidden": "true"
490490
});
491-
toHide.prev().attr( "aria-selected", "false" );
491+
toHide.prev().attr({
492+
"aria-selected": "false",
493+
"aria-expanded": "false"
494+
});
492495
// if we're switching panels, remove the old header from the tab order
493496
// if we're opening from collapsed state, remove the previous header from the tab order
494497
// if we're collapsing, then keep the collapsing header in the tab order
@@ -499,7 +502,7 @@ return $.widget( "ui.accordion", {
499502
});
500503
} else if ( toShow.length ) {
501504
this.headers.filter(function() {
502-
return $( this ).attr( "tabIndex" ) === 0;
505+
return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
503506
})
504507
.attr( "tabIndex", -1 );
505508
}
@@ -509,8 +512,8 @@ return $.widget( "ui.accordion", {
509512
.prev()
510513
.attr({
511514
"aria-selected": "true",
512-
tabIndex: 0,
513-
"aria-expanded": "true"
515+
"aria-expanded": "true",
516+
tabIndex: 0
514517
});
515518
},
516519

0 commit comments

Comments
 (0)