From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../client/accessibility/test/chrome/chrome.toml   |  16 ++
 .../test/chrome/contrast.snapshots.js              | 262 +++++++++++++++++++++
 devtools/client/accessibility/test/chrome/head.js  |  32 +++
 .../test/chrome/test_accessible_contrast.html      |  84 +++++++
 .../test/chrome/test_accessible_learnMoreLink.html |  97 ++++++++
 .../test/chrome/test_accessible_openLink.html      | 111 +++++++++
 .../test/chrome/test_accessible_relations.html     | 103 ++++++++
 .../chrome/test_accessible_row_context_menu.html   | 148 ++++++++++++
 8 files changed, 853 insertions(+)
 create mode 100644 devtools/client/accessibility/test/chrome/chrome.toml
 create mode 100644 devtools/client/accessibility/test/chrome/contrast.snapshots.js
 create mode 100644 devtools/client/accessibility/test/chrome/head.js
 create mode 100644 devtools/client/accessibility/test/chrome/test_accessible_contrast.html
 create mode 100644 devtools/client/accessibility/test/chrome/test_accessible_learnMoreLink.html
 create mode 100644 devtools/client/accessibility/test/chrome/test_accessible_openLink.html
 create mode 100644 devtools/client/accessibility/test/chrome/test_accessible_relations.html
 create mode 100644 devtools/client/accessibility/test/chrome/test_accessible_row_context_menu.html

(limited to 'devtools/client/accessibility/test/chrome')

diff --git a/devtools/client/accessibility/test/chrome/chrome.toml b/devtools/client/accessibility/test/chrome/chrome.toml
new file mode 100644
index 0000000000..503e029d8e
--- /dev/null
+++ b/devtools/client/accessibility/test/chrome/chrome.toml
@@ -0,0 +1,16 @@
+[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>
-- 
cgit v1.2.3