diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index 109b3094e37..5c9169ea3c9 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -66,7 +66,7 @@

Now that you've got...

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 0d756c97c21..92d79c121c5 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 583c1adcd86..116eb43b50c 100644 --- a/tests/unit/accordion/accordion_deprecated.html +++ b/tests/unit/accordion/accordion_deprecated.html @@ -64,7 +64,7 @@

Now that you've got...

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 2e68889ef7b..ba8fa5e44ab 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 ) {