diff options
| -rw-r--r-- | tests/unit/accordion/accordion_core.js | 56 | ||||
| -rw-r--r-- | ui/jquery.ui.accordion.js | 96 |
2 files changed, 119 insertions, 33 deletions
diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index de1b66046..0d756c97c 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -25,24 +25,50 @@ test( "handle click on header-descendant", function() { }); test( "accessibility", function () { - expect( 13 ); - var element = $( "#list1" ).accordion().accordion( "option", "active", 1 ); + expect( 37 ); + var element = $( "#list1" ).accordion({ + active: 1 + }); var headers = element.find( ".ui-accordion-header" ); - equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" ); - equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" ); - equal( element.attr( "role" ), "tablist", "main role" ); - equal( headers.attr( "role" ), "tab", "tab roles" ); - equal( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" ); - equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" ); - equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" ); - equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + equal( element.attr( "role" ), "tablist", "element role" ); + headers.each(function( i ) { + var header = headers.eq( i ), + panel = header.next(); + equal( header.attr( "role" ), "tab", "header " + i + " role" ); + equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" ); + equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" ); + equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" ); + }); + + 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 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" ); + equal( headers.eq( 0 ).attr( "tabindex" ), -1, "active header has tabindex=-1" ); + equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "active tab has aria-selected=false" ); + equal( headers.eq( 0 ).next().attr( "aria-expanded" ), "false", "active tabpanel has aria-expanded=false" ); + equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "active tabpanel has aria-hidden=true" ); + equal( headers.eq( 2 ).attr( "tabindex" ), -1, "active header has tabindex=-1" ); + equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "active tab has aria-selected=false" ); + equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "active tabpanel has aria-expanded=false" ); + equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "active tabpanel has aria-hidden=true" ); + element.accordion( "option", "active", 0 ); - equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" ); - equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" ); - equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" ); - equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" ); + 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 ).next().attr( "aria-hidden" ), "false", "active tabpanel has aria-hidden=false" ); + equal( headers.eq( 1 ).attr( "tabindex" ), -1, "active header has tabindex=-1" ); + equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "active tab has aria-selected=false" ); + equal( headers.eq( 1 ).next().attr( "aria-expanded" ), "false", "active tabpanel has aria-expanded=false" ); + equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "active tabpanel has aria-hidden=true" ); + equal( headers.eq( 2 ).attr( "tabindex" ), -1, "active header has tabindex=-1" ); + equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "active tab has aria-selected=false" ); + equal( headers.eq( 2 ).next().attr( "aria-expanded" ), "false", "active tabpanel has aria-expanded=false" ); + equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "active tabpanel has aria-hidden=true" ); }); +// TODO: keyboard support + }( jQuery ) ); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 2200732ac..2e68889ef 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -12,6 +12,7 @@ * jquery.ui.widget.js */ (function( $, undefined ) { + var uid = 0; $.widget( "ui.accordion", { version: "@VERSION", @@ -33,7 +34,9 @@ $.widget( "ui.accordion", { }, _create: function() { - var options = this.options; + var accordionId = this.accordionId = "ui-accordion-" + + (this.element.attr( "id" ) || ++uid), + options = this.options; this.prevShow = this.prevHide = $(); this.element.addClass( "ui-accordion ui-widget ui-helper-reset" ); @@ -68,18 +71,36 @@ $.widget( "ui.accordion", { this.headers .attr( "role", "tab" ) + .each(function( i ) { + var header = $( this ), + headerId = header.attr( "id" ), + panel = header.next(), + panelId = panel.attr( "id" ); + if ( !headerId ) { + headerId = accordionId + "-header-" + i; + header.attr( "id", headerId ); + } + if ( !panelId ) { + panelId = accordionId + "-panel-" + i; + panel.attr( "id", panelId ); + } + header.attr( "aria-controls", panelId ); + panel.attr( "aria-labelledby", headerId ); + }) .next() .attr( "role", "tabpanel" ); this.headers .not( this.active ) .attr({ - // TODO: document support for each of these - "aria-expanded": "false", "aria-selected": "false", tabIndex: -1 }) .next() + .attr({ + "aria-expanded": "false", + "aria-hidden": "true" + }) .hide(); // make sure at least one header is in the tab order @@ -87,10 +108,14 @@ $.widget( "ui.accordion", { this.headers.eq( 0 ).attr( "tabIndex", 0 ); } else { this.active.attr({ - "aria-expanded": "true", "aria-selected": "true", tabIndex: 0 - }); + }) + .next() + .attr({ + "aria-expanded": "true", + "aria-hidden": "false" + }); } this._setupEvents( options.event ); @@ -124,6 +149,8 @@ $.widget( "ui.accordion", { }, _destroy: function() { + var accordionId = this.accordionId; + // clean up main element this.element .removeClass( "ui-accordion ui-widget ui-helper-reset" ) @@ -131,19 +158,31 @@ $.widget( "ui.accordion", { // clean up headers this.headers - .unbind( ".accordion" ) .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( "tabIndex" ); + .removeAttr( "aria-controls" ) + .removeAttr( "tabIndex" ) + .each(function() { + if ( /^ui-accordion/.test( this.id ) ) { + this.removeAttribute( "id" ); + } + }); this._destroyIcons(); // clean up content panels var contents = this.headers.next() .css( "display", "" ) .removeAttr( "role" ) - .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" ); + .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" ) + .each(function() { + if ( /^ui-accordion/.test( this.id ) ) { + this.removeAttribute( "id" ); + } + }); if ( this.options.heightStyle !== "content" ) { this.element.css( "height", this.originalHeight ); contents.css( "height", "" ); @@ -208,6 +247,13 @@ $.widget( "ui.accordion", { case keyCode.SPACE: case keyCode.ENTER: this._eventHandler( event ); + break; + case keyCode.HOME: + toFocus = this.headers[ 0 ]; + break; + case keyCode.END: + toFocus = this.headers[ length - 1 ]; + break; } if ( toFocus ) { @@ -218,6 +264,12 @@ $.widget( "ui.accordion", { } }, + _panelKeyDown : function( event ) { + if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) { + $( event.currentTarget ).prev().focus(); + } + }, + refresh: function() { var heightStyle = this.options.heightStyle, parent = this.element.parent(), @@ -305,6 +357,9 @@ $.widget( "ui.accordion", { }); } this._bind( this.headers, events ); + this._bind( this.headers.next(), { + keydown: "_panelKeyDown" + }); }, _eventHandler: function( event ) { @@ -382,21 +437,26 @@ $.widget( "ui.accordion", { this._toggleComplete( data ); } - // TODO assert that the blur and focus triggers are really necessary, remove otherwise - toHide.prev() + toHide .attr({ "aria-expanded": "false", - "aria-selected": "false", - tabIndex: -1 + "aria-hidden": "true" }) - .blur(); - toShow.prev() + .prev() + .attr({ + "aria-selected": "false", + tabIndex: -1 + }); + toShow .attr({ "aria-expanded": "true", - "aria-selected": "true", - tabIndex: 0 + "aria-hidden": "false" }) - .focus(); + .prev() + .attr({ + "aria-selected": "true", + tabIndex: 0 + }); }, _animate: function( toShow, toHide, data ) { |