Skip to content

Commit db5f95f

Browse files
committed
Tabs: Panel keyboard support tests.
1 parent e1eeed6 commit db5f95f

File tree

1 file changed

+93
-5
lines changed

1 file changed

+93
-5
lines changed

tests/unit/tabs/tabs_core.js

Lines changed: 93 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ test( "accessibility", function() {
125125
asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function() {
126126
expect( 92 );
127127
var element = $( "#tabs1" ).tabs({
128-
active: 0,
129128
collapsible: true
130129
}),
131130
tabs = element.find( ".ui-tabs-nav li" ),
@@ -278,10 +277,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER",
278277

279278
asyncTest( "keyboard support - CTRL navigation", function() {
280279
expect( 115 );
281-
var element = $( "#tabs1" ).tabs({
282-
active: 0,
283-
collapsible: true
284-
}),
280+
var element = $( "#tabs1" ).tabs(),
285281
tabs = element.find( ".ui-tabs-nav li" ),
286282
panels = element.find( ".ui-tabs-panel" ),
287283
keyCode = $.ui.keyCode;
@@ -472,6 +468,98 @@ asyncTest( "keyboard support - CTRL navigation", function() {
472468
setTimeout( step1, 1 );
473469
});
474470

471+
asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() {
472+
expect( 50 );
473+
var element = $( "#tabs1" ).tabs(),
474+
tabs = element.find( ".ui-tabs-nav li" ),
475+
panels = element.find( ".ui-tabs-panel" ),
476+
keyCode = $.ui.keyCode;
477+
478+
equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
479+
panels.attr( "tabindex", -1 );
480+
panels.eq( 0 ).simulate( "focus" );
481+
482+
function step1() {
483+
strictEqual( document.activeElement, panels[ 0 ], "first panel is activeElement" );
484+
485+
panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
486+
strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
487+
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
488+
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
489+
ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
490+
equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" );
491+
equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second panel has aria-hidden=false" );
492+
ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
493+
equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
494+
equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
495+
496+
tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
497+
strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
498+
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" );
499+
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
500+
ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
501+
equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
502+
equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
503+
ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" );
504+
equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
505+
equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
506+
507+
tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } );
508+
strictEqual( document.activeElement, tabs[ 0 ], "first tab is activeElement" );
509+
ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN wraps focus to first tab" );
510+
equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
511+
ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
512+
equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
513+
equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
514+
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
515+
equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
516+
equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
517+
518+
panels.eq( 0 ).simulate( "focus" );
519+
setTimeout( step2, 1 );
520+
}
521+
522+
function step2() {
523+
strictEqual( document.activeElement, panels[ 0 ], "first panel is activeElement" );
524+
525+
panels.eq( 0 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
526+
strictEqual( document.activeElement, tabs[ 2 ], "third tab is activeElement" );
527+
ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_UP wraps focus to last tab" );
528+
equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
529+
ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
530+
equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
531+
equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
532+
ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
533+
equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
534+
equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
535+
536+
tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_UP, altKey: true } );
537+
strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
538+
ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_UP moves focus to previous tab" );
539+
equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
540+
ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" );
541+
equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" );
542+
equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second panel has aria-hidden=false" );
543+
ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
544+
equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
545+
equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
546+
547+
panels.eq( 1 ).simulate( "focus" );
548+
setTimeout( step3, 1 );
549+
}
550+
551+
function step3() {
552+
strictEqual( document.activeElement, panels[ 1 ], "second panel is activeElement" );
553+
554+
panels.eq( 1 ).simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
555+
strictEqual( document.activeElement, tabs[ 1 ], "second tab is activeElement" );
556+
557+
setTimeout( start, 1 );
558+
}
559+
560+
setTimeout( step1, 1 );
561+
});
562+
475563
test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() {
476564
expect( 1 );
477565

0 commit comments

Comments
 (0)