library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Scott González 2012-03-27 16:49:05 -04:00
parent a709943a8b
commit 6634e40053
4 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/accordion/accordion.html
View File

@ -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.

42
tests/unit/accordion/accordion_core.js
View File

@ -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 ) );

2
tests/unit/accordion/accordion_deprecated.html
View File

@ -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.

17
ui/jquery.ui.accordion.js vendored
View File

@ -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 ) {
var events = {};
if ( !event ) {
return;
}
$.each( event.split(" "), function( index, eventName ) {
events[ eventName ] = "_eventHandler";
});
}
this._bind( this.headers, events );
this._bind( this.headers.next(), {
keydown: "_panelKeyDown"
});
},
_eventHandler: function( event ) {