test_tabs_accessibility.html (4055B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE HTML> 5 <html dir="ltr"> 6 <!-- 7 Test tabs accessibility. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Tabs component accessibility test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 14 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 15 </head> 16 <body> 17 <pre id="test"> 18 <script src="head.js" type="application/javascript"></script> 19 <script type="application/javascript"> 20 21 'use strict' 22 23 window.onload = async function () { 24 try { 25 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 26 const { createFactory } = browserRequire("devtools/client/shared/vendor/react"); 27 const InspectorTabPanel = createFactory(browserRequire("devtools/client/inspector/components/InspectorTabPanel")); 28 const Tabbar = 29 createFactory(browserRequire("devtools/client/shared/components/tabs/TabBar")); 30 const tabbar = Tabbar(); 31 const tabbarReact = ReactDOM.render(tabbar, window.document.body); 32 const tabbarEl = ReactDOM.findDOMNode(tabbarReact); 33 34 // Setup for InspectorTabPanel 35 const tabpanels = document.createElement("div"); 36 tabpanels.id = "tabpanels"; 37 document.body.appendChild(tabpanels); 38 39 await addTabWithPanel(0); 40 await addTabWithPanel(1); 41 42 const tabAnchors = tabbarEl.querySelectorAll("li.tabs-menu-item a"); 43 44 is(tabAnchors[0].parentElement.getAttribute("role"), "presentation", "li role is set correctly"); 45 is(tabAnchors[0].getAttribute("role"), "tab", "Anchor role is set correctly"); 46 is(tabAnchors[0].getAttribute("aria-selected"), "true", "Anchor aria-selected is set correctly by default"); 47 is(tabAnchors[0].getAttribute("aria-controls"), "sidebar-0-panel", "Anchor aria-controls is set correctly"); 48 is(tabAnchors[1].parentElement.getAttribute("role"), "presentation", "li role is set correctly"); 49 is(tabAnchors[1].getAttribute("role"), "tab", "Anchor role is set correctly"); 50 is(tabAnchors[1].getAttribute("aria-selected"), "false", "Anchor aria-selected is set correctly by default"); 51 is(tabAnchors[1].getAttribute("aria-controls"), "sidebar-1-panel", "Anchor aria-controls is set correctly"); 52 53 tabAnchors[0].focus(); 54 synthesizeKey("KEY_ArrowRight"); 55 // Wait for the second tab to be selected 56 await waitFor(() => tabAnchors[1].getAttribute("aria-selected") === "true"); 57 58 is(tabAnchors[0].getAttribute("aria-selected"), "false", "Anchor aria-selected is reset correctly"); 59 is(tabAnchors[1].getAttribute("aria-selected"), "true", "Anchor aria-selected is reset correctly"); 60 ok(document.activeElement === tabAnchors[1], "New active (second) tab is focused"); 61 62 synthesizeKey("KEY_ArrowLeft"); 63 // Wait for the first tab to be selected 64 await waitFor(() => tabAnchors[0].getAttribute("aria-selected") === "true"); 65 66 is(tabAnchors[0].getAttribute("aria-selected"), "true", "Anchor aria-selected is reset correctly"); 67 is(tabAnchors[1].getAttribute("aria-selected"), "false", "Anchor aria-selected is reset correctly"); 68 ok(document.activeElement === tabAnchors[0], "New active (first) tab is focused"); 69 70 function addTabWithPanel(tabId) { 71 // Setup for InspectorTabPanel 72 const panel = document.createElement("div"); 73 panel.id = `sidebar-${tabId}`; 74 document.body.appendChild(panel); 75 76 return setState(tabbarReact, Object.assign({}, tabbarReact.state, { 77 tabs: tabbarReact.state.tabs.concat({ 78 id: `sidebar-${tabId}`, 79 title: `tab-${tabId}`, 80 panel: InspectorTabPanel 81 }), 82 })); 83 } 84 } catch(e) { 85 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 86 } finally { 87 SimpleTest.finish(); 88 } 89 }; 90 </script> 91 </pre> 92 </body> 93 </html>