| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.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> |
| |
| <script> |
| |
| test((t) => { |
| 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(); |
| |
| assert_equals(tab2.isSelected, true); |
| |
| // reset KB focus and verify that neither tab is selected |
| document.getElementById("elementOutsideTabs").focus(); |
| assert_equals(tab1.isSelected, false); |
| assert_equals(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"); |
| assert_equals(tab1.isSelected, true); |
| }, "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."); |
| |
| </script> |
| |
| </body> |
| </html> |
