mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Accordion: moving aria-expanded from active tabpanel to active tab. Fixed #9407 - Accordion: aria-expanded attribute on wrong element
(cherry picked from commit f16d0c7e26
)
This commit is contained in:
parent
a2217b5400
commit
d21e8a6964
@ -46,29 +46,29 @@ test( "accessibility", function () {
|
|||||||
|
|
||||||
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
|
equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
|
||||||
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
|
equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
|
||||||
equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" );
|
equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded=true" );
|
||||||
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
|
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
|
||||||
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
||||||
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
||||||
equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
|
equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" );
|
||||||
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
||||||
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
||||||
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
||||||
equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
|
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" );
|
||||||
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
||||||
|
|
||||||
element.accordion( "option", "active", 0 );
|
element.accordion( "option", "active", 0 );
|
||||||
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
|
equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
|
||||||
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
|
equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" );
|
||||||
equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "true", "active tabpanel has aria-expanded=true" );
|
equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded=true" );
|
||||||
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
|
equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" );
|
||||||
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
||||||
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
||||||
equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
|
equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" );
|
||||||
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
||||||
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header has tabindex=-1" );
|
||||||
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" );
|
||||||
equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "inactive tabpanel has aria-expanded=false" );
|
equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" );
|
||||||
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel has aria-hidden=true" );
|
||||||
});
|
});
|
||||||
|
|
||||||
|
21
ui/jquery.ui.accordion.js
vendored
21
ui/jquery.ui.accordion.js
vendored
@ -102,6 +102,7 @@ $.widget( "ui.accordion", {
|
|||||||
this.headers
|
this.headers
|
||||||
.removeClass( "ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
|
.removeClass( "ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
|
||||||
.removeAttr( "role" )
|
.removeAttr( "role" )
|
||||||
|
.removeAttr( "aria-expanded" )
|
||||||
.removeAttr( "aria-selected" )
|
.removeAttr( "aria-selected" )
|
||||||
.removeAttr( "aria-controls" )
|
.removeAttr( "aria-controls" )
|
||||||
.removeAttr( "tabIndex" )
|
.removeAttr( "tabIndex" )
|
||||||
@ -116,7 +117,6 @@ $.widget( "ui.accordion", {
|
|||||||
contents = this.headers.next()
|
contents = this.headers.next()
|
||||||
.css( "display", "" )
|
.css( "display", "" )
|
||||||
.removeAttr( "role" )
|
.removeAttr( "role" )
|
||||||
.removeAttr( "aria-expanded" )
|
|
||||||
.removeAttr( "aria-hidden" )
|
.removeAttr( "aria-hidden" )
|
||||||
.removeAttr( "aria-labelledby" )
|
.removeAttr( "aria-labelledby" )
|
||||||
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" )
|
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" )
|
||||||
@ -293,11 +293,11 @@ $.widget( "ui.accordion", {
|
|||||||
.not( this.active )
|
.not( this.active )
|
||||||
.attr({
|
.attr({
|
||||||
"aria-selected": "false",
|
"aria-selected": "false",
|
||||||
|
"aria-expanded": "false",
|
||||||
tabIndex: -1
|
tabIndex: -1
|
||||||
})
|
})
|
||||||
.next()
|
.next()
|
||||||
.attr({
|
.attr({
|
||||||
"aria-expanded": "false",
|
|
||||||
"aria-hidden": "true"
|
"aria-hidden": "true"
|
||||||
})
|
})
|
||||||
.hide();
|
.hide();
|
||||||
@ -308,11 +308,11 @@ $.widget( "ui.accordion", {
|
|||||||
} else {
|
} else {
|
||||||
this.active.attr({
|
this.active.attr({
|
||||||
"aria-selected": "true",
|
"aria-selected": "true",
|
||||||
|
"aria-expanded": "true",
|
||||||
tabIndex: 0
|
tabIndex: 0
|
||||||
})
|
})
|
||||||
.next()
|
.next()
|
||||||
.attr({
|
.attr({
|
||||||
"aria-expanded": "true",
|
|
||||||
"aria-hidden": "false"
|
"aria-hidden": "false"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -467,7 +467,6 @@ $.widget( "ui.accordion", {
|
|||||||
}
|
}
|
||||||
|
|
||||||
toHide.attr({
|
toHide.attr({
|
||||||
"aria-expanded": "false",
|
|
||||||
"aria-hidden": "true"
|
"aria-hidden": "true"
|
||||||
});
|
});
|
||||||
toHide.prev().attr( "aria-selected", "false" );
|
toHide.prev().attr( "aria-selected", "false" );
|
||||||
@ -475,7 +474,10 @@ $.widget( "ui.accordion", {
|
|||||||
// if we're opening from collapsed state, remove the previous header from the tab order
|
// if we're opening from collapsed state, remove the previous header from the tab order
|
||||||
// if we're collapsing, then keep the collapsing header in the tab order
|
// if we're collapsing, then keep the collapsing header in the tab order
|
||||||
if ( toShow.length && toHide.length ) {
|
if ( toShow.length && toHide.length ) {
|
||||||
toHide.prev().attr( "tabIndex", -1 );
|
toHide.prev().attr({
|
||||||
|
"tabIndex": -1,
|
||||||
|
"aria-expanded": "false"
|
||||||
|
});
|
||||||
} else if ( toShow.length ) {
|
} else if ( toShow.length ) {
|
||||||
this.headers.filter(function() {
|
this.headers.filter(function() {
|
||||||
return $( this ).attr( "tabIndex" ) === 0;
|
return $( this ).attr( "tabIndex" ) === 0;
|
||||||
@ -484,14 +486,12 @@ $.widget( "ui.accordion", {
|
|||||||
}
|
}
|
||||||
|
|
||||||
toShow
|
toShow
|
||||||
.attr({
|
.attr( "aria-hidden", "false" )
|
||||||
"aria-expanded": "true",
|
|
||||||
"aria-hidden": "false"
|
|
||||||
})
|
|
||||||
.prev()
|
.prev()
|
||||||
.attr({
|
.attr({
|
||||||
"aria-selected": "true",
|
"aria-selected": "true",
|
||||||
tabIndex: 0
|
tabIndex: 0,
|
||||||
|
"aria-expanded": "true"
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -563,7 +563,6 @@ $.widget( "ui.accordion", {
|
|||||||
if ( toHide.length ) {
|
if ( toHide.length ) {
|
||||||
toHide.parent()[0].className = toHide.parent()[0].className;
|
toHide.parent()[0].className = toHide.parent()[0].className;
|
||||||
}
|
}
|
||||||
|
|
||||||
this._trigger( "activate", null, data );
|
this._trigger( "activate", null, data );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user