blob: 0f91954b34b1ab596bb128d4623bf045f5578371 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
</head>
<body id="body">
<ul id="tablist_1" role="tablist">
<li id="tab_1" role="tab" tabindex="-1" class="">Crust</li>
<li id="tab_2" role="tab" tabindex="-1" aria-controls="panel_2" class="">Veges</li>
</ul>
<h3 tabindex=0 id="elementOutsideTabs">Test</h3>
<div id="panel_1" role="tabpanel" >
<h3 tabindex=0>Select Crust</h3>
</div>
<div id="panel_2" role="tabpanel" >
<h2 id="itemInPanel2" tabindex=0>Select Crust</h2>
</div>
<p id="description"></p>
<div id="console"></div>
<script>
description("This tests that the aria tab item becomes selected if either aria-selected is used, or if aria-controls points to an item that contains KB focus.");
if (window.accessibilityController) {
var tabList = accessibilityController.accessibleElementById('tablist_1');
var tab1 = tabList.childAtIndex(0);
var tab2 = tabList.childAtIndex(1);
// we set KB focus to something in panel_2, which means that tab2 should become selected
// because it aria-controls panel_2
var panel2Item = document.getElementById("itemInPanel2");
panel2Item.focus();
shouldBe("tab2.isSelected", "true");
// reset KB focus and verify that neither tab is selected
document.getElementById("elementOutsideTabs").focus();
shouldBe("tab1.isSelected", "false");
shouldBe("tab2.isSelected", "false");
// Now we set aria-selected to be true on tab1 so that it should become selected
document.getElementById("tab_1").setAttribute("aria-selected", "true");
shouldBe("tab1.isSelected", "true");
}
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>