1 <!DOCTYPE HTML PUBLIC
"-//IETF//DTD HTML//EN">
4 <script src=
"../resources/js-test.js"></script>
8 <ul id=
"tablist_1" role=
"tablist">
9 <li id=
"tab_1" role=
"tab" tabindex=
"-1" class=
"">Crust
</li>
10 <li id=
"tab_2" role=
"tab" tabindex=
"-1" aria-controls=
"panel_2" class=
"">Veges
</li>
13 <h3 tabindex=
0 id=
"elementOutsideTabs">Test
</h3>
15 <div id=
"panel_1" role=
"tabpanel" >
16 <h3 tabindex=
0>Select Crust
</h3>
19 <div id=
"panel_2" role=
"tabpanel" >
20 <h2 id=
"itemInPanel2" tabindex=
0>Select Crust
</h2>
24 <p id=
"description"></p>
25 <div id=
"console"></div>
29 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.");
31 if (window
.accessibilityController
) {
33 var tabList
= accessibilityController
.accessibleElementById('tablist_1');
34 var tab1
= tabList
.childAtIndex(0);
35 var tab2
= tabList
.childAtIndex(1);
37 // we set KB focus to something in panel_2, which means that tab2 should become selected
38 // because it aria-controls panel_2
39 var panel2Item
= document
.getElementById("itemInPanel2");
42 shouldBe("tab2.isSelected", "true");
44 // reset KB focus and verify that neither tab is selected
45 document
.getElementById("elementOutsideTabs").focus();
46 shouldBe("tab1.isSelected", "false");
47 shouldBe("tab2.isSelected", "false");
49 // Now we set aria-selected to be true on tab1 so that it should become selected
50 document
.getElementById("tab_1").setAttribute("aria-selected", "true");
51 shouldBe("tab1.isSelected", "true");