diff options
Diffstat (limited to 'ui/jquery.ui.accordion.js')
| -rw-r--r-- | ui/jquery.ui.accordion.js | 117 |
1 files changed, 88 insertions, 29 deletions
diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 169a07409..ba8fa5e44 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,20 +71,36 @@ $.widget( "ui.accordion", { this.headers .attr( "role", "tab" ) - // TODO: use _bind() - .bind( "keydown.accordion", $.proxy( this, "_keydown" ) ) + .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 @@ -89,12 +108,18 @@ $.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._bind( this.headers, { keydown: "_keydown" }); + this._bind( this.headers.next(), { keydown: "_panelKeyDown" }); this._setupEvents( options.event ); }, @@ -126,6 +151,8 @@ $.widget( "ui.accordion", { }, _destroy: function() { + var accordionId = this.accordionId; + // clean up main element this.element .removeClass( "ui-accordion ui-widget ui-helper-reset" ) @@ -133,19 +160,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", "" ); @@ -161,8 +200,8 @@ $.widget( "ui.accordion", { if ( key === "event" ) { if ( this.options.event ) { - // TODO: this is incorrect for multiple events (see _setupEvents) - this.headers.unbind( this.options.event + ".accordion", this._eventHandler ); + this.headers.unbind( + this.options.event.split( " " ).join( ".accordion " ) + ".accordion" ); } this._setupEvents( value ); } @@ -190,8 +229,7 @@ $.widget( "ui.accordion", { }, _keydown: function( event ) { - // TODO: remove disabled check when using _bind() - if ( this.options.disabled || event.altKey || event.ctrlKey ) { + if ( event.altKey || event.ctrlKey ) { return; } @@ -212,6 +250,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 ) { @@ -222,6 +267,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(), @@ -300,11 +351,14 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { - if ( event ) { - // TODO: use _bind() - this.headers.bind( event.split( " " ).join( ".accordion " ) + ".accordion", - $.proxy( this, "_eventHandler" ) ); + var events = {}; + if ( !event ) { + return; } + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; + }); + this._bind( this.headers, events ); }, _eventHandler: function( event ) { @@ -324,7 +378,7 @@ $.widget( "ui.accordion", { event.preventDefault(); - if ( options.disabled || + if ( // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation @@ -382,21 +436,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 ) { |