From d21e8a6964d80a32cdb9773aa364141a2492dc5a Mon Sep 17 00:00:00 2001 From: Monika Piotrowicz Date: Sun, 27 Oct 2013 21:57:01 -0400 Subject: [PATCH] Accordion: moving aria-expanded from active tabpanel to active tab. Fixed #9407 - Accordion: aria-expanded attribute on wrong element (cherry picked from commit f16d0c7e267794aa20411581b15870d9babd7930) --- tests/unit/accordion/accordion_core.js | 12 ++++++------ ui/jquery.ui.accordion.js | 21 ++++++++++----------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 101cb83b100..8e0175aeb93 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -46,29 +46,29 @@ test( "accessibility", function () { 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 ).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( 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 ).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( 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 ).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" ); element.accordion( "option", "active", 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 ).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( 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 ).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( 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 ).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" ); }); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index bacba43e2e9..9afd19287cc 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -102,6 +102,7 @@ $.widget( "ui.accordion", { 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" ) .removeAttr( "role" ) + .removeAttr( "aria-expanded" ) .removeAttr( "aria-selected" ) .removeAttr( "aria-controls" ) .removeAttr( "tabIndex" ) @@ -116,7 +117,6 @@ $.widget( "ui.accordion", { contents = this.headers.next() .css( "display", "" ) .removeAttr( "role" ) - .removeAttr( "aria-expanded" ) .removeAttr( "aria-hidden" ) .removeAttr( "aria-labelledby" ) .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 ) .attr({ "aria-selected": "false", + "aria-expanded": "false", tabIndex: -1 }) .next() .attr({ - "aria-expanded": "false", "aria-hidden": "true" }) .hide(); @@ -308,11 +308,11 @@ $.widget( "ui.accordion", { } else { this.active.attr({ "aria-selected": "true", + "aria-expanded": "true", tabIndex: 0 }) .next() .attr({ - "aria-expanded": "true", "aria-hidden": "false" }); } @@ -467,7 +467,6 @@ $.widget( "ui.accordion", { } toHide.attr({ - "aria-expanded": "false", "aria-hidden": "true" }); 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 collapsing, then keep the collapsing header in the tab order if ( toShow.length && toHide.length ) { - toHide.prev().attr( "tabIndex", -1 ); + toHide.prev().attr({ + "tabIndex": -1, + "aria-expanded": "false" + }); } else if ( toShow.length ) { this.headers.filter(function() { return $( this ).attr( "tabIndex" ) === 0; @@ -484,14 +486,12 @@ $.widget( "ui.accordion", { } toShow - .attr({ - "aria-expanded": "true", - "aria-hidden": "false" - }) + .attr( "aria-hidden", "false" ) .prev() .attr({ "aria-selected": "true", - tabIndex: 0 + tabIndex: 0, + "aria-expanded": "true" }); }, @@ -563,7 +563,6 @@ $.widget( "ui.accordion", { if ( toHide.length ) { toHide.parent()[0].className = toHide.parent()[0].className; } - this._trigger( "activate", null, data ); } });