Skip to content

Commit

Permalink
Accordion: Fixed ARIA support and added proper keyboard support.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanshillen @scottgonzalez
hanshillen authored and scottgonzalez committed Mar 27, 2012
1 parent adbc273 commit 0370170
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 33 deletions.
56 changes: 41 additions & 15 deletions tests/unit/accordion/accordion_core.js
View file
Expand Up @@ -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 ) );
96 changes: 78 additions & 18 deletions ui/jquery.ui.accordion.js
View file
Expand Up @@ -12,6 +12,7 @@
* jquery.ui.widget.js
*/
(function( $, undefined ) {
var uid = 0;

$.widget( "ui.accordion", {
version: "@VERSION",
Expand All @@ -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" );
Expand Down Expand Up @@ -68,29 +71,51 @@ $.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
if ( !this.active.length ) {
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 );
Expand Down Expand Up @@ -124,26 +149,40 @@ $.widget( "ui.accordion", {
},

_destroy: function() {
var accordionId = this.accordionId;

// clean up main element
this.element
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
.removeAttr( "role" );

// 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", "" );
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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(),
Expand Down Expand Up @@ -305,6 +357,9 @@ $.widget( "ui.accordion", {
});
}
this._bind( this.headers, events );
this._bind( this.headers.next(), {
keydown: "_panelKeyDown"
});
},

_eventHandler: function( event ) {
Expand Down Expand Up @@ -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 ) {
Expand Down

0 comments on commit 0370170

Please sign in to comment.