Accordion: Fixed post-init changes to event option and added tests for keyboard support.

diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html
index 109b3094e37dc54e178c28e450e6221f7012363b..5c9169ea3c93a384a6c2e0feeb0150826455a230 100644 (file)
--- a/tests/unit/accordion/accordion.html
+++ b/tests/unit/accordion/accordion.html
@@ -66,7 +66,7 @@
                <p>
                        your bear, you have to admit it!
                        <br>
-                       No, we aren't selling bears.
+                       No, we aren't <a href="#">selling bears</a>.
                </p>
                <p>
                        We could talk about renting one.

diff --git a/tests/unit/accordion/accordion_core.js b/tests/unit/accordion/accordion_core.js
index 0d756c97c21a41b730fa9272f59710009e4d1f52..92d79c121c55ed081d063765105799b558bf2841 100644 (file)
--- 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 583c1adcd86e3483857ed810d0320ba6e29513c6..116eb43b50c32e51036941cc917e0272a6901181 100644 (file)
--- a/tests/unit/accordion/accordion_deprecated.html
+++ b/tests/unit/accordion/accordion_deprecated.html
@@ -64,7 +64,7 @@
                <p>
                        your bear, you have to admit it!
                        <br>
-                       No, we aren't selling bears.
+                       No, we aren't <a href="#">selling bears</a>.
                </p>
                <p>
                        We could talk about renting one.

diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js
index 2e68889ef7bc836856c43574b032eaf2d059f87f..ba8fa5e44ab92fcc661d5bc9cf674b72b9dfa67d 100644 (file)
--- 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 ) {