summaryrefslogtreecommitdiffstats
path: root/devtools/client/accessibility/test/chrome
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/accessibility/test/chrome')
-rw-r--r--devtools/client/accessibility/test/chrome/chrome.ini11
-rw-r--r--devtools/client/accessibility/test/chrome/contrast.snapshots.js262
-rw-r--r--devtools/client/accessibility/test/chrome/head.js32
-rw-r--r--devtools/client/accessibility/test/chrome/test_accessible_contrast.html84
-rw-r--r--devtools/client/accessibility/test/chrome/test_accessible_learnMoreLink.html97
-rw-r--r--devtools/client/accessibility/test/chrome/test_accessible_openLink.html111
-rw-r--r--devtools/client/accessibility/test/chrome/test_accessible_relations.html103
-rw-r--r--devtools/client/accessibility/test/chrome/test_accessible_row_context_menu.html148
8 files changed, 848 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/chrome/chrome.ini b/devtools/client/accessibility/test/chrome/chrome.ini
new file mode 100644
index 0000000000..58a6a144bd
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/chrome.ini
@@ -0,0 +1,11 @@
+[DEFAULT]
+support-files =
+ head.js
+ contrast.snapshots.js
+ !/devtools/client/shared/components/test/chrome/head.js
+
+[test_accessible_contrast.html]
+[test_accessible_learnMoreLink.html]
+[test_accessible_openLink.html]
+[test_accessible_relations.html]
+[test_accessible_row_context_menu.html]
diff --git a/devtools/client/accessibility/test/chrome/contrast.snapshots.js b/devtools/client/accessibility/test/chrome/contrast.snapshots.js
new file mode 100644
index 0000000000..3b14ff8d66
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/contrast.snapshots.js
@@ -0,0 +1,262 @@
+/* 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/. */
+"use strict";
+
+window._snapshots = {
+ "ColorContrastAccessibility error render.": {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-check",
+ },
+ children: [
+ {
+ type: "h3",
+ props: {
+ className: "accessibility-check-header",
+ },
+ children: ["Color and Contrast"],
+ },
+ {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-color-contrast",
+ },
+ children: [
+ {
+ type: "span",
+ props: {
+ className: "accessibility-color-contrast-error",
+ role: "presentation",
+ },
+ children: ["Unable to calculate"],
+ },
+ ],
+ },
+ ],
+ },
+ "ColorContrastAccessibility basic render.": {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-check",
+ },
+ children: [
+ {
+ type: "h3",
+ props: {
+ className: "accessibility-check-header",
+ },
+ children: ["Color and Contrast"],
+ },
+ {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-color-contrast",
+ },
+ children: [
+ {
+ type: "span",
+ props: {
+ className: "accessibility-contrast-value FAIL",
+ role: "presentation",
+ style: {
+ "--accessibility-contrast-color": "rgba(255,0,0,1)",
+ "--accessibility-contrast-bg": "rgba(255,255,255,1)",
+ },
+ },
+ children: ["4.00"],
+ },
+ ],
+ },
+ {
+ type: "p",
+ props: {
+ className: "accessibility-check-annotation",
+ },
+ children: [
+ "Does not meet WCAG standards for accessible text. ",
+ {
+ type: "a",
+ props: {
+ className: "link",
+ href:
+ "https://developer.mozilla.org/docs/Web/Accessibility/" +
+ "Understanding_WCAG/Perceivable/Color_contrast?utm_source=" +
+ "devtools&utm_medium=a11y-panel-checks-color-contrast",
+ onClick:
+ "openDocOnClick(event) {\n event.preventDefault();\n " +
+ "openDocLink(event.target.href);\n }",
+ },
+ children: ["Learn more"],
+ },
+ "",
+ ],
+ },
+ ],
+ },
+ "ColorContrastAccessibility range render.": {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-check",
+ },
+ children: [
+ {
+ type: "h3",
+ props: {
+ className: "accessibility-check-header",
+ },
+ children: ["Color and Contrast"],
+ },
+ {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-color-contrast",
+ },
+ children: [
+ {
+ type: "span",
+ props: {
+ className: "accessibility-contrast-value FAIL",
+ role: "presentation",
+ style: {
+ "--accessibility-contrast-color": "rgba(128,128,128,1)",
+ "--accessibility-contrast-bg": "rgba(219,106,116,1)",
+ },
+ },
+ children: ["1.19"],
+ },
+ {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-color-contrast-separator",
+ },
+ children: null,
+ },
+ {
+ type: "span",
+ props: {
+ className: "accessibility-contrast-value FAIL",
+ role: "presentation",
+ style: {
+ "--accessibility-contrast-color": "rgba(128,128,128,1)",
+ "--accessibility-contrast-bg": "rgba(156,145,211,1)",
+ },
+ },
+ children: ["1.39"],
+ },
+ ],
+ },
+ {
+ type: "p",
+ props: {
+ className: "accessibility-check-annotation",
+ },
+ children: [
+ "Does not meet WCAG standards for accessible text. ",
+ {
+ type: "a",
+ props: {
+ className: "link",
+ href:
+ "https://developer.mozilla.org/docs/Web/Accessibility/" +
+ "Understanding_WCAG/Perceivable/Color_contrast?utm_source=" +
+ "devtools&utm_medium=a11y-panel-checks-color-contrast",
+ onClick:
+ "openDocOnClick(event) {\n event.preventDefault();\n " +
+ "openDocLink(event.target.href);\n }",
+ },
+ children: ["Learn more"],
+ },
+ "",
+ ],
+ },
+ ],
+ },
+ "ColorContrastAccessibility large text render.": {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-check",
+ },
+ children: [
+ {
+ type: "h3",
+ props: {
+ className: "accessibility-check-header",
+ },
+ children: ["Color and Contrast"],
+ },
+ {
+ type: "div",
+ props: {
+ role: "presentation",
+ tabIndex: "-1",
+ className: "accessibility-color-contrast",
+ },
+ children: [
+ {
+ type: "span",
+ props: {
+ className: "accessibility-contrast-value AA",
+ role: "presentation",
+ style: {
+ "--accessibility-contrast-color": "rgba(255,0,0,1)",
+ "--accessibility-contrast-bg": "rgba(255,255,255,1)",
+ },
+ },
+ children: ["4.00"],
+ },
+ {
+ type: "span",
+ props: {
+ className: "accessibility-color-contrast-large-text",
+ role: "presentation",
+ title:
+ "Text is 14 point and bold or larger, or 18 point or larger.",
+ },
+ children: ["large text"],
+ },
+ ],
+ },
+ {
+ type: "p",
+ props: {
+ className: "accessibility-check-annotation",
+ },
+ children: [
+ "Meets WCAG AA standards for accessible text. ",
+ {
+ type: "a",
+ props: {
+ className: "link",
+ href:
+ "https://developer.mozilla.org/docs/Web/Accessibility/" +
+ "Understanding_WCAG/Perceivable/Color_contrast?utm_source=" +
+ "devtools&utm_medium=a11y-panel-checks-color-contrast",
+ onClick:
+ "openDocOnClick(event) {\n event.preventDefault();\n " +
+ "openDocLink(event.target.href);\n }",
+ },
+ children: ["Learn more"],
+ },
+ "",
+ ],
+ },
+ ],
+ },
+};
diff --git a/devtools/client/accessibility/test/chrome/head.js b/devtools/client/accessibility/test/chrome/head.js
new file mode 100644
index 0000000000..a1a02df8a8
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/head.js
@@ -0,0 +1,32 @@
+/* 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/. */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+var { require } = ChromeUtils.importESModule(
+ "resource://devtools/shared/loader/Loader.sys.mjs"
+);
+var { BrowserLoader } = ChromeUtils.import(
+ "resource://devtools/shared/loader/browser-loader.js"
+);
+var DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+
+var { require: browserRequire } = BrowserLoader({
+ baseURI: "resource://devtools/client/shared/",
+ window,
+});
+
+window.EVENTS = {};
+window.on = function () {};
+window.off = function () {};
+
+SimpleTest.registerCleanupFunction(() => {
+ window.EVENTS = null;
+ window.on = null;
+ window.off = null;
+});
+
+// All tests are asynchronous.
+SimpleTest.waitForExplicitFinish();
diff --git a/devtools/client/accessibility/test/chrome/test_accessible_contrast.html b/devtools/client/accessibility/test/chrome/test_accessible_contrast.html
new file mode 100644
index 0000000000..aeb1cc47a5
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/test_accessible_contrast.html
@@ -0,0 +1,84 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that Color Contrast component renders correctly.
+-->
+<head>
+ <meta charset="utf-8">
+ <title>Color Contrast accessibility component test</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script src="chrome://mochitests/content/chrome/devtools/client/shared/components/test/chrome/head.js" type="application/javascript"/>
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js" type="application/javascript"></script>
+<script src="contrast.snapshots.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+/* global matchSnapshot */
+
+window.onload = async function() {
+ try {
+ const React = browserRequire("devtools/client/shared/vendor/react");
+ const { ColorContrastCheck } = browserRequire(
+ "devtools/client/accessibility/components/ColorContrastAccessibility");
+
+ const {
+ accessibility: { SCORES },
+ } = browserRequire("devtools/shared/constants");
+
+ matchSnapshot("ColorContrastAccessibility error render.",
+ React.createElement(ColorContrastCheck, { error: true })
+ );
+
+ matchSnapshot("ColorContrastAccessibility basic render.",
+ React.createElement(ColorContrastCheck, {
+ "value": 4.00,
+ "color": [255, 0, 0, 1],
+ "backgroundColor": [255, 255, 255, 1],
+ "isLargeText": false,
+ "score": SCORES.FAIL,
+ })
+ );
+
+ matchSnapshot("ColorContrastAccessibility range render.",
+ React.createElement(ColorContrastCheck, {
+ "min": 1.19,
+ "max": 1.39,
+ "color": [128, 128, 128, 1],
+ "backgroundColorMin": [219, 106, 116, 1],
+ "backgroundColorMax": [156, 145, 211, 1],
+ "isLargeText": false,
+ "score": SCORES.FAIL,
+ "scoreMin": SCORES.FAIL,
+ "scoreMax": SCORES.FAIL,
+ })
+ );
+
+ matchSnapshot("ColorContrastAccessibility large text render.",
+ React.createElement(ColorContrastCheck, {
+ "value": 4.00,
+ "color": [255, 0, 0, 1],
+ "backgroundColor": [255, 255, 255, 1],
+ "isLargeText": true,
+ "score": SCORES.AA,
+ })
+ );
+ } catch (e) {
+ ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+ } finally {
+ SimpleTest.finish();
+ }
+};
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/accessibility/test/chrome/test_accessible_learnMoreLink.html b/devtools/client/accessibility/test/chrome/test_accessible_learnMoreLink.html
new file mode 100644
index 0000000000..4644b21cd0
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/test_accessible_learnMoreLink.html
@@ -0,0 +1,97 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that LearnMoreLink parses and renders correctly text with learn more links.
+-->
+<head>
+ <meta charset="utf-8">
+ <title>LearnMoreLink component test</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+window.onload = async function() {
+ try {
+ const { gDevTools } = require("devtools/client/framework/devtools");
+ const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+ const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
+ const { Simulate } =
+ browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+ const LearnMoreLink = createFactory(
+ browserRequire("devtools/client/accessibility/components/LearnMoreLink"));
+
+ class MockL10N {
+ constructor(bundle) {
+ this.bundle = bundle;
+ }
+
+ getStr(name) {
+ return this.bundle[name];
+ }
+
+ getFormatStr(name, ...args) {
+ let index = 0;
+ return this.bundle[name].replace("%S", () => args[index++]);
+ }
+ }
+
+ function testLinkClicked(link, expectedUrl) {
+ const browserWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+ const defaultOpenWebLinkIn = browserWindow.openWebLinkIn;
+
+ const checker = Symbol();
+ let onClickUrl = checker;
+ browserWindow.openWebLinkIn = url => {
+ onClickUrl = url;
+ };
+
+ Simulate.click(link);
+
+ ok(onClickUrl !== checker, "Link was clicked");
+ is(onClickUrl, expectedUrl, "Correct URL is opened");
+
+ browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
+ }
+
+ const href = "http://example.com/";
+ const className = "test-class";
+ const l10n = new MockL10N({
+ message: "This is a message that contains a link. %S",
+ link: "Learn more",
+ });
+ const learnMoreLink = LearnMoreLink(
+ { href, className, l10n, learnMoreStringKey: "link", messageStringKey: "message" });
+ ok(LearnMoreLink, "Should be able to create LearnMoreLink instances");
+
+ ReactDOM.render(learnMoreLink, document.body);
+ const p = document.querySelector("p");
+ is(p.textContent, "This is a message that contains a link. Learn more",
+ "Text content for the whole paragraph is correct");
+
+ is(p.className, className, "Class name is set correctly.");
+
+ const link = p.querySelector(".link");
+ ok(link, "Link was rendered");
+ is(link.textContent, "Learn more", "Text content for link is correct");
+
+ testLinkClicked(link, href);
+ } catch (e) {
+ ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+ } finally {
+ SimpleTest.finish();
+ }
+};
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/accessibility/test/chrome/test_accessible_openLink.html b/devtools/client/accessibility/test/chrome/test_accessible_openLink.html
new file mode 100644
index 0000000000..1ed351e2fb
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/test_accessible_openLink.html
@@ -0,0 +1,111 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that openLink function is called if accessible object property is rendered as a link.
+-->
+<head>
+ <meta charset="utf-8">
+ <title>Accessible component test</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+window.onload = async function() {
+ try {
+ const { gDevTools } = require("devtools/client/framework/devtools");
+ const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+ const { createFactory, createElement } =
+ browserRequire("devtools/client/shared/vendor/react");
+ const { Provider } = require("devtools/client/shared/vendor/react-redux");
+ const createStore = require("devtools/client/shared/redux/create-store");
+ const { Simulate } =
+ browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+ const Accessible = createFactory(
+ browserRequire("devtools/client/accessibility/components/Accessible"));
+
+ function testLinkClicked(link, event, expectedUrl, expectedWhere) {
+ const browserWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+ const defaultOpenWebLinkIn = browserWindow.openWebLinkIn;
+
+ const checker = Symbol();
+ let onClickArgs = checker;
+ browserWindow.openWebLinkIn = (url, where) => {
+ onClickArgs = { url, where };
+ };
+
+ Simulate.click(link, event);
+
+ ok(onClickArgs !== checker, "Link was clicked");
+ is(onClickArgs.url, expectedUrl, "Correct URL is opened");
+ is(onClickArgs.where, expectedWhere, "URL was opened correctly");
+
+ browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
+ }
+
+ const a = Accessible({ labelledby: "Test Accessible" });
+ ok(a, "Should be able to create Accessible instances");
+
+ let URL = "http://example.com";
+ const mockStore = createStore((state, action) =>
+ action ? { ...state, ...action } : state,
+ {
+ initialState: {
+ details: {
+ DOMNode: {},
+ accessible: {
+ // This accessible mock has no actorID and should be treated as
+ // destroyed.
+ isDestroyed: () => true,
+ value: URL,
+ }
+ },
+ ui: {
+ supports: {}
+ }
+ },
+ }
+ );
+ const provider = createElement(Provider, { store: mockStore }, a);
+ const accessible = ReactDOM.render(provider, window.document.body);
+ ok(accessible, "Should be able to mount Accessible instances");
+
+ let link = document.querySelector(".url");
+ testLinkClicked(link, null, URL, "tab");
+
+ URL = "non-URL";
+ await mockStore.dispatch(
+ {
+ type: "update",
+ details: {
+ DOMNode: {},
+ accessible: {
+ // This accessible mock has no actorID and should be treated as
+ // destroyed.
+ isDestroyed: () => true,
+ value: URL,
+ }
+ }
+ }
+ );
+ link = document.querySelector(".url");
+ ok(!link, "Non URL link should not be rendered as a link.");
+ } catch (e) {
+ ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+ } finally {
+ SimpleTest.finish();
+ }
+};
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/accessibility/test/chrome/test_accessible_relations.html b/devtools/client/accessibility/test/chrome/test_accessible_relations.html
new file mode 100644
index 0000000000..c2d868b50c
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/test_accessible_relations.html
@@ -0,0 +1,103 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that openLink function is called if accessible object property is rendered as a link.
+-->
+<head>
+ <meta charset="utf-8">
+ <title>Accessible component test</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+window.onload = async function() {
+ try {
+ const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+ const { createFactory, createElement } =
+ browserRequire("devtools/client/shared/vendor/react");
+ const { Provider } = require("devtools/client/shared/vendor/react-redux");
+ const createStore = require("devtools/client/shared/redux/create-store");
+ const { Simulate } =
+ browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+ const Accessible = createFactory(
+ browserRequire("devtools/client/accessibility/components/Accessible"));
+
+ const a = Accessible({ labelledby: "Test Accessible" });
+ ok(a, "Should be able to create Accessible instances");
+
+ const mockState = {
+ details: {
+ DOMNode: {},
+ accessible: {
+ on: () => {},
+ off: () => {},
+ // This accessible mock has no actorID and should be treated as
+ // destroyed.
+ isDestroyed: () => true,
+ },
+ },
+ ui: { supports: {} }
+ };
+
+ const mockStore = createStore((state, action) =>
+ action ? { ...state, ...action } : state, { initialState: mockState });
+ const provider = createElement(Provider, { store: mockStore }, a);
+ const accessible = ReactDOM.render(provider, window.document.body);
+ ok(accessible, "Should be able to mount Accessible instances");
+ let relationsNode = document.getElementById("/relations");
+ ok(relationsNode, "Relations are rendered when supported.");
+ let arrow = relationsNode.querySelector(".arrow.theme-twisty");
+ is(arrow.style.visibility, "hidden", "Relations are empty.");
+
+ info("Render accessible object with relations.");
+ const state = {
+ details: {
+ ...mockState.details,
+ relations: {
+ "containing document": {
+ actorID: "server1.conn2.child1/accessible29",
+ typeName: "accessible",
+ name: "New Tab",
+ role: "document",
+ },
+ },
+ },
+ };
+ await mockStore.dispatch({ type: "update", ...state });
+ relationsNode = document.getElementById("/relations");
+ ok(relationsNode, "Relations are rendered when supported.");
+ arrow = relationsNode.querySelector(".arrow.theme-twisty");
+ ok(!arrow.style.visibility,
+ "There is at least one relation for the current accessible object.");
+
+ Simulate.click(arrow, null);
+ const relationNode = document.getElementById("/relations/containing document");
+ ok(relationNode, "Relation node is rendered.");
+ ok(relationNode.textContent.includes(
+ state.details.relations["containing document"].name),
+ "Relation target's name is rendered");
+ ok(relationNode.textContent.includes(
+ state.details.relations["containing document"].role),
+ "Relation target's name is rendered");
+ ok(relationNode.querySelector(".open-accessibility-inspector"),
+ "Select accessible button is rendered.");
+ } catch (e) {
+ ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+ } finally {
+ SimpleTest.finish();
+ }
+};
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/accessibility/test/chrome/test_accessible_row_context_menu.html b/devtools/client/accessibility/test/chrome/test_accessible_row_context_menu.html
new file mode 100644
index 0000000000..7cc2e6f005
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/test_accessible_row_context_menu.html
@@ -0,0 +1,148 @@
+<!-- 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/. -->
+<!DOCTYPE HTML>
+<html>
+<!--
+Test that openLink function is called if accessible object property is rendered as a link.
+-->
+<head>
+ <meta charset="utf-8">
+ <title>AccessibilityRow context menu test</title>
+ <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+ <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript"></script>
+<script type="application/javascript">
+
+"use strict";
+
+window.onload = async function() {
+ try {
+ const { gDevTools } = require("devtools/client/framework/devtools");
+ const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+ const { createFactory, createElement } =
+ browserRequire("devtools/client/shared/vendor/react");
+ const { Provider } = require("devtools/client/shared/vendor/react-redux");
+ const createStore = require("devtools/client/shared/redux/create-store");
+ const { Simulate } =
+ browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+ const AccessibilityRow = createFactory(
+ browserRequire("devtools/client/accessibility/components/AccessibilityRow"));
+ const { FILTERS } = browserRequire("devtools/client/accessibility/constants");
+
+ async function withMockEnv(func) {
+ const { gTelemetry: originalTelemetry } = window;
+ window.gTelemetry = null;
+
+ await func();
+
+ window.gTelemetry = originalTelemetry;
+ }
+
+ function renderAccessibilityRow(newProps, newState) {
+ let container = document.getElementById("container");
+ if (container) {
+ container.remove();
+ }
+
+ const accRow = AccessibilityRow(newProps);
+ const mockStore = createStore((state, action) =>
+ action ? { ...state, ...action } : state, { initialState: newState });
+ const provider = createElement(Provider, { store: mockStore }, accRow);
+
+ container = document.createElement("div");
+ container.id = "container";
+ document.body.appendChild(container);
+ return ReactDOM.render(provider, container);
+ }
+
+ const ROW_ID = "test-row";
+ const JSON_URL_PREFIX = "data:application/json;charset=UTF-8,";
+ const SNAPSHOT = { "snapshot": true };
+ const defaultProps = {
+ id: ROW_ID,
+ member: {
+ object: {
+ name: "test",
+ value: "test",
+ loading: false,
+ selected: false,
+ hasChildren: false,
+ snapshot: async () => SNAPSHOT,
+ on: () => {},
+ off: () => {},
+ // This accessible mock has no actorID and should be treated as
+ // destroyed.
+ isDestroyed: () => true,
+ },
+ },
+ columns: [
+ { "id": "default", "title": "role" },
+ { "id": "value", "title": "name" },
+ ],
+ provider: {
+ getValue: (object, id) => object[id],
+ },
+ hasContextMenu: true,
+ toolboxDoc: document,
+ };
+
+ const auditState = { audit: { filters: { [FILTERS.CONTRAST]: false }}};
+
+ const defaultState = {
+ ui: { supports: {} },
+ ...auditState,
+ };
+
+ info("Check contextmenu default behaviour.");
+ renderAccessibilityRow(defaultProps, defaultState);
+ const row = document.getElementById(ROW_ID);
+
+ info("Get topmost document where the context meny will be rendered");
+ const menuDoc = document.defaultView.windowRoot.ownerGlobal.document;
+ await withMockEnv(async function() {
+ Simulate.contextMenu(row);
+
+ const menu = menuDoc.getElementById("accessibility-row-contextmenu");
+ const printtojsonMenuItem = menuDoc.getElementById("menu-printtojson");
+
+ ok(menu, "Accessibility row context menu is open");
+ ok(printtojsonMenuItem, "Print to JSON menu item is visible");
+
+ const browserWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+ const defaultOpenWebLinkIn = browserWindow.openWebLinkIn;
+
+ let openWebLinkInCalled;
+ const openWebLinkInPromise = new Promise(resolve => {
+ openWebLinkInCalled = resolve;
+ });
+
+ // Mock top chrome window's @openWebLinkIn method.
+ browserWindow.openWebLinkIn = (...args) => {
+ openWebLinkInCalled(args);
+ };
+ printtojsonMenuItem.click();
+
+ const [ url, where ] = await openWebLinkInPromise;
+ is(url, `${JSON_URL_PREFIX}${encodeURIComponent(JSON.stringify(SNAPSHOT))}`,
+ "Correct URL is opened");
+ is(where, "tab", "URL was opened correctly");
+
+ // Reset @openWebLinkIn to default.
+ browserWindow.openWebLinkIn = defaultOpenWebLinkIn;
+ menu.remove();
+ });
+ } catch (e) {
+ ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+ } finally {
+ SimpleTest.finish();
+ }
+};
+</script>
+</pre>
+</body>
+</html>