diff options
Diffstat (limited to 'devtools/client/accessibility/test/browser')
28 files changed, 3992 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/browser/browser.toml b/devtools/client/accessibility/test/browser/browser.toml new file mode 100644 index 0000000000..e545187857 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser.toml @@ -0,0 +1,73 @@ +[DEFAULT] +tags = "devtools" +subsuite = "devtools" +support-files = [ + "head.js", + "!/devtools/client/shared/test/shared-head.js", + "!/devtools/client/shared/test/highlighter-test-actor.js", + "!/devtools/client/inspector/test/shared-head.js", + "!/devtools/client/shared/test/telemetry-test-helpers.js", +] + +["browser_accessibility_context_menu_browser.js"] + +["browser_accessibility_context_menu_inspector.js"] +skip-if = [ + "apple_catalina", # Bug 1713392 +] + +["browser_accessibility_fission_switch_target.js"] +https_first_disabled = true +skip-if = ["os == 'linux' && asan"] # bug 1666940 + +["browser_accessibility_mutations.js"] +skip-if = [ + "os == 'linux' && bits == 64 && fission", # Bug 1675445 +] + +["browser_accessibility_panel_audit_hidden_iframe.js"] + +["browser_accessibility_panel_audit_oop.js"] + +["browser_accessibility_panel_toolbar_checks.js"] + +["browser_accessibility_panel_toolbar_pref_scroll.js"] +skip-if = ["true"] # bug 1674060 + +["browser_accessibility_print_to_json.js"] + +["browser_accessibility_relation_navigation.js"] + +["browser_accessibility_reload.js"] + +["browser_accessibility_sidebar.js"] + +["browser_accessibility_sidebar_checks.js"] +skip-if = ["os == 'linux' && !debug"] # Bug 1767748 + +["browser_accessibility_sidebar_dom_nodes.js"] + +["browser_accessibility_simulation.js"] +skip-if = ["true"] # bug 1674060 + +["browser_accessibility_tabbing_order_highlighter.js"] + +["browser_accessibility_tabbing_order_highlighter_iframe_picker.js"] + +["browser_accessibility_tree.js"] + +["browser_accessibility_tree_audit.js"] + +["browser_accessibility_tree_audit_long.js"] + +["browser_accessibility_tree_audit_reset.js"] + +["browser_accessibility_tree_audit_toolbar.js"] + +["browser_accessibility_tree_contrast.js"] + +["browser_accessibility_tree_iframe_picker.js"] + +["browser_accessibility_tree_navigation.js"] + +["browser_accessibility_tree_navigation_oop.js"] diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js new file mode 100644 index 0000000000..0491b29eb4 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_browser.js @@ -0,0 +1,74 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = '<h1 id="h1">header</h1><p id="p">paragraph</p>'; + +addA11YPanelTask( + "Test show accessibility properties context menu in browser.", + TEST_URI, + async function ({ panel, toolbox, browser }) { + // Load the inspector to ensure it to use in this test. + await toolbox.loadTool("inspector"); + + const headerSelector = "#h1"; + + const contextMenu = document.getElementById("contentAreaContextMenu"); + const awaitPopupShown = BrowserTestUtils.waitForEvent( + contextMenu, + "popupshown" + ); + await BrowserTestUtils.synthesizeMouse( + headerSelector, + 0, + 0, + { + type: "contextmenu", + button: 2, + centered: true, + }, + browser + ); + await awaitPopupShown; + + const inspectA11YPropsItem = contextMenu.querySelector( + "#context-inspect-a11y" + ); + + info( + "Triggering 'Inspect Accessibility Properties' and waiting for " + + "accessibility panel to open" + ); + const popupHidden = BrowserTestUtils.waitForEvent( + contextMenu, + "popuphidden" + ); + contextMenu.activateItem(inspectA11YPropsItem); + await popupHidden; + + const selected = await panel.once("new-accessible-front-selected"); + const expectedSelectedNode = await getNodeFront( + headerSelector, + toolbox.getPanel("inspector") + ); + const expectedSelected = + await panel.accessibilityProxy.accessibilityFront.accessibleWalkerFront.getAccessibleFor( + expectedSelectedNode + ); + is( + toolbox.getCurrentPanel(), + panel, + "Accessibility panel is currently selected" + ); + is(selected, expectedSelected, "Accessible front selected correctly"); + + const doc = panel.panelWin.document; + const propertiesTree = doc.querySelector(".tree"); + is(doc.activeElement, propertiesTree, "Properties list must be focused."); + ok( + isVisible(doc.querySelector(".treeTable .treeRow.selected")), + "Selected row is visible." + ); + } +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js new file mode 100644 index 0000000000..03273a30c2 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_context_menu_inspector.js @@ -0,0 +1,104 @@ +/* Any copyright is dedicated to the Public Domain. +http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +const TEST_URI = ` + <h1 id="h1">header</h1> + <p id="p">paragraph</p> + <span id="span-1">text</span> + <span id="span-2"> + IamaverylongtextwhichdoesntfitinInlineTextChildReallyIdontIamtoobig + </span>`; + +async function openContextMenuForNode({ toolbox }, selector) { + info("Selecting Inspector tab and opening a context menu"); + const inspector = await toolbox.selectTool("inspector"); + + if (!selector) { + ok(inspector.selection.isBodyNode(), "Default selection is a body node."); + } else if (typeof selector === "string") { + await selectNode(selector, inspector, "test"); + } else { + const updated = inspector.once("inspector-updated"); + inspector.selection.setNodeFront(selector, { reason: "test" }); + await updated; + } + + return openContextMenuAndGetAllItems(inspector); +} + +function checkShowA11YPropertiesNode(allMenuItems) { + const showA11YPropertiesNode = allMenuItems.find( + item => item.id === "node-menu-showaccessibilityproperties" + ); + ok( + showA11YPropertiesNode, + "the popup menu now has a show accessibility properties item" + ); + return showA11YPropertiesNode; +} + +async function checkAccessibleObjectSelection( + { toolbox, panel }, + menuItem, + isText +) { + const inspector = await toolbox.getPanel("inspector"); + info( + "Triggering 'Show Accessibility Properties' and waiting for " + + "accessibility panel to open" + ); + const panelSelected = toolbox.once("accessibility-selected"); + const objectSelected = panel.once("new-accessible-front-selected"); + menuItem.click(); + await panelSelected; + const selected = await objectSelected; + + const expectedNode = isText + ? inspector.selection.nodeFront.inlineTextChild + : inspector.selection.nodeFront; + const expectedSelected = + await panel.accessibilityProxy.accessibilityFront.accessibleWalkerFront.getAccessibleFor( + expectedNode + ); + is(selected, expectedSelected, "Accessible front selected correctly"); + + const doc = panel.panelWin.document; + const propertiesTree = doc.querySelector(".tree"); + is(doc.activeElement, propertiesTree, "Properties list must be focused."); + ok( + isVisible(doc.querySelector(".treeTable .treeRow.selected")), + "Selected row is visible." + ); +} + +addA11YPanelTask( + "Test show accessibility properties context menu.", + TEST_URI, + async function testShowAccessibilityPropertiesContextMenu(env) { + // Load the inspector to ensure it to use in this test. + await env.toolbox.loadTool("inspector"); + + let allMenuItems = await openContextMenuForNode(env); + let showA11YPropertiesNode = checkShowA11YPropertiesNode(allMenuItems); + + allMenuItems = await openContextMenuForNode(env, "#h1"); + showA11YPropertiesNode = checkShowA11YPropertiesNode(allMenuItems); + await checkAccessibleObjectSelection(env, showA11YPropertiesNode); + + allMenuItems = await openContextMenuForNode(env, "#span-1"); + showA11YPropertiesNode = checkShowA11YPropertiesNode(allMenuItems); + await checkAccessibleObjectSelection(env, showA11YPropertiesNode, true); + + allMenuItems = await openContextMenuForNode(env, "#span-2"); + showA11YPropertiesNode = checkShowA11YPropertiesNode(allMenuItems); + + const inspector = env.toolbox.getPanel("inspector"); + const span2 = await getNodeFront("#span-2", inspector); + await inspector.markup.expandNode(span2); + const { nodes } = await inspector.walker.children(span2); + allMenuItems = await openContextMenuForNode(env, nodes[0]); + showA11YPropertiesNode = checkShowA11YPropertiesNode(allMenuItems); + await checkAccessibleObjectSelection(env, showA11YPropertiesNode, false); + } +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_fission_switch_target.js b/devtools/client/accessibility/test/browser/browser_accessibility_fission_switch_target.js new file mode 100644 index 0000000000..9da56a0b1b --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_fission_switch_target.js @@ -0,0 +1,58 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test switching for the top-level target. + +const MAIN_PROCESS_URL = "about:robots"; +const MAIN_PROCESS_EXPECTED = [ + { + expected: { + sidebar: { + name: "Gort! Klaatu barada nikto!", + role: "document", + }, + }, + }, +]; + +const CONTENT_PROCESS_URL = buildURL(`<title>Test page</title>`); +const CONTENT_PROCESS_EXPECTED = [ + { + expected: { + sidebar: { + name: "Test page", + role: "document", + relations: { + "containing document": { + role: "document", + name: "Test page", + }, + embeds: { + role: "document", + name: "Test page", + }, + }, + }, + }, + }, +]; + +add_task(async () => { + info( + "Open a test page running on the content process and accessibility panel" + ); + const env = await addTestTab(CONTENT_PROCESS_URL); + await runA11yPanelTests(CONTENT_PROCESS_EXPECTED, env); + + info("Navigate to a page running on the main process"); + await navigateTo(MAIN_PROCESS_URL); + await runA11yPanelTests(MAIN_PROCESS_EXPECTED, env); + + info("Back to a page running on the content process"); + await navigateTo(CONTENT_PROCESS_URL); + await runA11yPanelTests(CONTENT_PROCESS_EXPECTED, env); + + await closeTabToolboxAccessibility(env.tab); +}); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_mutations.js b/devtools/client/accessibility/test/browser/browser_accessibility_mutations.js new file mode 100644 index 0000000000..4c564747f9 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_mutations.js @@ -0,0 +1,217 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 id="h1">Top level header</h1> + <p id="p">This is a paragraph.</p> + </body> +</html>`; + +const documentRow = { + role: "document", + name: `"Accessibility Panel Test"`, +}; +const documentRowOOP = { + role: "document", + name: `""text label`, + badges: ["text label"], +}; +const subtree = [ + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "text leaf", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, +]; +const frameSubtree = [ + { role: "internal frame", name: `"Accessibility Panel Test (OOP)"` }, + { + role: "document", + name: `"Accessibility Panel Test (OOP)"`, + }, +]; +const subtreeOOP = [...frameSubtree, ...subtree]; +const renamed = [ + { + role: "heading", + name: `"New Header"`, + }, + { + role: "text leaf", + name: `"New Header"`, + }, +]; +const paragraphSidebar = { + name: null, + role: "paragraph", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 1, + indexInParent: 1, + states: ["selectable text", "opaque", "enabled", "sensitive"], +}; +const headerSidebar = { + name: "Top level header", + role: "text leaf", +}; +const newHeaderSidebar = { + name: "New Header", +}; + +function removeRow(rowNumber) { + return async ({ doc, browser }) => { + is( + doc.querySelectorAll(".treeRow").length, + rowNumber, + "Tree size is correct." + ); + await SpecialPowers.spawn(browser, [], async () => { + const iframe = content.document.getElementsByTagName("iframe")[0]; + if (iframe) { + await SpecialPowers.spawn(iframe, [], () => + content.document.getElementById("p").remove() + ); + return; + } + + content.document.getElementById("p").remove(); + }); + await BrowserTestUtils.waitForCondition( + () => doc.querySelectorAll(".treeRow").length === rowNumber - 1, + "Tree updated." + ); + }; +} + +async function rename({ browser }) { + await SpecialPowers.spawn(browser, [], async () => { + const iframe = content.document.getElementsByTagName("iframe")[0]; + if (iframe) { + await SpecialPowers.spawn( + iframe, + [], + () => (content.document.getElementById("h1").textContent = "New Header") + ); + return; + } + + content.document.getElementById("h1").textContent = "New Header"; + }); +} + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const testsTopLevel = [ + { + desc: "Expand first and second rows, select third row.", + setup: async ({ doc }) => { + await toggleRow(doc, 0); + await toggleRow(doc, 1); + selectRow(doc, 3); + }, + expected: { + tree: [documentRow, ...subtree], + sidebar: paragraphSidebar, + }, + }, + { + desc: "Remove a child from a document.", + setup: removeRow(4), + expected: { + tree: [documentRow, ...subtree.slice(0, -1)], + sidebar: headerSidebar, + }, + }, + { + desc: "Update child's text content.", + setup: rename, + expected: { + tree: [documentRow, ...renamed], + }, + }, + { + desc: "Select third row in the tree.", + setup: ({ doc }) => selectRow(doc, 1), + expected: { + sidebar: newHeaderSidebar, + }, + }, +]; + +const testsOOP = [ + { + desc: "Expand rows until we reach an internal OOP frame.", + setup: async ({ doc }) => { + await toggleRow(doc, 0); + await toggleRow(doc, 1); + await toggleRow(doc, 2); + await toggleRow(doc, 3); + selectRow(doc, 5); + }, + expected: { + tree: [documentRowOOP, ...subtreeOOP], + sidebar: paragraphSidebar, + }, + }, + { + desc: "Remove a child from a document.", + setup: removeRow(6), + expected: { + tree: [documentRowOOP, ...subtreeOOP.slice(0, -1)], + sidebar: headerSidebar, + }, + }, + { + desc: "Update child's text content.", + setup: rename, + expected: { + tree: [documentRowOOP, ...frameSubtree, ...renamed], + }, + }, + { + desc: "Select third row in the tree.", + setup: ({ doc }) => selectRow(doc, 1), + expected: { + sidebar: newHeaderSidebar, + }, + }, +]; + +/** + * Tests that checks the Accessibility panel after DOM tree mutations. + */ +addA11yPanelTestsTask( + testsTopLevel, + TEST_URI, + "Test Accessibility panel after DOM tree mutations." +); + +addA11yPanelTestsTask( + testsOOP, + TEST_URI, + "Test Accessibility panel after DOM tree mutations in the OOP frame.", + { remoteIframe: true } +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_hidden_iframe.js b/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_hidden_iframe.js new file mode 100644 index 0000000000..1e7d0e26c2 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_hidden_iframe.js @@ -0,0 +1,66 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + <iframe style="display: none"></iframe> + <iframe style="display: none" src="data:text/html,iframe"></iframe> + <iframe style="display: none" src="https://example.com/document-builder.sjs?html=oop"></iframe> + </body> + </html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Initial state.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + }, + }, + { + desc: "Click on the Check for issues - all.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 1, + }, + ], + }, + }, +]; + +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree audit on a page with hidden iframes." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_oop.js b/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_oop.js new file mode 100644 index 0000000000..d1ccbe9d5c --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_panel_audit_oop.js @@ -0,0 +1,109 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + </body> + </html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Initial state.", + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + level: 1, + }, + ], + }, + }, + { + desc: "Click on the Check for issues - all.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + level: 1, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 1, + }, + ], + }, + }, + { + desc: "Click on the Check for issues - all again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + level: 1, + }, + { + role: "internal frame", + name: `"Accessibility Panel Test (OOP)"`, + level: 2, + }, + { + role: "document", + name: `"Accessibility Panel Test (OOP)"`, + level: 3, + }, + { + role: "heading", + name: `"Top level header"`, + level: 4, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 5, + }, + ], + }, + }, +]; + +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree audit on a page with an OOP document.", + { remoteIframe: true } +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_checks.js b/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_checks.js new file mode 100644 index 0000000000..b7d541853b --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_checks.js @@ -0,0 +1,114 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body></body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Check initial state.", + expected: { + activeToolbarFilters: [true, false, false, false, false], + }, + }, + { + desc: "Toggle first filter (all) to activate.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + activeToolbarFilters: [false, true, true, true, true], + }, + }, + { + desc: "Click on the filter again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + activeToolbarFilters: [true, false, false, false, false], + }, + }, + { + desc: "Toggle first custom filter to activate.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 2); + }, + expected: { + activeToolbarFilters: [false, false, true, false, false], + }, + }, + { + desc: "Click on the filter again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 2); + }, + expected: { + activeToolbarFilters: [true, false, false, false, false], + }, + }, + { + desc: "Toggle first custom filter to activate.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 2); + }, + expected: { + activeToolbarFilters: [false, false, true, false, false], + }, + }, + { + desc: "Toggle second custom filter to activate.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 3); + }, + expected: { + activeToolbarFilters: [false, false, true, true, false], + }, + }, + { + desc: "Toggle third custom filter to activate.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 4); + }, + expected: { + activeToolbarFilters: [false, true, true, true, true], + }, + }, + { + desc: "Click on the none filter to de-activate all.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 0); + }, + expected: { + activeToolbarFilters: [true, false, false, false, false], + }, + }, +]; + +/** + * Simple test that checks toggle states for filters in the Accessibility panel + * toolbar. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel filter toggle states." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_pref_scroll.js b/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_pref_scroll.js new file mode 100644 index 0000000000..9f8434f695 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_panel_toolbar_pref_scroll.js @@ -0,0 +1,73 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, PREFS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body></body> +</html>`; + +const { + PREFS: { SCROLL_INTO_VIEW }, +} = require("resource://devtools/client/accessibility/constants.js"); + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Check initial state. All filters are disabled (except none). Scroll into view pref disabled.", + expected: { + activeToolbarFilters: [true, false, false, false], + toolbarPrefValues: { + [SCROLL_INTO_VIEW]: false, + }, + }, + }, + { + desc: "Toggle scroll into view checkbox to set the pref. Scroll into view pref should be enabled.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, PREFS_MENU_ID, 0); + }, + expected: { + activeToolbarFilters: [true, false, false, false], + toolbarPrefValues: { + [SCROLL_INTO_VIEW]: true, + }, + }, + }, + { + desc: "Toggle off scroll into view checkbox to unset the pref. Scroll into view pref disabled.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, PREFS_MENU_ID, 0); + }, + expected: { + activeToolbarFilters: [true, false, false, false], + toolbarPrefValues: { + [SCROLL_INTO_VIEW]: false, + }, + }, + }, +]; + +/** + * Simple test that checks toggle state and pref set for automatic scroll into + * view setting. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel scroll into view pref." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_print_to_json.js b/devtools/client/accessibility/test/browser/browser_accessibility_print_to_json.js new file mode 100644 index 0000000000..b7641430c0 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_print_to_json.js @@ -0,0 +1,245 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = "<h1>Top level header</h1>"; + +function getMenuItems(toolbox) { + const menuDoc = toolbox.doc.defaultView.windowRoot.ownerGlobal.document; + const menu = menuDoc.getElementById("accessibility-row-contextmenu"); + return { + menu, + items: [...menu.getElementsByTagName("menuitem")], + }; +} + +async function newTabSelected(tab) { + info("Waiting for the JSON viewer tab."); + await BrowserTestUtils.waitForCondition( + () => gBrowser.selectedTab !== tab, + "Current tab updated." + ); + return gBrowser.selectedTab; +} + +function parseSnapshotFromTabURI(tab) { + let snapshot = tab.label.split("data:application/json;charset=UTF-8,")[1]; + snapshot = decodeURIComponent(snapshot); + return JSON.parse(snapshot); +} + +async function checkJSONSnapshotForRow({ doc, tab, toolbox }, index, expected) { + info(`Triggering context menu for row #${index}.`); + EventUtils.synthesizeMouseAtCenter( + doc.querySelectorAll(".treeRow")[index], + { type: "contextmenu" }, + doc.defaultView + ); + + info(`Triggering "Print To JSON" menu item for row ${index}.`); + const { + menu, + items: [printToJSON], + } = getMenuItems(toolbox); + + await BrowserTestUtils.waitForPopupEvent(menu, "shown"); + + menu.activateItem(printToJSON); + + const jsonViewTab = await newTabSelected(tab); + Assert.deepEqual( + parseSnapshotFromTabURI(jsonViewTab), + expected, + "JSON snapshot for the whole document is correct" + ); + + await removeTab(jsonViewTab); +} + +const OOP_FRAME_DOCUMENT_SNAPSHOT = { + childCount: 1, + description: "", + indexInParent: 0, + keyboardShortcut: "", + name: "Accessibility Panel Test (OOP)", + nodeCssSelector: "", + nodeType: 9, + role: "document", + value: "", + actions: [], + attributes: { + display: "block", + "explicit-name": "true", + "margin-bottom": "8px", + "margin-left": "8px", + "margin-right": "8px", + "margin-top": "8px", + tag: "body", + "text-align": "start", + "text-indent": "0px", + }, + states: ["readonly", "focusable", "opaque", "enabled", "sensitive"], + children: [ + { + childCount: 1, + description: "", + indexInParent: 0, + keyboardShortcut: "", + name: "Top level header", + nodeCssSelector: "body > h1:nth-child(1)", + nodeType: 1, + role: "heading", + value: "", + actions: [], + attributes: { + display: "block", + formatting: "block", + level: "1", + "margin-bottom": "21.44px", + "margin-left": "0px", + "margin-right": "0px", + "margin-top": "0px", + tag: "h1", + "text-align": "start", + "text-indent": "0px", + }, + states: ["selectable text", "opaque", "enabled", "sensitive"], + children: [ + { + childCount: 0, + description: "", + indexInParent: 0, + keyboardShortcut: "", + name: "Top level header", + nodeCssSelector: "body > h1:nth-child(1)#text", + nodeType: 3, + role: "text leaf", + value: "", + actions: [], + attributes: { + "explicit-name": "true", + }, + states: ["opaque", "enabled", "sensitive"], + children: [], + }, + ], + }, + ], +}; + +const OOP_FRAME_SNAPSHOT = { + childCount: 1, + description: "", + indexInParent: 0, + keyboardShortcut: "", + name: "Accessibility Panel Test (OOP)", + nodeCssSelector: "body > iframe:nth-child(1)", + nodeType: 1, + role: "internal frame", + value: "", + actions: [], + attributes: { + display: "inline", + "explicit-name": "true", + "margin-bottom": "0px", + "margin-left": "0px", + "margin-right": "0px", + "margin-top": "0px", + tag: "iframe", + "text-align": "start", + "text-indent": "0px", + }, + states: ["focusable", "opaque", "enabled", "sensitive"], + children: [OOP_FRAME_DOCUMENT_SNAPSHOT], +}; + +const EXPECTED_SNAPSHOT = { + childCount: 1, + description: "", + indexInParent: 0, + keyboardShortcut: "", + name: "", + nodeCssSelector: "", + nodeType: 9, + role: "document", + value: "", + actions: [], + attributes: { + display: "block", + "explicit-name": "true", + "margin-bottom": "8px", + "margin-left": "8px", + "margin-right": "8px", + "margin-top": "8px", + tag: "body", + "text-align": "start", + "text-indent": "0px", + }, + states: ["readonly", "focusable", "opaque", "enabled", "sensitive"], + children: [OOP_FRAME_SNAPSHOT], +}; + +addA11YPanelTask( + "Test print to JSON functionality.", + TEST_URI, + async env => { + const { doc } = env; + await runA11yPanelTests( + [ + { + desc: "Test the initial accessibility tree.", + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + ], + }, + }, + ], + env + ); + + await toggleRow(doc, 0); + await toggleRow(doc, 1); + + await runA11yPanelTests( + [ + { + desc: "Test expanded accessibility tree.", + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + { + role: "internal frame", + name: `"Accessibility Panel Test (OOP)"`, + }, + { + role: "document", + name: `"Accessibility Panel Test (OOP)"`, + }, + ], + }, + }, + ], + env + ); + + // Complete snapshot that includes OOP frame document (crossing process boundry). + await checkJSONSnapshotForRow(env, 0, EXPECTED_SNAPSHOT); + // Snapshot of an OOP frame (crossing process boundry). + await checkJSONSnapshotForRow(env, 1, OOP_FRAME_SNAPSHOT); + // Snapshot of an OOP frame document (not crossing process boundry). + await checkJSONSnapshotForRow(env, 2, OOP_FRAME_DOCUMENT_SNAPSHOT); + }, + { + remoteIframe: true, + } +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_relation_navigation.js b/devtools/client/accessibility/test/browser/browser_accessibility_relation_navigation.js new file mode 100644 index 0000000000..5f9b5e6eb5 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_relation_navigation.js @@ -0,0 +1,169 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + L10N, +} = require("resource://devtools/client/accessibility/utils/l10n.js"); + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1>Top level header</h1> + <p>This is a paragraph.</p> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility tree and sidebar states.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + sidebar: { + name: "Accessibility Panel Test", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 2, + indexInParent: 0, + states: [ + // The focused state is an outdated state, since the toolbox should now + // have the focus and not the content page. See Bug 1702709. + "focused", + "readonly", + "focusable", + "opaque", + "enabled", + "sensitive", + ], + }, + }, + }, + { + desc: "Expand first tree node.", + setup: ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + }, + }, + { + desc: "Select second tree node.", + setup: ({ doc }) => selectRow(doc, 1), + expected: { + sidebar: { + name: "Top level header", + role: "heading", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 1, + indexInParent: 0, + relations: { + "containing document": { + role: "document", + name: "Accessibility Panel Test", + }, + }, + states: ["selectable text", "opaque", "enabled", "sensitive"], + }, + }, + }, + { + desc: "Select containing document.", + setup: async ({ doc, win }) => { + const relations = await selectProperty(doc, "/relations"); + AccessibilityUtils.setEnv({ + // Keyboard navigation is handled on the container level using arrow + // keys. + mustHaveAccessibleRule: false, + }); + EventUtils.sendMouseEvent( + { type: "click" }, + relations.querySelector(".arrow"), + win + ); + AccessibilityUtils.resetEnv(); + const containingDocRelation = await selectProperty( + doc, + "/relations/containing document" + ); + AccessibilityUtils.setEnv({ + // Keyboard interaction is only enabled when the row is selected and + // activated. + nonNegativeTabIndexRule: false, + }); + + const selectElementInTreeButton = containingDocRelation.querySelector( + ".open-accessibility-inspector" + ); + ok(!!selectElementInTreeButton, "There's a button to select the element"); + is( + selectElementInTreeButton.getAttribute("title"), + L10N.getStr("accessibility.accessible.selectElement.title"), + "The button has the expected title" + ); + EventUtils.sendMouseEvent( + { type: "click" }, + selectElementInTreeButton, + win + ); + AccessibilityUtils.resetEnv(); + }, + expected: { + sidebar: { + name: "Accessibility Panel Test", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 2, + indexInParent: 0, + states: ["readonly", "focusable", "opaque", "enabled", "sensitive"], + }, + }, + }, +]; + +/** + * Check navigation within the tree. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel relation navigation." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_reload.js b/devtools/client/accessibility/test/browser/browser_accessibility_reload.js new file mode 100644 index 0000000000..c4ffdf30dd --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_reload.js @@ -0,0 +1,107 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI_1 = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1>Top level header</h1> + <p>This is a paragraph.</p> + </body> +</html>`; + +const TEST_URI_2 = `<html> + <head> + <meta charset="utf-8"/> + <title>Navigation Accessibility Panel</title> + </head> + <body></body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility tree state after first row is expanded.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + sidebar: { + name: "Accessibility Panel Test", + role: "document", + }, + }, + }, + { + desc: "Reload the page.", + setup: async ({ panel }) => { + const onReloaded = panel.once("reloaded"); + panel.accessibilityProxy.commands.targetCommand.reloadTopLevelTarget(); + await onReloaded; + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + sidebar: { + name: "Accessibility Panel Test", + role: "document", + }, + }, + }, + { + desc: "Navigate to a new page.", + setup: async () => { + // `navigate` waits for the "reloaded" event so we don't need to do it explicitly here + await navigateTo(buildURL(TEST_URI_2)); + }, + expected: { + tree: [ + { + role: "document", + name: `"Navigation Accessibility Panel"`, + }, + ], + sidebar: { + name: "Navigation Accessibility Panel", + role: "document", + }, + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree on reload. + */ +addA11yPanelTestsTask( + tests, + TEST_URI_1, + "Test Accessibility panel tree on reload." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_sidebar.js b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar.js new file mode 100644 index 0000000000..e7c2795ced --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar.js @@ -0,0 +1,81 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body></body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility sidebar state.", + expected: { + sidebar: { + name: "Accessibility Panel Test", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 0, + indexInParent: 0, + states: [ + // The focused state is an outdated state, since the toolbox should now + // have the focus and not the content page. See Bug 1702709. + "focused", + "readonly", + "focusable", + "opaque", + "enabled", + "sensitive", + ], + }, + }, + }, + { + desc: "Mark document as disabled for accessibility.", + setup: async ({ browser }) => + SpecialPowers.spawn(browser, [], () => + content.document.body.setAttribute("aria-disabled", true) + ), + expected: { + sidebar: { + states: ["unavailable", "readonly", "focusable", "opaque"], + }, + }, + }, + { + desc: "Append a new child to the document.", + setup: async ({ browser }) => + SpecialPowers.spawn(browser, [], () => { + const doc = content.document; + const button = doc.createElement("button"); + button.textContent = "Press Me!"; + doc.body.appendChild(button); + }), + expected: { + sidebar: { + childCount: 1, + }, + }, + }, +]; + +/** + * Test that checks the Accessibility panel sidebar. + */ +addA11yPanelTestsTask(tests, TEST_URI, "Test Accessibility panel sidebar."); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js new file mode 100644 index 0000000000..f9c0abe8dc --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js @@ -0,0 +1,83 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + accessibility: { SCORES }, +} = require("resource://devtools/shared/constants.js"); + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <p style="color: red;">Red</p> + <p style="color: blue;">Blue</p> + <p style="color: gray; background: linear-gradient(#e66465, #9198e5);">Gray</p> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility audit state.", + setup: async ({ doc }) => { + await selectRow(doc, 0); + }, + expected: { + audit: { CONTRAST: null }, + }, + }, + { + desc: "Check accessible representing text node in red.", + setup: async ({ doc }) => { + await toggleRow(doc, 0); + await toggleRow(doc, 1); + await selectRow(doc, 2); + }, + expected: { + audit: { + CONTRAST: { + value: 4.0, + color: [255, 0, 0, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.FAIL, + }, + }, + }, + }, + { + desc: "Check accessible representing text node in blue.", + setup: async ({ doc }) => { + await toggleRow(doc, 3); + await selectRow(doc, 4); + }, + expected: { + audit: { + CONTRAST: { + value: 8.59, + color: [0, 0, 255, 1], + backgroundColor: [255, 255, 255, 1], + isLargeText: false, + score: SCORES.AAA, + }, + }, + }, + }, +]; + +/** + * Test that checks the Accessibility panel sidebar. + */ +addA11yPanelTestsTask(tests, TEST_URI, "Test Accessibility panel sidebar."); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_dom_nodes.js b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_dom_nodes.js new file mode 100644 index 0000000000..075354b0c3 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_sidebar_dom_nodes.js @@ -0,0 +1,111 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + L10N, +} = require("resource://devtools/client/accessibility/utils/l10n.js"); + +// Check that DOM nodes in the sidebar can be highlighted and that clicking on the icon +// next to them opens the inspector. + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Sidebar DOM Nodes Test</title> + </head> + <body> + <h1 id="select-me">Hello</h1> + </body> +</html>`; + +/** + * Test that checks the Accessibility panel sidebar. + */ +addA11YPanelTask( + "Check behavior of DOM nodes in side panel", + TEST_URI, + async ({ toolbox, doc }) => { + info("Select an item having an actual associated DOM node"); + await toggleRow(doc, 0); + selectRow(doc, 1); + + await BrowserTestUtils.waitForCondition( + () => getPropertyValue(doc, "name") === `"Hello"`, + "Wait until the sidebar is updated" + ); + + info("Check DOMNode"); + const domNodeEl = getPropertyItem(doc, "DOMNode"); + ok(domNodeEl, "The DOMNode item was retrieved"); + + const openInspectorButton = domNodeEl.querySelector(".open-inspector"); + ok(openInspectorButton, "The open inspector button is displayed"); + is( + openInspectorButton.getAttribute("title"), + L10N.getStr("accessibility.accessible.selectNodeInInspector.title"), + "The open inspector button has expected title" + ); + + info("Check that hovering DOMNode triggers the highlight"); + // Loading the inspector panel at first, to make it possible to listen for + // new node selections + await toolbox.loadTool("inspector"); + const highlighter = toolbox.getHighlighter(); + const highlighterTestFront = await getHighlighterTestFront(toolbox); + + const onHighlighterShown = highlighter.waitForHighlighterShown(); + + EventUtils.synthesizeMouseAtCenter( + openInspectorButton, + { type: "mousemove" }, + doc.defaultView + ); + + const { nodeFront } = await onHighlighterShown; + is(nodeFront.displayName, "h1", "The correct node was highlighted"); + isVisible = await highlighterTestFront.isHighlighting(); + ok(isVisible, "Highlighter is displayed"); + + info("Unhighlight the node by moving away from the node"); + const onHighlighterHidden = highlighter.waitForHighlighterHidden(); + EventUtils.synthesizeMouseAtCenter( + getPropertyItem(doc, "name"), + { type: "mousemove" }, + doc.defaultView + ); + + await onHighlighterHidden; + ok(true, "The highlighter was closed when moving away from the node"); + + info( + "Clicking on the inspector icon and waiting for the inspector to be selected" + ); + const onNewNode = toolbox.selection.once("new-node-front"); + openInspectorButton.click(); + const inspectorSelectedNodeFront = await onNewNode; + + ok(true, "Inspector selected and new node got selected"); + is( + inspectorSelectedNodeFront.id, + "select-me", + "The expected node was selected" + ); + } +); + +function getPropertyItem(doc, label) { + const labelEl = Array.from( + doc.querySelectorAll("#accessibility-properties .object-label") + ).find(el => el.textContent === label); + if (!labelEl) { + return null; + } + return labelEl.closest(".node"); +} + +function getPropertyValue(doc, label) { + return getPropertyItem(doc, label)?.querySelector(".object-value") + ?.textContent; +} diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_simulation.js b/devtools/client/accessibility/test/browser/browser_accessibility_simulation.js new file mode 100644 index 0000000000..85a9be6b36 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_simulation.js @@ -0,0 +1,99 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global openSimulationMenu, toggleSimulationOption */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Simulations Test</title> + </head> + <body> + <h1 style="color:blue; background-color:rgba(255,255,255,1);"> + Top level header + </h1> + <h2 style="color:green; background-color:rgba(255,255,255,1);"> + Second level header + </h2> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the simulation components can be checked. + * expected {JSON} An expected states for the simulation components. + * } + */ +const tests = [ + { + desc: "Check that the menu button is inactivate and the menu is closed initially.", + expected: { + simulation: { + buttonActive: false, + }, + }, + }, + { + desc: "Clicking the menu button shows the menu with No Simulation selected.", + setup: async ({ doc }) => { + await openSimulationMenu(doc); + }, + expected: { + simulation: { + buttonActive: false, + checkedOptionIndices: [0], + }, + }, + }, + { + desc: "Selecting an option renders the menu button active and closes the menu.", + setup: async ({ doc }) => { + await toggleSimulationOption(doc, 2); + }, + expected: { + simulation: { + buttonActive: true, + checkedOptionIndices: [2], + }, + }, + }, + { + desc: "Reopening the menu preserves the previously selected option.", + setup: async ({ doc }) => { + await openSimulationMenu(doc); + }, + expected: { + simulation: { + buttonActive: true, + checkedOptionIndices: [2], + }, + }, + }, + { + desc: "Unselecting the option renders the button inactive and closes the menu.", + setup: async ({ doc }) => { + await toggleSimulationOption(doc, 2); + }, + expected: { + simulation: { + buttonActive: false, + checkedOptionIndices: [0], + }, + }, + }, +]; + +/** + * Test that checks state of simulation button and menu when + * options are selected/unselected with web render enabled. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test selecting and unselecting simulation options updates UI." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js new file mode 100644 index 0000000000..ed872f46e0 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter.js @@ -0,0 +1,140 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check "Show tabbing order" works as expected + +const TEST_URI = `https://example.com/document-builder.sjs?html= + <button id=top-btn-1>Top level button before iframe</button> + <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(` + <button id=iframe-org-btn-1>in iframe button 1</button> + <button id=iframe-org-btn-2>in iframe button 2</button> + `)}"></iframe> + <button id=top-btn-2>Top level button after iframe</button> + <iframe src="https://example.net/document-builder.sjs?html=${encodeURIComponent(` + <button id=iframe-net-btn-1>in iframe button 1</button> + `)}"></iframe>`; + +add_task(async () => { + const { doc, store, tab, toolbox } = await addTestTab(TEST_URI); + + const topLevelFrameHighlighterTestFront = await toolbox.target.getFront( + "highlighterTest" + ); + + const frameTargets = toolbox.commands.targetCommand.getAllTargets([ + toolbox.commands.targetCommand.TYPES.FRAME, + ]); + const orgIframeTarget = frameTargets.find(t => + t.url.startsWith("https://example.org") + ); + const netIframeTarget = frameTargets.find(t => + t.url.startsWith("https://example.net") + ); + + // The iframe only has a dedicated target when Fission or EFT is enabled + const orgIframeHighlighterTestFront = orgIframeTarget + ? await orgIframeTarget.getFront("highlighterTest") + : null; + const netIframeHighlighterTestFront = netIframeTarget + ? await netIframeTarget.getFront("highlighterTest") + : null; + + let tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + tabbingOrderHighlighterData.length, + 0, + "Tabbing order is not visible at first" + ); + + info(`Click on "Show Tabbing Order" checkbox`); + const tabbingOrderCheckbox = doc.getElementById( + "devtools-display-tabbing-order-checkbox" + ); + tabbingOrderCheckbox.click(); + + await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true); + + is(tabbingOrderCheckbox.checked, true, "Checkbox is checked"); + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + if (isFissionEnabled()) { + // ⚠️ We don't get the highlighter for the <html> node of the iframe when Fission is enabled. + // This should be fix as part of Bug 1740509. + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([`button#top-btn-1 : 1`, `button#top-btn-2 : 4`]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + + const orgIframeTabingOrderHighlighterData = + await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + JSON.stringify(orgIframeTabingOrderHighlighterData), + JSON.stringify([ + `button#iframe-org-btn-1 : 2`, + `button#iframe-org-btn-2 : 3`, + ]), + "Tabbing order is visible for the org iframe after clicking the checkbox" + ); + + const netIframeTabingOrderHighlighterData = + await netIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + JSON.stringify(netIframeTabingOrderHighlighterData), + JSON.stringify([`button#iframe-net-btn-1 : 5`]), + "Tabbing order is visible for the net iframe after clicking the checkbox" + ); + } else { + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([ + `button#top-btn-1 : 1`, + `html : 2`, + `button#iframe-org-btn-1 : 3`, + `button#iframe-org-btn-2 : 4`, + `button#top-btn-2 : 5`, + `html : 6`, + `button#iframe-net-btn-1 : 7`, + ]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + } + + info(`Clicking on the checkbox again hides the highlighter`); + tabbingOrderCheckbox.click(); + await waitUntilState( + store, + state => state.ui.tabbingOrderDisplayed === false + ); + + is(tabbingOrderCheckbox.checked, false, "Checkbox is unchecked"); + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + tabbingOrderHighlighterData.length, + 0, + "Tabbing order is not visible anymore after unchecking the checkbox" + ); + + if (isFissionEnabled()) { + const orgIframeTabingOrderHighlighterData = + await orgIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + orgIframeTabingOrderHighlighterData.length, + 0, + "Tabbing order is also hidden on the org iframe target" + ); + const netIframeTabingOrderHighlighterData = + await netIframeHighlighterTestFront.getTabbingOrderHighlighterData(); + is( + netIframeTabingOrderHighlighterData.length, + 0, + "Tabbing order is also hidden on the net iframe target" + ); + } + + await closeTabToolboxAccessibility(tab); +}); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter_iframe_picker.js b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter_iframe_picker.js new file mode 100644 index 0000000000..788813d343 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tabbing_order_highlighter_iframe_picker.js @@ -0,0 +1,195 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check "Show tabbing order" works as expected when used with the iframe picker + +const TEST_URI = `https://example.com/document-builder.sjs?html= + <button id=top-btn-1>Top level button before iframe</button> + <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(` + <button id=iframe-btn-1>in iframe button 1</button> + <button id=iframe-btn-2>in iframe button 2</button> + `)}"></iframe> + <button id=top-btn-2>Top level button after iframe</button>`; + +add_task(async () => { + const env = await addTestTab(TEST_URI); + const { doc, panel, store, toolbox, win } = env; + + const topLevelFrameHighlighterTestFront = await toolbox.target.getFront( + "highlighterTest" + ); + + const iframeTarget = toolbox.commands.targetCommand + .getAllTargets([toolbox.commands.targetCommand.TYPES.FRAME]) + .find(t => t.url.startsWith("https://example.org")); + + // The iframe only has a dedicated target when Fission or EFT is enabled + const iframeHighlighterTestFront = iframeTarget + ? await iframeTarget.getFront("highlighterTest") + : null; + + const topLevelAccessibilityFrontActorID = + panel.accessibilityProxy.accessibilityFront.actorID; + + const iframeAccessibilityFrontActorID = iframeTarget + ? (await iframeTarget.getFront("accessibility")).actorID + : null; + + info(`Click on "Show Tabbing Order" checkbox`); + const tabbingOrderCheckbox = doc.getElementById( + "devtools-display-tabbing-order-checkbox" + ); + tabbingOrderCheckbox.click(); + await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true); + + is(tabbingOrderCheckbox.checked, true, "Checkbox is checked"); + let tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData( + topLevelAccessibilityFrontActorID + ); + if (isFissionEnabled()) { + // ⚠️ We don't get the highlighter for the <html> node of the iframe when Fission is enabled. + // This should be fix as part of Bug 1740509. + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([`button#top-btn-1 : 1`, `button#top-btn-2 : 4`]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + + const iframeTabingOrderHighlighterData = + await iframeHighlighterTestFront.getTabbingOrderHighlighterData( + iframeAccessibilityFrontActorID + ); + + is( + JSON.stringify(iframeTabingOrderHighlighterData), + JSON.stringify([`button#iframe-btn-1 : 2`, `button#iframe-btn-2 : 3`]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + } else { + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([ + `button#top-btn-1 : 1`, + `html : 2`, + `button#iframe-btn-1 : 3`, + `button#iframe-btn-2 : 4`, + `button#top-btn-2 : 5`, + ]), + "Tabbing order is visible for the top level target after clicking the checkbox" + ); + } + + info("Select the iframe in the iframe picker"); + // Get the iframe picker items + const menuList = toolbox.doc.getElementById("toolbox-frame-menu"); + + if (isFissionEnabled() && !isEveryFrameTargetEnabled()) { + is( + menuList, + null, + "iframe picker does not show remote frames when Fission is enabled and EFT is disabled" + ); + return; + } + + const frames = Array.from(menuList.querySelectorAll(".command")); + + let onInitialized = win.once(win.EVENTS.INITIALIZED); + frames[1].click(); + await onInitialized; + await waitUntilState( + store, + state => state.ui.tabbingOrderDisplayed === false + ); + + is( + tabbingOrderCheckbox.checked, + false, + "Checkbox is unchecked after selecting an iframe" + ); + + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData( + topLevelAccessibilityFrontActorID + ); + is( + tabbingOrderHighlighterData.length, + 0, + "Tabbing order is not visible anymore" + ); + + info( + `Click on "Show Tabbing Order" checkbox and check that highlighter is only displayed for selected frame` + ); + tabbingOrderCheckbox.click(); + await waitUntilState(store, state => state.ui.tabbingOrderDisplayed === true); + + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData( + topLevelAccessibilityFrontActorID + ); + if (isFissionEnabled() || isEveryFrameTargetEnabled()) { + is( + tabbingOrderHighlighterData.length, + 0, + "There's no highlighter displayed on the top level target when focused on specific iframe" + ); + + const iframeTabingOrderHighlighterData = + await iframeHighlighterTestFront.getTabbingOrderHighlighterData( + iframeAccessibilityFrontActorID + ); + + is( + JSON.stringify(iframeTabingOrderHighlighterData), + JSON.stringify([`button#iframe-btn-1 : 1`, `button#iframe-btn-2 : 2`]), + "Tabbing order has expected data when a specific iframe is selected" + ); + } else { + // When Fission/EFT are not enabled, the highlighter is displayed from the top-level + // target, but only for the iframe + is( + JSON.stringify(tabbingOrderHighlighterData), + JSON.stringify([`button#iframe-btn-1 : 1`, `button#iframe-btn-2 : 2`]), + "Tabbing order has expected data when a specific iframe is selected" + ); + } + + info("Select the top level document back"); + onInitialized = win.once(win.EVENTS.INITIALIZED); + toolbox.doc.querySelector("#toolbox-frame-menu .command").click(); + await onInitialized; + + is( + tabbingOrderCheckbox.checked, + false, + "Checkbox is unchecked after selecting the top level frame" + ); + await waitUntilState( + store, + state => state.ui.tabbingOrderDisplayed === false + ); + + tabbingOrderHighlighterData = + await topLevelFrameHighlighterTestFront.getTabbingOrderHighlighterData( + topLevelAccessibilityFrontActorID + ); + + if (isFissionEnabled() || isEveryFrameTargetEnabled()) { + const iframeTabingOrderHighlighterData = + await iframeHighlighterTestFront.getTabbingOrderHighlighterData( + iframeAccessibilityFrontActorID + ); + + is( + iframeTabingOrderHighlighterData.length, + 0, + "Highlighter is hidden on the frame after selecting back the top level target" + ); + } + + await closeTabToolboxAccessibility(env.tab); +}); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree.js new file mode 100644 index 0000000000..d1be57ee2d --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree.js @@ -0,0 +1,75 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1>Top level header</h1> + <p>This is a paragraph.</p> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility tree state.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + }, + }, + { + desc: "Expand first tree node.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + }, + }, + { + desc: "Collapse first tree node.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree. + */ +addA11yPanelTestsTask(tests, TEST_URI, "Test Accessibility panel tree."); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js new file mode 100644 index 0000000000..b321fafba2 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit.js @@ -0,0 +1,137 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleRow, toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + <h2 style="color:rgba(0,255,0,0.1); background-color:rgba(255,255,255,1);"> + Second level header + </h2> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Expand first and second tree nodes.", + setup: async ({ doc }) => { + await toggleRow(doc, 0); + await toggleRow(doc, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + level: 1, + }, + { + role: "heading", + name: `"Top level header"`, + level: 2, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 3, + }, + { + role: "heading", + name: `"Second level header"`, + level: 2, + }, + ], + }, + }, + { + desc: "Click on the all filter.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 1, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + selected: true, + level: 1, + }, + ], + }, + }, + { + desc: "Click on the all filter again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + level: 1, + }, + { + role: "heading", + name: `"Top level header"`, + level: 2, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + level: 3, + }, + { + role: "heading", + name: `"Second level header"`, + level: 2, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + selected: true, + level: 3, + }, + ], + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree when one of + * the tree rows has a "contrast" badge and auditing is activated via toolbar + * filter. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree with contrast badge present." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_long.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_long.js new file mode 100644 index 0000000000..a8e295c504 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_long.js @@ -0,0 +1,104 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const header = + '<h1 style="color:rgba(255,0,0,0.1); ' + + 'background-color:rgba(255,255,255,1);">header</h1>'; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + ${header.repeat(20)} + </body> +</html>`; + +const docRow = { + role: "document", + name: `"Accessibility Panel Test"`, +}; +const headingRow = { + role: "heading", + name: `"header"`, +}; +const textLeafRow = { + role: "text leaf", + name: `"header"contrast`, + badges: ["contrast"], +}; +const audit = new Array(20).fill(textLeafRow); + +const auditInitial = audit.map(check => ({ ...check })); +auditInitial[0].selected = true; + +const auditSecondLastSelected = audit.map(check => ({ ...check })); +auditSecondLastSelected[19].selected = true; + +const resetAfterAudit = [docRow]; +for (let i = 0; i < 20; i++) { + resetAfterAudit.push(headingRow); + resetAfterAudit.push({ ...textLeafRow, selected: i === 19 }); +} + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Check initial state.", + expected: { + tree: [{ ...docRow, selected: true }], + }, + }, + { + desc: "Run an audit from a11y panel toolbar by activating a filter.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: auditInitial, + }, + }, + { + desc: "Select a row that is guaranteed to have to be scrolled into view.", + setup: async ({ doc }) => { + selectRow(doc, 0); + EventUtils.synthesizeKey("VK_END", {}, doc.defaultView); + }, + expected: { + tree: auditSecondLastSelected, + }, + }, + { + desc: "Click on the filter again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: resetAfterAudit, + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree when the + * audit is activated via the panel's toolbar and the selection persists when + * the filter is toggled off. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree with persistent selected row." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_reset.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_reset.js new file mode 100644 index 0000000000..084a46dc89 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_reset.js @@ -0,0 +1,109 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, selectAccessibleForNode, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + <h2 style="color:rgba(0,255,0,0.1); background-color:rgba(255,255,255,1);"> + Second level header + </h2> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Check initial state.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + selected: true, + }, + ], + }, + }, + { + desc: "Run an audit from a11y panel toolbar by activating a filter.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + selected: true, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + }, + ], + }, + }, + { + desc: "Select an accessible object.", + setup: async env => { + await selectAccessibleForNode(env, "h1"); + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + selected: true, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + }, + { + role: "heading", + name: `"Second level header"`, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + }, + ], + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree when the + * audit is activated via the panel's toolbar. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree with contrast filter audit activation." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js new file mode 100644 index 0000000000..9a1b9ba4c7 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_audit_toolbar.js @@ -0,0 +1,112 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* global toggleMenuItem, TREE_FILTERS_MENU_ID */ + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + <h2 style="color:rgba(0,255,0,0.1); background-color:rgba(255,255,255,1);"> + Second level header + </h2> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Check initial state.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + selected: true, + }, + ], + activeToolbarFilters: [true, false, false, false, false], + }, + }, + { + desc: "Run an audit (all) from a11y panel toolbar by activating a filter.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + selected: true, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + }, + ], + activeToolbarFilters: [false, true, true, true, true], + }, + }, + { + desc: "Click on the filter again.", + setup: async ({ doc, toolbox }) => { + await toggleMenuItem(doc, toolbox.doc, TREE_FILTERS_MENU_ID, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + selected: true, + }, + { + role: "heading", + name: `"Second level header"`, + }, + { + role: "text leaf", + name: `"Second level header "contrast`, + badges: ["contrast"], + }, + ], + activeToolbarFilters: [true, false, false, false, false], + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree when the + * audit is activated via the panel's toolbar. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree with 'all' filter audit activation." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_contrast.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_contrast.js new file mode 100644 index 0000000000..2abfabd324 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_contrast.js @@ -0,0 +1,62 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1 style="color:rgba(255,0,0,0.1); background-color:rgba(255,255,255,1);"> + Top level header + </h1> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Expand first and second tree nodes.", + setup: async ({ doc }) => { + await toggleRow(doc, 0); + await toggleRow(doc, 1); + }, + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "text leaf", + name: `"Top level header "contrast`, + badges: ["contrast"], + }, + ], + }, + }, +]; + +/** + * Simple test that checks content of the Accessibility panel tree when one of + * the tree rows has a "contrast" badge. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree with contrast badge." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_iframe_picker.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_iframe_picker.js new file mode 100644 index 0000000000..dc146a32d5 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_iframe_picker.js @@ -0,0 +1,121 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check that the accessibility panel works as expected when using the iframe picker + +const TEST_URI = `data:text/html,<meta charset=utf8> + <head> + <title>TopLevel</title> + <style>h1 { color: lightgrey; }</style> + </head> + <body> + <h1>Top level header</h1> + <p>This is a paragraph.</p> + <iframe src="data:text/html,<meta charset=utf8> + <head> + <title>iframe</title> + <style>h2 { color: aliceblue }</style> + </head> + <body> + <h2>Iframe header</h2> + + <iframe src='data:text/html,<meta charset=utf8> + <head> + <title>nested iframe</title> + <style>h2 { color: lightpink }</style> + </head> + <body> + <h2>Nested Iframe header</h2> + </body> + '></iframe> + + </body> + "></iframe>`; + +add_task(async () => { + const env = await addTestTab(TEST_URI); + const { doc, toolbox, win } = env; + + await checkTree(env, [ + { + role: "document", + name: `"TopLevel"`, + }, + ]); + + info("Select the iframe in the iframe picker"); + // Get the iframe picker items + const menuList = toolbox.doc.getElementById("toolbox-frame-menu"); + const frames = Array.from(menuList.querySelectorAll(".command")); + + let onInitialized = win.once(win.EVENTS.INITIALIZED); + frames[1].click(); + await onInitialized; + + await checkTree(env, [ + { + role: "document", + name: `"iframe"`, + }, + ]); + + info( + "Run a constrast audit to check only issues from selected iframe tree are displayed" + ); + const CONTRAST_MENU_ITEM_INDEX = 2; + const onUpdated = win.once(win.EVENTS.ACCESSIBILITY_INSPECTOR_UPDATED); + await toggleMenuItem( + doc, + toolbox.doc, + TREE_FILTERS_MENU_ID, + CONTRAST_MENU_ITEM_INDEX + ); + await onUpdated; + // wait until the tree is filtered (i.e. the audit is done and only nodes with issues + // should be displayed) + await waitFor(() => doc.querySelector(".treeTable.filtered")); + + await checkTree(env, [ + { + role: "text leaf", + name: `"Iframe header"contrast`, + badges: ["contrast"], + level: 1, + }, + { + role: "text leaf", + name: `"Nested Iframe header"contrast`, + badges: ["contrast"], + level: 1, + }, + ]); + + info("Select the top level document back"); + onInitialized = win.once(win.EVENTS.INITIALIZED); + frames[0].click(); + await onInitialized; + + await checkTree(env, [ + { + role: "document", + name: `"TopLevel"`, + }, + ]); + + await closeTabToolboxAccessibility(env.tab); +}); + +function checkTree(env, tree) { + return runA11yPanelTests( + [ + { + expected: { + tree, + }, + }, + ], + env + ); +} diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation.js new file mode 100644 index 0000000000..d98c3d8e35 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation.js @@ -0,0 +1,186 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test</title> + </head> + <body> + <h1>Top level header</h1> + <p>This is a paragraph.</p> + </body> +</html>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility tree and sidebar states.", + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + sidebar: { + name: "Accessibility Panel Test", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 2, + indexInParent: 0, + states: [ + // The focused state is an outdated state, since the toolbox should now + // have the focus and not the content page. See Bug 1702709. + "focused", + "readonly", + "focusable", + "opaque", + "enabled", + "sensitive", + ], + }, + }, + }, + { + desc: "Expand first tree node.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + }, + }, + { + desc: "Expand second tree node.", + setup: async ({ doc }) => toggleRow(doc, 1), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "text leaf", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + sidebar: { + name: "Top level header", + role: "heading", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 1, + indexInParent: 0, + states: ["selectable text", "opaque", "enabled", "sensitive"], + }, + }, + }, + { + desc: "Select third tree node.", + setup: ({ doc }) => selectRow(doc, 2), + expected: { + sidebar: { + name: "Top level header", + role: "text leaf", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 0, + indexInParent: 0, + states: ["opaque", "enabled", "sensitive"], + }, + }, + }, + { + desc: "Collapse first tree node.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + ], + sidebar: { + name: "Accessibility Panel Test", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 2, + indexInParent: 0, + states: ["readonly", "focusable", "opaque", "enabled", "sensitive"], + }, + }, + }, + { + desc: "Expand first tree node again.", + setup: async ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `"Accessibility Panel Test"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "text leaf", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + }, + }, +]; + +/** + * Check navigation within the tree. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree navigation." +); diff --git a/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation_oop.js b/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation_oop.js new file mode 100644 index 0000000000..dc710c82e4 --- /dev/null +++ b/devtools/client/accessibility/test/browser/browser_accessibility_tree_navigation_oop.js @@ -0,0 +1,149 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = `<h1>Top level header</h1><p>This is a paragraph.</p>`; + +/** + * Test data has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be performed before + * the state of the tree and the sidebar can be checked. + * expected {JSON} An expected states for the tree and the sidebar. + * } + */ +const tests = [ + { + desc: "Test the initial accessibility tree and sidebar states.", + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + ], + sidebar: { + name: "", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 1, + indexInParent: 0, + states: [ + // The focused state is an outdated state, since the toolbox should now + // have the focus and not the content page. See Bug 1702709. + "focused", + "readonly", + "focusable", + "opaque", + "enabled", + "sensitive", + ], + }, + }, + }, + { + desc: "Expand first tree node.", + setup: ({ doc }) => toggleRow(doc, 0), + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + { + role: "internal frame", + name: `"Accessibility Panel Test (OOP)"`, + }, + ], + }, + }, + { + desc: "Expand second tree node. Display OOP document.", + setup: ({ doc }) => toggleRow(doc, 1), + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + { + role: "internal frame", + name: `"Accessibility Panel Test (OOP)"`, + }, + { + role: "document", + name: `"Accessibility Panel Test (OOP)"`, + }, + ], + sidebar: { + name: "Accessibility Panel Test (OOP)", + role: "internal frame", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 1, + indexInParent: 0, + states: ["focusable", "opaque", "enabled", "sensitive"], + }, + }, + }, + { + desc: "Expand third tree node. Display OOP frame content.", + setup: ({ doc }) => toggleRow(doc, 2), + expected: { + tree: [ + { + role: "document", + name: `""text label`, + badges: ["text label"], + }, + { + role: "internal frame", + name: `"Accessibility Panel Test (OOP)"`, + }, + { + role: "document", + name: `"Accessibility Panel Test (OOP)"`, + }, + { + role: "heading", + name: `"Top level header"`, + }, + { + role: "paragraph", + name: `""`, + }, + ], + sidebar: { + name: "Accessibility Panel Test (OOP)", + role: "document", + actions: [], + value: "", + description: "", + keyboardShortcut: "", + childCount: 2, + indexInParent: 0, + states: ["readonly", "focusable", "opaque", "enabled", "sensitive"], + }, + }, + }, +]; + +/** + * Check navigation within the tree. + */ +addA11yPanelTestsTask( + tests, + TEST_URI, + "Test Accessibility panel tree navigation with OOP frame.", + { remoteIframe: true } +); diff --git a/devtools/client/accessibility/test/browser/head.js b/devtools/client/accessibility/test/browser/head.js new file mode 100644 index 0000000000..3a734f6c70 --- /dev/null +++ b/devtools/client/accessibility/test/browser/head.js @@ -0,0 +1,819 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +/* global waitUntilState, gBrowser */ +/* exported addTestTab, checkTreeState, checkSidebarState, checkAuditState, selectRow, + toggleRow, toggleMenuItem, addA11yPanelTestsTask, navigate, + openSimulationMenu, toggleSimulationOption, TREE_FILTERS_MENU_ID, + PREFS_MENU_ID */ + +"use strict"; + +// Import framework's shared head. +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js", + this +); + +// Import inspector's shared head. +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js", + this +); + +const { + ORDERED_PROPS, + PREF_KEYS, +} = require("resource://devtools/client/accessibility/constants.js"); + +// Enable the Accessibility panel +Services.prefs.setBoolPref("devtools.accessibility.enabled", true); + +const SIMULATION_MENU_BUTTON_ID = "#simulation-menu-button"; +const TREE_FILTERS_MENU_ID = "accessibility-tree-filters-menu"; +const PREFS_MENU_ID = "accessibility-tree-filters-prefs-menu"; + +const MENU_INDEXES = { + [TREE_FILTERS_MENU_ID]: 0, + [PREFS_MENU_ID]: 1, +}; + +/** + * Wait for accessibility service to shut down. We consider it shut down when + * an "a11y-init-or-shutdown" event is received with a value of "0". + */ +function waitForAccessibilityShutdown() { + return new Promise(resolve => { + if (!Services.appinfo.accessibilityEnabled) { + resolve(); + return; + } + + const observe = (subject, topic, data) => { + if (data === "0") { + Services.obs.removeObserver(observe, "a11y-init-or-shutdown"); + // Sanity check + ok( + !Services.appinfo.accessibilityEnabled, + "Accessibility disabled in this process" + ); + resolve(); + } + }; + // This event is coming from Gecko accessibility module when the + // accessibility service is shutdown or initialzied. We attempt to shutdown + // accessibility service naturally if there are no more XPCOM references to + // a11y related objects (after GC/CC). + Services.obs.addObserver(observe, "a11y-init-or-shutdown"); + + // Force garbage collection. + SpecialPowers.gc(); + SpecialPowers.forceShrinkingGC(); + SpecialPowers.forceCC(); + }); +} + +/** + * Ensure that accessibility is completely shutdown. + */ +async function shutdownAccessibility(browser) { + await waitForAccessibilityShutdown(); + await SpecialPowers.spawn(browser, [], waitForAccessibilityShutdown); +} + +registerCleanupFunction(async () => { + info("Cleaning up..."); + Services.prefs.clearUserPref("devtools.accessibility.enabled"); +}); + +const EXPANDABLE_PROPS = ["actions", "states", "attributes"]; + +/** + * Add a new test tab in the browser and load the given url. + * @param {String} url + * The url to be loaded in the new tab + * @return a promise that resolves to the tab object when + * the url is loaded + */ +async function addTestTab(url) { + info("Adding a new test tab with URL: '" + url + "'"); + + const tab = await addTab(url); + const panel = await initAccessibilityPanel(tab); + const win = panel.panelWin; + const doc = win.document; + const store = win.view.store; + + win.focus(); + + await waitUntilState( + store, + state => + state.accessibles.size === 1 && + state.details.accessible && + state.details.accessible.role === "document" + ); + + return { + tab, + browser: tab.linkedBrowser, + panel, + win, + toolbox: panel._toolbox, + doc, + store, + }; +} + +/** + * Open the Accessibility panel for the given tab. + * + * @param {Element} tab + * Optional tab element for which you want open the Accessibility panel. + * The default tab is taken from the global variable |tab|. + * @return a promise that is resolved once the panel is open. + */ +async function initAccessibilityPanel(tab = gBrowser.selectedTab) { + const toolbox = await gDevTools.showToolboxForTab(tab, { + toolId: "accessibility", + }); + return toolbox.getCurrentPanel(); +} + +/** + * Compare text within the list of potential badges rendered for accessibility + * tree row when its accessible object has accessibility failures. + * @param {DOMNode} badges + * Container element that contains badge elements. + * @param {Array|null} expected + * List of expected badge labels for failing accessibility checks. + */ +function compareBadges(badges, expected = []) { + const badgeEls = badges ? [...badges.querySelectorAll(".badge")] : []; + return ( + badgeEls.length === expected.length && + badgeEls.every((badge, i) => badge.textContent === expected[i]) + ); +} + +/** + * Find an ancestor that is scrolled for a given DOMNode. + * + * @param {DOMNode} node + * DOMNode that to find an ancestor for that is scrolled. + */ +function closestScrolledParent(node) { + if (node == null) { + return null; + } + + if (node.scrollHeight > node.clientHeight) { + return node; + } + + return closestScrolledParent(node.parentNode); +} + +/** + * Check if a given element is visible to the user and is not scrolled off + * because of the overflow. + * + * @param {Element} element + * Element to be checked whether it is visible and is not scrolled off. + * + * @returns {Boolean} + * True if the element is visible. + */ +function isVisible(element) { + const { top, bottom } = element.getBoundingClientRect(); + const scrolledParent = closestScrolledParent(element.parentNode); + const scrolledParentRect = scrolledParent + ? scrolledParent.getBoundingClientRect() + : null; + return ( + !scrolledParent || + (top >= scrolledParentRect.top && bottom <= scrolledParentRect.bottom) + ); +} + +/** + * Check selected styling and visibility for a given row in the accessibility + * tree. + * @param {DOMNode} row + * DOMNode for a given accessibility row. + * @param {Boolean} expected + * Expected selected state. + * + * @returns {Boolean} + * True if visibility and styling matches expected selected state. + */ +function checkSelected(row, expected) { + if (!expected) { + return true; + } + + if (row.classList.contains("selected") !== expected) { + return false; + } + + return isVisible(row); +} + +/** + * Check level for a given row in the accessibility tree. + * @param {DOMNode} row + * DOMNode for a given accessibility row. + * @param {Boolean} expected + * Expected row level (aria-level). + * + * @returns {Boolean} + * True if the aria-level for the row is as expected. + */ +function checkLevel(row, expected) { + if (!expected) { + return true; + } + + return parseInt(row.getAttribute("aria-level"), 10) === expected; +} + +/** + * Check the state of the accessibility tree. + * @param {document} doc panel documnent. + * @param {Array} expected an array that represents an expected row list. + */ +async function checkTreeState(doc, expected) { + info("Checking tree state."); + const hasExpectedStructure = await BrowserTestUtils.waitForCondition(() => { + const rows = [...doc.querySelectorAll(".treeRow")]; + if (rows.length !== expected.length) { + return false; + } + + return rows.every((row, i) => { + const { role, name, badges, selected, level } = expected[i]; + return ( + row.querySelector(".treeLabelCell").textContent === role && + row.querySelector(".treeValueCell").textContent === name && + compareBadges(row.querySelector(".badges"), badges) && + checkSelected(row, selected) && + checkLevel(row, level) + ); + }); + }, "Wait for the right tree update."); + + ok(hasExpectedStructure, "Tree structure is correct."); +} + +/** + * Check if relations object matches what is expected. Note: targets are matched by their + * name and role. + * @param {Object} relations Relations to test. + * @param {Object} expected Expected relations. + * @return {Boolean} True if relation types and their targers match what is + * expected. + */ +function relationsMatch(relations, expected) { + for (const relationType in expected) { + let expTargets = expected[relationType]; + expTargets = Array.isArray(expTargets) ? expTargets : [expTargets]; + + let targets = relations ? relations[relationType] : []; + targets = Array.isArray(targets) ? targets : [targets]; + + for (const index in expTargets) { + if (!targets[index]) { + return false; + } + if ( + expTargets[index].name !== targets[index].name || + expTargets[index].role !== targets[index].role + ) { + return false; + } + } + } + + return true; +} + +/** + * When comparing numerical values (for example contrast), we only care about the 2 + * decimal points. + * @param {String} _ + * Key of the property that is parsed. + * @param {Any} value + * Value of the property that is parsed. + * @return {Any} + * Newly formatted value in case of the numeric value. + */ +function parseNumReplacer(_, value) { + if (typeof value === "number") { + return value.toFixed(2); + } + + return value; +} + +/** + * Check the state of the accessibility sidebar audit(checks). + * @param {Object} store React store for the panel (includes store for + * the audit). + * @param {Object} expectedState Expected state of the sidebar audit(checks). + */ +async function checkAuditState(store, expectedState) { + info("Checking audit state."); + await waitUntilState(store, ({ details }) => { + const { audit } = details; + + for (const key in expectedState) { + const expected = expectedState[key]; + if (expected && typeof expected === "object") { + if ( + JSON.stringify(audit[key], parseNumReplacer) !== + JSON.stringify(expected, parseNumReplacer) + ) { + return false; + } + } else if (audit && audit[key] !== expected) { + return false; + } + } + + ok(true, "Audit state is correct."); + return true; + }); +} + +/** + * Check the state of the accessibility sidebar. + * @param {Object} store React store for the panel (includes store for + * the sidebar). + * @param {Object} expectedState Expected state of the sidebar. + */ +async function checkSidebarState(store, expectedState) { + info("Checking sidebar state."); + await waitUntilState(store, ({ details }) => { + for (const key of ORDERED_PROPS) { + const expected = expectedState[key]; + if (expected === undefined) { + continue; + } + + if (key === "relations") { + if (!relationsMatch(details.relations, expected)) { + return false; + } + } else if (EXPANDABLE_PROPS.includes(key)) { + if ( + JSON.stringify(details.accessible[key]) !== JSON.stringify(expected) + ) { + return false; + } + } else if (details.accessible && details.accessible[key] !== expected) { + return false; + } + } + + ok(true, "Sidebar state is correct."); + return true; + }); +} + +/** + * Check the state of the accessibility related prefs. + * @param {Document} doc + * accessibility inspector panel document. + * @param {Object} toolbarPrefValues + * Expected state of the panel prefs as well as the redux state that + * keeps track of it. Includes: + * - SCROLL_INTO_VIEW (devtools.accessibility.scroll-into-view) + * @param {Object} store + * React store for the panel (includes store for the sidebar). + */ +async function checkToolbarPrefsState(doc, toolbarPrefValues, store) { + info("Checking toolbar prefs state."); + const [hasExpectedStructure] = await Promise.all([ + // Check that appropriate preferences are set as expected. + BrowserTestUtils.waitForCondition(() => { + return Object.keys(toolbarPrefValues).every( + name => + Services.prefs.getBoolPref(PREF_KEYS[name], false) === + toolbarPrefValues[name] + ); + }, "Wait for the right prefs state."), + // Check that ui state is set as expected. + waitUntilState(store, ({ ui }) => { + for (const name in toolbarPrefValues) { + if (ui[name] !== toolbarPrefValues[name]) { + return false; + } + } + + ok(true, "UI pref state is correct."); + return true; + }), + ]); + ok(hasExpectedStructure, "Prefs state is correct."); +} + +/** + * Check the state of the accessibility checks toolbar. + * @param {Object} store + * React store for the panel (includes store for the sidebar). + * @param {Object} activeToolbarFilters + * Expected active state of the filters in the toolbar. + */ +async function checkToolbarState(doc, activeToolbarFilters) { + info("Checking toolbar state."); + const hasExpectedStructure = await BrowserTestUtils.waitForCondition( + () => + [ + ...doc.querySelectorAll("#accessibility-tree-filters-menu .command"), + ].every( + (filter, i) => + (activeToolbarFilters[i] ? "true" : null) === + filter.getAttribute("aria-checked") + ), + "Wait for the right toolbar state." + ); + + ok(hasExpectedStructure, "Toolbar state is correct."); +} + +/** + * Check the state of the simulation button and menu components. + * @param {Object} doc Panel document. + * @param {Object} expected Expected states of the simulation components: + * menuVisible, buttonActive, checkedOptionIndices (Optional) + */ +async function checkSimulationState(doc, expected) { + const { buttonActive, checkedOptionIndices } = expected; + const simulationMenuOptions = doc + .querySelector(SIMULATION_MENU_BUTTON_ID + "-menu") + .querySelectorAll(".menuitem"); + + // Check simulation menu button state + is( + doc.querySelector(SIMULATION_MENU_BUTTON_ID).className, + `devtools-button toolbar-menu-button simulation${ + buttonActive ? " active" : "" + }`, + `Simulation menu button contains ${buttonActive ? "active" : "base"} class.` + ); + + // Check simulation menu options states, if specified + if (checkedOptionIndices) { + simulationMenuOptions.forEach((menuListItem, index) => { + const isChecked = checkedOptionIndices.includes(index); + const button = menuListItem.firstChild; + + is( + button.getAttribute("aria-checked"), + isChecked ? "true" : null, + `Simulation option ${index} is ${isChecked ? "" : "not "}selected.` + ); + }); + } +} + +/** + * Focus accessibility properties tree in the a11y inspector sidebar. If focused for the + * first time, the tree will select first rendered node as defult selection for keyboard + * purposes. + * + * @param {Document} doc accessibility inspector panel document. + */ +async function focusAccessibleProperties(doc) { + const tree = doc.querySelector(".tree"); + if (doc.activeElement !== tree) { + tree.focus(); + await BrowserTestUtils.waitForCondition( + () => tree.querySelector(".node.focused"), + "Tree selected." + ); + } +} + +/** + * Select accessibility property in the sidebar. + * @param {Document} doc accessibility inspector panel document. + * @param {String} id id of the property to be selected. + * @return {DOMNode} Node that corresponds to the selected accessibility property. + */ +async function selectProperty(doc, id) { + const win = doc.defaultView; + let selected = false; + let node; + + await focusAccessibleProperties(doc); + await BrowserTestUtils.waitForCondition(() => { + node = doc.getElementById(`${id}`); + if (node) { + if (selected) { + return node.firstChild.classList.contains("focused"); + } + + AccessibilityUtils.setEnv({ + // Keyboard navigation is handled on the container level using arrow + // keys. + nonNegativeTabIndexRule: false, + }); + EventUtils.sendMouseEvent({ type: "click" }, node, win); + AccessibilityUtils.resetEnv(); + selected = true; + } else { + const tree = doc.querySelector(".tree"); + tree.scrollTop = parseFloat(win.getComputedStyle(tree).height); + } + + return false; + }); + + return node; +} + +/** + * Select tree row. + * @param {document} doc panel documnent. + * @param {Number} rowNumber number of the row/tree node to be selected. + */ +function selectRow(doc, rowNumber) { + info(`Selecting row ${rowNumber}.`); + AccessibilityUtils.setEnv({ + // Keyboard navigation is handled on the container level using arrow keys. + nonNegativeTabIndexRule: false, + }); + EventUtils.sendMouseEvent( + { type: "click" }, + doc.querySelectorAll(".treeRow")[rowNumber], + doc.defaultView + ); + AccessibilityUtils.resetEnv(); +} + +/** + * Toggle an expandable tree row. + * @param {document} doc panel documnent. + * @param {Number} rowNumber number of the row/tree node to be toggled. + */ +async function toggleRow(doc, rowNumber) { + const win = doc.defaultView; + const row = doc.querySelectorAll(".treeRow")[rowNumber]; + const twisty = row.querySelector(".theme-twisty"); + const expected = !twisty.classList.contains("open"); + + info(`${expected ? "Expanding" : "Collapsing"} row ${rowNumber}.`); + + AccessibilityUtils.setEnv({ + // We intentionally remove the twisty from the accessibility tree in the + // TreeView component and handle keyboard navigation using the arrow keys. + mustHaveAccessibleRule: false, + }); + EventUtils.sendMouseEvent({ type: "click" }, twisty, win); + AccessibilityUtils.resetEnv(); + await BrowserTestUtils.waitForCondition( + () => + !twisty.classList.contains("devtools-throbber") && + expected === twisty.classList.contains("open"), + "Twisty updated." + ); +} + +/** + * Toggle a specific menu item based on its index in the menu. + * @param {document} toolboxDoc + * toolbox document. + * @param {document} doc + * panel document. + * @param {String} menuId + * The id of the menu (menuId passed to the MenuButton component) + * @param {Number} menuItemIndex + * index of the menu item to be toggled. + */ +async function toggleMenuItem(doc, toolboxDoc, menuId, menuItemIndex) { + const toolboxWin = toolboxDoc.defaultView; + const panelWin = doc.defaultView; + + const menuButton = doc.querySelectorAll(".toolbar-menu-button")[ + MENU_INDEXES[menuId] + ]; + ok(menuButton, "Expected menu button"); + + const menuEl = toolboxDoc.getElementById(menuId); + const menuItem = menuEl.querySelectorAll(".command")[menuItemIndex]; + ok(menuItem, "Expected menu item"); + + const expected = + menuItem.getAttribute("aria-checked") === "true" ? null : "true"; + + // Make the menu visible first. + const onPopupShown = new Promise(r => + toolboxDoc.addEventListener("popupshown", r, { once: true }) + ); + EventUtils.synthesizeMouseAtCenter(menuButton, {}, panelWin); + await onPopupShown; + const boundingRect = menuItem.getBoundingClientRect(); + ok( + boundingRect.width > 0 && boundingRect.height > 0, + "Menu item is visible." + ); + + EventUtils.synthesizeMouseAtCenter(menuItem, {}, toolboxWin); + await BrowserTestUtils.waitForCondition( + () => expected === menuItem.getAttribute("aria-checked"), + "Menu item updated." + ); +} + +async function openSimulationMenu(doc) { + doc.querySelector(SIMULATION_MENU_BUTTON_ID).click(); + + await BrowserTestUtils.waitForCondition(() => + doc + .querySelector(SIMULATION_MENU_BUTTON_ID + "-menu") + .classList.contains("tooltip-visible") + ); +} + +async function toggleSimulationOption(doc, optionIndex) { + const simulationMenu = doc.querySelector(SIMULATION_MENU_BUTTON_ID + "-menu"); + simulationMenu.querySelectorAll(".menuitem")[optionIndex].firstChild.click(); + + await BrowserTestUtils.waitForCondition( + () => !simulationMenu.classList.contains("tooltip-visible") + ); +} + +async function findAccessibleFor( + { + toolbox: { target }, + panel: { + accessibilityProxy: { + accessibilityFront: { accessibleWalkerFront }, + }, + }, + }, + selector +) { + const domWalker = (await target.getFront("inspector")).walker; + const node = await domWalker.querySelector(domWalker.rootNode, selector); + return accessibleWalkerFront.getAccessibleFor(node); +} + +async function selectAccessibleForNode(env, selector) { + const { panel, win } = env; + const front = await findAccessibleFor(env, selector); + const { EVENTS } = win; + const onSelected = win.once(EVENTS.NEW_ACCESSIBLE_FRONT_SELECTED); + panel.selectAccessible(front); + await onSelected; +} + +/** + * Iterate over setups/tests structure and test the state of the + * accessibility panel. + * @param {JSON} tests + * test data that has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be + * performed before the state of the + * tree and the sidebar can be checked + * expected {JSON} An expected states for parts of + * accessibility panel: + * - tree: state of the accessibility tree widget + * - sidebar: state of the accessibility panel sidebar + * - audit: state of the audit redux state of the + * panel + * - toolbarPrefValues: state of the accessibility panel + * toolbar prefs and corresponding user + * preferences. + * - activeToolbarFilters: state of the accessibility panel + * toolbar filters. + * } + * @param {Object} env + * contains all relevant environment objects (same structure as the + * return value of 'addTestTab' funciton) + */ +async function runA11yPanelTests(tests, env) { + for (const { desc, setup, expected } of tests) { + info(desc); + + if (setup) { + await setup(env); + } + + const { + tree, + sidebar, + audit, + toolbarPrefValues, + activeToolbarFilters, + simulation, + } = expected; + if (tree) { + await checkTreeState(env.doc, tree); + } + + if (sidebar) { + await checkSidebarState(env.store, sidebar); + } + + if (activeToolbarFilters) { + await checkToolbarState(env.doc, activeToolbarFilters); + } + + if (toolbarPrefValues) { + await checkToolbarPrefsState(env.doc, toolbarPrefValues, env.store); + } + + if (typeof audit !== "undefined") { + await checkAuditState(env.store, audit); + } + + if (simulation) { + await checkSimulationState(env.doc, simulation); + } + } +} + +/** + * Build a valid URL from an HTML snippet. + * @param {String} uri HTML snippet + * @param {Object} options options for the test + * @return {String} built URL + */ +function buildURL(uri, options = {}) { + if (options.remoteIframe) { + const srcURL = new URL(`http://example.net/document-builder.sjs`); + srcURL.searchParams.append( + "html", + `<html> + <head> + <meta charset="utf-8"/> + <title>Accessibility Panel Test (OOP)</title> + </head> + <body>${uri}</body> + </html>` + ); + uri = `<iframe title="Accessibility Panel Test (OOP)" src="${srcURL.href}"/>`; + } + + return `data:text/html;charset=UTF-8,${encodeURIComponent(uri)}`; +} + +/** + * Add a test task based on the test structure and a test URL. + * @param {JSON} tests test data that has the format of: + * { + * desc {String} description for better logging + * setup {Function} An optional setup that needs to be + * performed before the state of the + * tree and the sidebar can be checked + * expected {JSON} An expected states for the tree and + * the sidebar + * } + * @param {String} uri test URL + * @param {String} msg a message that is printed for the test + * @param {Object} options options for the test + */ +function addA11yPanelTestsTask(tests, uri, msg, options) { + addA11YPanelTask(msg, uri, env => runA11yPanelTests(tests, env), options); +} + +/** + * Borrowed from framework's shared head. Close toolbox, completely disable + * accessibility and remove the tab. + * @param {Tab} + * tab The tab to close. + * @return {Promise} + * Resolves when the toolbox and tab have been destroyed and closed. + */ +async function closeTabToolboxAccessibility(tab = gBrowser.selectedTab) { + if (gDevTools.hasToolboxForTab(tab)) { + await gDevTools.closeToolboxForTab(tab); + } + + await shutdownAccessibility(gBrowser.getBrowserForTab(tab)); + await removeTab(tab); + await new Promise(resolve => setTimeout(resolve, 0)); +} + +/** + * A wrapper function around add_task that sets up the test environment, runs + * the test and then disables accessibility tools. + * @param {String} msg a message that is printed for the test + * @param {String} uri test URL + * @param {Function} task task function containing the tests. + * @param {Object} options options for the test + */ +function addA11YPanelTask(msg, uri, task, options = {}) { + add_task(async function a11YPanelTask() { + info(msg); + + const env = await addTestTab(buildURL(uri, options)); + await task(env); + await closeTabToolboxAccessibility(env.tab); + }); +} |