Tabs: Basic keyboard support tests.

1 files changed, 153 insertions, 0 deletions

diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js
index 111ee082a..55f96573e 100644
--- a/tests/unit/tabs/tabs_core.js
+++ b/tests/unit/tabs/tabs_core.js
@@ -122,6 +122,159 @@ test( "accessibility", function() {
 	// TODO: aria-live and aria-busy tests for ajax tabs
 });
 
+asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function() {
+	expect( 90 );
+	var element = $( "#tabs1" ).tabs({
+			active: 0,
+			collapsible: true
+		}),
+		tabs = element.find( ".ui-tabs-nav li" ),
+		anchors = tabs.find( ".ui-tabs-anchor" ),
+		panels = element.find( ".ui-tabs-panel" ),
+		keyCode = $.ui.keyCode;
+
+	element.data( "tabs" ).delay = 50;
+
+	equal( tabs.filter( ".ui-state-focus" ).length, 0, "no tabs focused on init" );
+	tabs.eq( 0 ).simulate( "focus" );
+
+	// down, right, down (wrap), up (wrap)
+	function step1() {
+		ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab has focus" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
+
+		tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
+		ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "DOWN moves focus to next tab" );
+		ok( !tabs.eq( 0 ).is( ".ui-state-focus" ), "first tab is no longer focused" );
+		equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
+		ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
+		equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
+		equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+
+		tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
+		ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "RIGHT moves focus to next tab" );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
+		equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
+		ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+
+		tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
+		ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "DOWN wraps focus to first tab" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+
+		tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
+		ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "UP wraps focus to last tab" );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
+		ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+
+		setTimeout( step2, 100 );
+	}
+
+	// left, home, space
+	function step2() {
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
+		ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
+		ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
+
+		tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
+		ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "LEFT moves focus to previous tab" );
+		equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
+		ok( panels.eq( 1 ).is( ":hidden" ), "second panel is still hidden" );
+		equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" );
+		equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" );
+		ok( panels.eq( 2 ).is( ":visible" ), "third panel is still visible" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
+
+		tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
+		ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "HOME moves focus to first tab" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
+		equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" );
+		ok( panels.eq( 0 ).is( ":hidden" ), "first panel is still hidden" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
+		ok( panels.eq( 2 ).is( ":visible" ), "third panel is still visible" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
+
+		// SPACE activates, cancels delay
+		tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
+		setTimeout( step3, 1 );
+	}
+
+	// end, enter
+	function step3() {
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+		ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
+
+		tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
+		ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "END moves focus to last tab" );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
+		equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "first tab has aria-selected=false" );
+		ok( panels.eq( 2 ).is( ":hidden" ), "third panel is still hidden" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
+		ok( panels.eq( 0 ).is( ":visible" ), "first panel is still visible" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" );
+
+		// ENTER activates, cancels delay
+		tabs.eq( 0 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
+		setTimeout( step4, 1 );
+	}
+
+	// enter (collapse)
+	function step4() {
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "true", "third tab has aria-selected=true" );
+		ok( panels.eq( 2 ).is( ":visible" ), "third panel is visible" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" );
+		ok( panels.eq( 0 ).is( ":hidden" ), "first panel is hidden" );
+		equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "first panel has aria-expanded=false" );
+		equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" );
+
+		// ENTER collapses if active
+		tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
+		equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" );
+		ok( panels.eq( 2 ).is( ":hidden" ), "third panel is hidden" );
+		equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "third panel has aria-expanded=false" );
+		equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" );
+
+		start();
+	}
+
+	setTimeout( step1, 1 );
+});
+
 test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() {
 	expect( 1 );