Skip to content

Commit dc2b17d

Browse files
scottgonzalezscottgonzalez
committed
Accordion: Set aria-expanded when collapsing
Fixes #10703 Closes gh-1413 (cherry picked from commit ab798cb)
1 parent 727a915 commit dc2b17d

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
@@ -483,7 +483,10 @@ return $.widget( "ui.accordion", {
483483
toHide.attr({
484484
"aria-hidden": "true"
485485
});
486-
toHide.prev().attr( "aria-selected", "false" );
486+
toHide.prev().attr({
487+
"aria-selected": "false",
488+
"aria-expanded": "false"
489+
});
487490
// if we're switching panels, remove the old header from the tab order
488491
// if we're opening from collapsed state, remove the previous header from the tab order
489492
// if we're collapsing, then keep the collapsing header in the tab order
@@ -494,7 +497,7 @@ return $.widget( "ui.accordion", {
494497
});
495498
} else if ( toShow.length ) {
496499
this.headers.filter(function() {
497-
return $( this ).attr( "tabIndex" ) === 0;
500+
return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
498501
})
499502
.attr( "tabIndex", -1 );
500503
}
@@ -504,8 +507,8 @@ return $.widget( "ui.accordion", {
504507
.prev()
505508
.attr({
506509
"aria-selected": "true",
507-
tabIndex: 0,
508-
"aria-expanded": "true"
510+
"aria-expanded": "true",
511+
tabIndex: 0
509512
});
510513
},
511514

0 commit comments

Comments
 (0)