363cd2906689183dee76899fbc8d97c6c4da3918
[WebKit-https.git] / LayoutTests / accessibility / aria-controls-with-tabs.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script>
5 var successfullyParsed = false;
6 </script>
7 <script src="../fast/js/resources/js-test-pre.js"></script>
8 </head>
9 <body id="body">
10
11 <ul id="tablist_1" role="tablist">
12 <li id="tab_1" role="tab" tabindex="-1" class="">Crust</li>
13 <li id="tab_2" role="tab" tabindex="-1" aria-controls="panel_2" class="">Veges</li>
14 </ul>
15
16 <h3 tabindex=0 id="elementOutsideTabs">Test</h3>
17
18 <div id="panel_1" role="tabpanel" >
19 <h3 tabindex=0>Select Crust</h3>
20 </div>
21
22 <div id="panel_2" role="tabpanel" >
23 <h2 id="itemInPanel2" tabindex=0>Select Crust</h2>
24 </div>
25
26
27 <p id="description"></p>
28 <div id="console"></div>
29
30 <script>
31
32     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.");
33
34     if (window.accessibilityController) {
35
36           var root = accessibilityController.rootElement;
37           var body = root.childAtIndex(0);
38           var tabList = body.childAtIndex(0);
39           var tab1 = tabList.childAtIndex(0);
40           var tab2 = tabList.childAtIndex(1);
41
42           // we set KB focus to something in panel_2, which means that tab2 should become selected
43           // because it aria-controls panel_2
44           var panel2Item = document.getElementById("itemInPanel2");
45           panel2Item.focus();
46
47           shouldBe("tab2.isSelected", "true");
48
49           // reset KB focus and verify that neither tab is selected
50           document.getElementById("elementOutsideTabs").focus();
51           shouldBe("tab1.isSelected", "false");
52           shouldBe("tab2.isSelected", "false");
53
54           // Now we set aria-selected to be true on tab1 so that it should become selected
55           document.getElementById("tab_1").setAttribute("aria-selected", "true");
56           shouldBe("tab1.isSelected", "true");          
57     }
58
59     successfullyParsed = true;
60 </script>
61
62 <script src="../fast/js/resources/js-test-post.js"></script>
63 </body>
64 </html>