LayoutTests/accessibility/aria-controls-with-tabs.html

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