From f5e8041ebf1e0b36d67d1716a0cfec44692fabb8 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Sun, 18 May 2014 21:58:41 -0500 Subject: [PATCH] Tabs: Move `aria-expanded` from active panel to active tab Fixes #9622 Closes gh-1251 --- tests/unit/tabs/tabs_core.js | 126 +++++++++++++++++------------------ ui/tabs.js | 18 +++-- 2 files changed, 71 insertions(+), 73 deletions(-) diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js index 945dfb1e4..2e094e11b 100644 --- a/tests/unit/tabs/tabs_core.js +++ b/tests/unit/tabs/tabs_core.js @@ -98,34 +98,34 @@ test( "accessibility", function() { equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" ); equal( tabs.eq( 1 ).attr( "tabindex" ), 0, "active tab has tabindex=0" ); equal( tabs.eq( 1 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "active panel has aria-expanded=true" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded=true" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "active panel has aria-hidden=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" ); equal( tabs.eq( 0 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" ); - equal( panels.eq( 0 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" ); + equal( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); equal( tabs.eq( 2 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" ); equal( tabs.eq( 2 ).attr( "aria-disabled" ), "true", "disabled tab has aria-disabled=true" ); - equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" ); + equal( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); element.tabs( "option", "active", 0 ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" ); equal( tabs.eq( 0 ).attr( "tabindex" ), 0, "active tab has tabindex=0" ); equal( tabs.eq( 0 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" ); - equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "active panel has aria-expanded=true" ); + equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "active panel has aria-hidden=false" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); equal( tabs.eq( 1 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" ); equal( tabs.eq( 1 ).attr( "aria-disabled" ), null, "enabled tab does not have aria-disabled" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected=false" ); equal( tabs.eq( 2 ).attr( "tabindex" ), -1, "inactive tab has tabindex=-1" ); equal( tabs.eq( 2 ).attr( "aria-disabled" ), "true", "disabled tab has aria-disabled=true" ); - equal( panels.eq( 2 ).attr( "aria-expanded" ), "false", "inactive panel has aria-expanded=false" ); + equal( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); }); @@ -172,10 +172,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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 } ); @@ -183,10 +183,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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 } ); @@ -194,7 +194,7 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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 } ); @@ -202,10 +202,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step2, 100 ); @@ -216,10 +216,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( ":visible" ), "third panel is visible" ); - equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" ); + equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab 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 } ); @@ -227,10 +227,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab 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 } ); @@ -238,10 +238,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" ); // SPACE activates, cancels delay @@ -254,10 +254,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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 visible" ); - equal( panels.eq( 0 ).attr( "aria-expanded" ), "true", "first panel has aria-expanded=true" ); + equal( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tabs 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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 } ); @@ -265,10 +265,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tabs has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); // ENTER activates, cancels delay @@ -280,17 +280,17 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", 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( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); setTimeout( start, 1 ); @@ -323,10 +323,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); 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( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step2, 100 ); @@ -336,10 +336,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step2() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab has aria-expanded=false" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" ); tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT, ctrlKey: true } ); @@ -347,10 +347,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step3, 100 ); @@ -360,17 +360,17 @@ asyncTest( "keyboard support - CTRL navigation", function() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN, ctrlKey: true } ); 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" ); 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step4, 100 ); @@ -380,7 +380,7 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step4() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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, ctrlKey: true } ); @@ -388,10 +388,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step5, 100 ); @@ -401,10 +401,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step5() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT, ctrlKey: true } ); @@ -412,10 +412,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { equal( tabs.eq( 1 ).attr( "aria-selected" ), "false", "second tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); 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( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step6, 100 ); @@ -425,10 +425,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step6() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab has aria-expanded=false" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" ); tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME, ctrlKey: true } ); @@ -436,10 +436,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { 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( 1 ).is( ":hidden" ), "second panel is still hidden" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step7, 100 ); @@ -449,7 +449,7 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step7() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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.END, ctrlKey: true } ); @@ -457,10 +457,10 @@ asyncTest( "keyboard support - CTRL navigation", function() { equal( tabs.eq( 2 ).attr( "aria-selected" ), "false", "third tab has aria-selected=false" ); equal( tabs.eq( 0 ).attr( "aria-selected" ), "true", "first tab has aria-selected=true" ); 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab has aria-expanded=true" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "false", "first panel has aria-hidden=false" ); setTimeout( step8, 100 ); @@ -470,20 +470,20 @@ asyncTest( "keyboard support - CTRL navigation", function() { function step8() { 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.SPACE } ); 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( ":visible" ), "third panel is visible" ); - equal( panels.eq( 2 ).attr( "aria-expanded" ), "true", "third panel has aria-expanded=true" ); + equal( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab has aria-expanded=false" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" ); setTimeout( start, 1 ); @@ -511,10 +511,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab has aria-expanded=false" ); equal( panels.eq( 0 ).attr( "aria-hidden" ), "true", "first panel has aria-hidden=true" ); tabs.eq( 1 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } ); @@ -522,10 +522,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN moves focus to next tab" ); 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( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab has aria-expanded=true" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "false", "third panel has aria-hidden=false" ); ok( panels.eq( 1 ).is( ":hidden" ), "second panel is hidden" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "false", "second panel has aria-expanded=false" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "false", "second tab has aria-expanded=false" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "true", "second panel has aria-hidden=true" ); tabs.eq( 2 ).simulate( "keydown", { keyCode: keyCode.PAGE_DOWN, altKey: true } ); @@ -533,10 +533,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() ok( tabs.eq( 0 ).is( ".ui-state-focus" ), "ALT+PAGE_DOWN wraps focus to first tab" ); 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( tabs.eq( 0 ).attr( "aria-expanded" ), "true", "first tab 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); panels.eq( 0 ).simulate( "focus" ); @@ -551,10 +551,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() ok( tabs.eq( 2 ).is( ".ui-state-focus" ), "ALT+PAGE_UP wraps focus to last tab" ); 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( tabs.eq( 2 ).attr( "aria-expanded" ), "true", "third tab 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( tabs.eq( 0 ).attr( "aria-expanded" ), "false", "first tab 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.PAGE_UP, altKey: true } ); @@ -562,10 +562,10 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function() ok( tabs.eq( 1 ).is( ".ui-state-focus" ), "ALT+PAGE_UP moves focus to previous tab" ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "second tab has aria-selected=true" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel is visible" ); - equal( panels.eq( 1 ).attr( "aria-expanded" ), "true", "second panel has aria-expanded=true" ); + equal( tabs.eq( 1 ).attr( "aria-expanded" ), "true", "second tab has aria-expanded=true" ); equal( panels.eq( 1 ).attr( "aria-hidden" ), "false", "second 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( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "third tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "third panel has aria-hidden=true" ); panels.eq( 1 ).simulate( "focus" ); diff --git a/ui/tabs.js b/ui/tabs.js index 2232b3ecf..2f1304e77 100644 --- a/ui/tabs.js +++ b/ui/tabs.js @@ -360,12 +360,12 @@ return $.widget( "ui.tabs", { this.tabs.not( this.active ).attr({ "aria-selected": "false", + "aria-expanded": "false", tabIndex: -1 }); this.panels.not( this._getPanelForTab( this.active ) ) .hide() .attr({ - "aria-expanded": "false", "aria-hidden": "true" }); @@ -377,12 +377,12 @@ return $.widget( "ui.tabs", { .addClass( "ui-tabs-active ui-state-active" ) .attr({ "aria-selected": "true", + "aria-expanded": "true", tabIndex: 0 }); this._getPanelForTab( this.active ) .show() .attr({ - "aria-expanded": "true", "aria-hidden": "false" }); } @@ -634,11 +634,11 @@ return $.widget( "ui.tabs", { show(); } - toHide.attr({ - "aria-expanded": "false", - "aria-hidden": "true" + toHide.attr( "aria-hidden", "true" ); + eventData.oldTab.attr({ + "aria-selected": "false", + "aria-expanded": "false" }); - eventData.oldTab.attr( "aria-selected", "false" ); // If we're switching tabs, remove the old tab from the tab order. // If we're opening from collapsed state, remove the previous tab from the tab order. // If we're collapsing, then keep the collapsing tab in the tab order. @@ -651,12 +651,10 @@ return $.widget( "ui.tabs", { .attr( "tabIndex", -1 ); } - toShow.attr({ - "aria-expanded": "true", - "aria-hidden": "false" - }); + toShow.attr( "aria-hidden", "false" ); eventData.newTab.attr({ "aria-selected": "true", + "aria-expanded": "true", tabIndex: 0 }); }, -- 2.39.5