summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js277
1 files changed, 277 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
new file mode 100644
index 0000000000..d7eaffae82
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -0,0 +1,277 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* import-globals-from helper_markup_accessibility_navigation.js */
+
+"use strict";
+
+// Test keyboard navigation accessibility of inspector's markup view.
+
+loadHelperScript("helper_markup_accessibility_navigation.js");
+
+/**
+ * Test data has the format of:
+ * {
+ * desc {String} description for better logging
+ * key {String} key event's key
+ * options {?Object} optional event data such as shiftKey, etc
+ * focused {String} path to expected focused element relative to
+ * its container
+ * activedescendant {String} path to expected aria-activedescendant element
+ * relative to its container
+ * waitFor {String} optional event to wait for if keyboard actions
+ * result in asynchronous updates
+ * }
+ */
+const TESTS = [
+ {
+ desc: "Collapse body container",
+ focused: "root.elt",
+ activedescendant: "body.tagLine",
+ key: "VK_LEFT",
+ options: {},
+ waitFor: "collapsed",
+ },
+ {
+ desc: "Expand body container",
+ focused: "root.elt",
+ activedescendant: "body.tagLine",
+ key: "VK_RIGHT",
+ options: {},
+ waitFor: "expanded",
+ },
+ {
+ desc: "Select header container",
+ focused: "root.elt",
+ activedescendant: "header.tagLine",
+ key: "VK_DOWN",
+ options: {},
+ waitFor: "inspector-updated",
+ },
+ {
+ desc: "Expand header container",
+ focused: "root.elt",
+ activedescendant: "header.tagLine",
+ key: "VK_RIGHT",
+ options: {},
+ waitFor: "expanded",
+ },
+ {
+ desc: "Select text container",
+ focused: "root.elt",
+ activedescendant: "container-0.tagLine",
+ key: "VK_DOWN",
+ options: {},
+ waitFor: "inspector-updated",
+ },
+ {
+ desc: "Select header container again",
+ focused: "root.elt",
+ activedescendant: "header.tagLine",
+ key: "VK_UP",
+ options: {},
+ waitFor: "inspector-updated",
+ },
+ {
+ desc: "Collapse header container",
+ focused: "root.elt",
+ activedescendant: "header.tagLine",
+ key: "VK_LEFT",
+ options: {},
+ waitFor: "collapsed",
+ },
+ {
+ desc: "Focus on header container tag",
+ focused: "header.focusableElms.0",
+ activedescendant: "header.tagLine",
+ key: "VK_RETURN",
+ options: {},
+ },
+ {
+ desc: "Remove focus from header container tag",
+ focused: "root.elt",
+ activedescendant: "header.tagLine",
+ key: "VK_ESCAPE",
+ options: {},
+ },
+ {
+ desc: "Focus on header container tag again",
+ focused: "header.focusableElms.0",
+ activedescendant: "header.tagLine",
+ key: "VK_SPACE",
+ options: {},
+ },
+ {
+ desc: "Focus on header id attribute",
+ focused: "header.focusableElms.1",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Focus on header class attribute",
+ focused: "header.focusableElms.2",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Focus on header new attribute",
+ focused: "header.focusableElms.3",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Circle back and focus on header tag again",
+ focused: "header.focusableElms.0",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Circle back and focus on header new attribute again",
+ focused: "header.focusableElms.3",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: { shiftKey: true },
+ },
+ {
+ desc: "Tab back and focus on header class attribute",
+ focused: "header.focusableElms.2",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: { shiftKey: true },
+ },
+ {
+ desc: "Tab back and focus on header id attribute",
+ focused: "header.focusableElms.1",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: { shiftKey: true },
+ },
+ {
+ desc: "Tab back and focus on header tag",
+ focused: "header.focusableElms.0",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: { shiftKey: true },
+ },
+ {
+ desc: "Expand header container, ensure that focus is still on header tag",
+ focused: "header.focusableElms.0",
+ activedescendant: "header.tagLine",
+ key: "VK_RIGHT",
+ options: {},
+ waitFor: "expanded",
+ },
+ {
+ desc: "Activate header tag editor",
+ focused: "header.editor.tag.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_RETURN",
+ options: {},
+ },
+ {
+ desc: "Activate header id attribute editor",
+ focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Deselect text in header id attribute editor",
+ focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Activate header class attribute editor",
+ focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Deselect text in header class attribute editor",
+ focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Activate header new attribute editor",
+ focused: "header.editor.newAttr.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Circle back and activate header tag editor again",
+ focused: "header.editor.tag.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: {},
+ },
+ {
+ desc: "Circle back and activate header new attribute editor again",
+ focused: "header.editor.newAttr.inplaceEditor.input",
+ activedescendant: "header.tagLine",
+ key: "VK_TAB",
+ options: { shiftKey: true },
+ },
+ {
+ desc: "Exit edit mode and keep focus on header new attribute",
+ focused: "header.focusableElms.3",
+ activedescendant: "header.tagLine",
+ key: "VK_ESCAPE",
+ options: {},
+ },
+ {
+ desc: "Move the selection to body and reset focus to container tree",
+ focused: "docBody",
+ activedescendant: "body.tagLine",
+ key: "VK_UP",
+ options: {},
+ waitFor: "inspector-updated",
+ },
+];
+
+let containerID = 0;
+let elms = {};
+
+add_task(async function () {
+ const { inspector } = await openInspectorForURL(`data:text/html;charset=utf-8,
+ <h1 id="some-id" class="some-class">foo<span>Child span<span></h1>`);
+
+ // Record containers that are created after inspector is initialized to be
+ // useful in testing.
+ inspector.on("container-created", memorizeContainer);
+ registerCleanupFunction(() => {
+ inspector.off("container-created", memorizeContainer);
+ });
+
+ elms.docBody = inspector.markup.doc.body;
+ elms.root = inspector.markup.getContainer(inspector.markup._rootNode);
+ elms.header = await getContainerForSelector("h1", inspector);
+ elms.body = await getContainerForSelector("body", inspector);
+
+ // Initial focus is on root element and active descendant should be set on
+ // body tag line.
+ testNavigationState(inspector, elms, elms.docBody, elms.body.tagLine);
+
+ // Focus on the tree element.
+ elms.root.elt.focus();
+
+ for (const testData of TESTS) {
+ await runAccessibilityNavigationTest(inspector, elms, testData);
+ }
+
+ elms = null;
+});
+
+// Record all containers that are created dynamically into elms object.
+function memorizeContainer(container) {
+ elms[`container-${containerID++}`] = container;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-08-05 06:30:48 +0000