From 1d68f1339975e5c3f725c8860870d402cbcfec27 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 7 Mar 2012 18:54:38 +0100 Subject: Accordion: Use _bind for keydown handler --- ui/jquery.ui.accordion.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/jquery.ui.accordion.js') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 5a49d7813..f4747d168 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -42,6 +42,9 @@ $.widget( "ui.accordion", { .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); this._hoverable( this.headers ); this._focusable( this.headers ); + this._bind( this.headers, { + keydown: "_keydown" + }); this.headers.next() .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ); @@ -68,8 +71,6 @@ $.widget( "ui.accordion", { this.headers .attr( "role", "tab" ) - // TODO: use _bind() - .bind( "keydown.accordion", $.proxy( this, "_keydown" ) ) .next() .attr( "role", "tabpanel" ); -- cgit v1.2.3 From 050958277317cf127b98f8ac26f70f57cf147b26 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 7 Mar 2012 19:17:09 +0100 Subject: Accordion: Fix unbinding of accordion event option when dealing with multiple events. Make sure to unbind only those namespaced to .accordion --- tests/unit/accordion/accordion_options.js | 1 + ui/jquery.ui.accordion.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/jquery.ui.accordion.js') diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index 8206b1d62..74a9a3177 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -152,6 +152,7 @@ test( "{ event: custom }", function() { // ensure old event handlers are unbound element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" ); + element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom2" ); equal( element.accordion( "option", "active" ), 2 ); accordion_state( element, 0, 0, 1 ); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index f4747d168..bf8434c6d 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -162,8 +162,7 @@ $.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._eventHandler ); } this._setupEvents( value ); } -- cgit v1.2.3 From 397176da3ecdbcb15adc9a259cbbb59f029a711f Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 7 Mar 2012 19:28:42 +0100 Subject: Accordion: Remove disabled check in _keydown, covered by _bind --- ui/jquery.ui.accordion.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/jquery.ui.accordion.js') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index bf8434c6d..e3e09c9f4 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -192,8 +192,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; } -- cgit v1.2.3 From 17db755a4f04dfc7b0be8d9a5c290cc5bc48e08e Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Wed, 7 Mar 2012 20:00:02 +0100 Subject: Accordion: Use _bind for event option. Refactor other _bind call to go into _setupEvents as well, simplifying unbinding a lot. Also add missing semicolon --- ui/jquery.ui.accordion.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'ui/jquery.ui.accordion.js') diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index e3e09c9f4..1920063c4 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -42,9 +42,6 @@ $.widget( "ui.accordion", { .addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" ); this._hoverable( this.headers ); this._focusable( this.headers ); - this._bind( this.headers, { - keydown: "_keydown" - }); this.headers.next() .addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" ); @@ -59,7 +56,7 @@ $.widget( "ui.accordion", { } this.active = this._findActive( options.active ) .addClass( "ui-accordion-header-active ui-state-active" ) - .toggleClass( "ui-corner-all ui-corner-top" ) + .toggleClass( "ui-corner-all ui-corner-top" ); this.active.next().addClass( "ui-accordion-content-active" ); this._createIcons(); @@ -162,7 +159,7 @@ $.widget( "ui.accordion", { if ( key === "event" ) { if ( this.options.event ) { - this.headers.unbind( this.options.event.split( " " ).join( ".accordion " ) + ".accordion", this._eventHandler ); + this.headers.unbind( ".accordion" ); } this._setupEvents( value ); } @@ -301,11 +298,15 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { + var events = { + keydown: "_keydown" + }; if ( event ) { - // TODO: use _bind() - this.headers.bind( event.split( " " ).join( ".accordion " ) + ".accordion", - $.proxy( this, "_eventHandler" ) ); + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; + }); } + this._bind( this.headers, events ); }, _eventHandler: function( event ) { @@ -325,7 +326,7 @@ $.widget( "ui.accordion", { event.preventDefault(); - if ( options.disabled || + if ( // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || // allow canceling activation -- cgit v1.2.3 From 0370170b2f97146b32f19b3c693c011d4efe99e3 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Tue, 27 Mar 2012 10:19:35 -0400 Subject: Accordion: Fixed ARIA support and added proper keyboard support. --- tests/unit/accordion/accordion_core.js | 56 ++++++++++++++------ ui/jquery.ui.accordion.js | 96 +++++++++++++++++++++++++++------- 2 files changed, 119 insertions(+), 33 deletions(-) (limited to 'ui/jquery.ui.accordion.js') 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 ) { -- cgit v1.2.3 From 6634e4005368ded31dce50de7095ed0f8835637c Mon Sep 17 00:00:00 2001 From: Scott González Date: Tue, 27 Mar 2012 16:49:05 -0400 Subject: Accordion: Fixed post-init changes to event option and added tests for keyboard support. --- tests/unit/accordion/accordion.html | 2 +- tests/unit/accordion/accordion_core.js | 42 +++++++++++++++++++++++++- tests/unit/accordion/accordion_deprecated.html | 2 +- ui/jquery.ui.accordion.js | 21 ++++++------- 4 files changed, 53 insertions(+), 14 deletions(-) (limited to 'ui/jquery.ui.accordion.js') diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 109b3094e..5c9169ea3 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -66,7 +66,7 @@

your bear, you have to admit it!
- No, we aren't selling bears. + No, we aren't selling bears.

We could talk about renting one. diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js index 0d756c97c..92d79c121 100644 --- a/tests/unit/accordion/accordion_core.js +++ b/tests/unit/accordion/accordion_core.js @@ -69,6 +69,46 @@ test( "accessibility", function () { equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "active tabpanel has aria-hidden=true" ); }); -// TODO: keyboard support +asyncTest( "keybaord support", function() { + expect( 13 ); + var element = $( "#list1" ).accordion(), + headers = element.find( ".ui-accordion-header" ), + anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ), + keyCode = $.ui.keyCode; + equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" ); + headers.eq( 0 ).simulate( "focus" ); + setTimeout(function() { + ok( headers.eq( 0 ).is( ".ui-state-focus" ), "first header has focus" ); + headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); + ok( headers.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next header" ); + headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } ); + ok( headers.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next header" ); + headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } ); + ok( headers.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first header" ); + + headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } ); + ok( headers.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last header" ); + headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } ); + ok( headers.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous header" ); + + headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } ); + ok( headers.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first header" ); + headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } ); + ok( headers.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last header" ); + + headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } ); + equal( element.accordion( "option", "active" ) , 2, "ENTER activates panel" ); + headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); + equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" ); + + anchor.simulate( "focus" ); + setTimeout(function() { + ok( !headers.eq( 1 ).is( ".ui-state-focus" ), "header loses focus when focusing inside the panel" ); + anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } ); + ok( headers.eq( 1 ).is( ".ui-state-focus" ), "CTRL+UP moves focus to header" ); + start(); + }, 1 ); + }, 1 ); +}); }( jQuery ) ); diff --git a/tests/unit/accordion/accordion_deprecated.html b/tests/unit/accordion/accordion_deprecated.html index 583c1adcd..116eb43b5 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -64,7 +64,7 @@

your bear, you have to admit it!
- No, we aren't selling bears. + No, we aren't selling bears.

We could talk about renting one. diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 2e68889ef..ba8fa5e44 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -118,6 +118,8 @@ $.widget( "ui.accordion", { }); } + this._bind( this.headers, { keydown: "_keydown" }); + this._bind( this.headers.next(), { keydown: "_panelKeyDown" }); this._setupEvents( options.event ); }, @@ -198,7 +200,8 @@ $.widget( "ui.accordion", { if ( key === "event" ) { if ( this.options.event ) { - this.headers.unbind( ".accordion" ); + this.headers.unbind( + this.options.event.split( " " ).join( ".accordion " ) + ".accordion" ); } this._setupEvents( value ); } @@ -348,18 +351,14 @@ $.widget( "ui.accordion", { }, _setupEvents: function( event ) { - var events = { - keydown: "_keydown" - }; - if ( event ) { - $.each( event.split(" "), function( index, eventName ) { - events[ eventName ] = "_eventHandler"; - }); + var events = {}; + if ( !event ) { + return; } - this._bind( this.headers, events ); - this._bind( this.headers.next(), { - keydown: "_panelKeyDown" + $.each( event.split(" "), function( index, eventName ) { + events[ eventName ] = "_eventHandler"; }); + this._bind( this.headers, events ); }, _eventHandler: function( event ) { -- cgit v1.2.3