aria-controls-with-tabs.html 1.99 KB
Newer Older
cfleizach@apple.com's avatar
cfleizach@apple.com committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../fast/js/resources/js-test-style.css">
<script>
var successfullyParsed = false;
</script>
<script src="../fast/js/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 body = accessibilityController.rootElement;
          var tabList = body.childAtIndex(0).childAtIndex(0);
          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");          
    }

    successfullyParsed = true;
</script>

<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>