| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| </head> |
| <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> |
| var output = "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.\n\n"; |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| var tabList = accessibilityController.accessibleElementById('tablist_1'); |
| var tab1 = tabList.childAtIndex(0); |
| var tab2 = tabList.childAtIndex(1); |
| |
| var panel2Item = document.getElementById("itemInPanel2"); |
| panel2Item.focus(); |
| setTimeout(async () => { |
| // Set KB focus to something in #panel_2, which means that #tab2 should become selected because it aria-controls #panel_2. |
| output += await expectAsync("tab2.isSelected", "true"); |
| |
| output += "\nRemoving aria-controls from #tab_2\n"; |
| document.getElementById("tab_2").removeAttribute("aria-controls"); |
| // #tab_2 no longer aria-controls something with KB focus, so it should become unselected. |
| output += await expectAsync("tab2.isSelected", "false"); |
| |
| output += "\nResetting #tab_2 aria-controls to be '#panel_2'\n"; |
| document.getElementById("tab_2").setAttribute("aria-controls", "panel_2"); |
| output += await expectAsync("tab2.isSelected", "true"); |
| |
| // Reset KB focus and verify that neither tab is selected. |
| document.getElementById("elementOutsideTabs").focus(); |
| output += await expectAsync("tab1.isSelected", "false"); |
| output += await expectAsync("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"); |
| output += await expectAsync("tab1.isSelected", "true"); |
| |
| debug(output); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
| |
