1 files changed, 129 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
new file mode 100644
index 0000000000..1f50ae6b88
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the contextual menu shows the right items when clicking on a link
+// in aria attributes.
+
+const TEST_URL = URL_ROOT + "doc_markup_links_aria_attributes.html";
+
+// The test case array contains objects with the following properties:
+// - selector: css selector for the node to select in the inspector
+// - attributeName: name of the attribute to test
+// - links: an array of id strings that are expected to be in the attribute
+const TEST_DATA = [
+  {
+    selector: "#aria-activedescendant",
+    attributeName: "aria-activedescendant",
+    links: ["activedescendant01"],
+  },
+  {
+    selector: "#aria-controls",
+    attributeName: "aria-controls",
+    links: ["controls01", "controls02"],
+  },
+  {
+    selector: "#aria-describedby",
+    attributeName: "aria-describedby",
+    links: ["describedby01", "describedby02"],
+  },
+  {
+    selector: "#aria-details",
+    attributeName: "aria-details",
+    links: ["details01", "details02"],
+  },
+  {
+    selector: "#aria-errormessage",
+    attributeName: "aria-errormessage",
+    links: ["errormessage01"],
+  },
+  {
+    selector: "#aria-flowto",
+    attributeName: "aria-flowto",
+    links: ["flowto01", "flowto02"],
+  },
+  {
+    selector: "#aria-labelledby",
+    attributeName: "aria-labelledby",
+    links: ["labelledby01", "labelledby02"],
+  },
+  {
+    selector: "#aria-owns",
+    attributeName: "aria-owns",
+    links: ["owns01", "owns02"],
+  },
+];
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  for (const test of TEST_DATA) {
+    info("Selecting test node " + test.selector);
+    await selectNode(test.selector, inspector);
+
+    info("Finding the popupNode to anchor the context-menu to");
+    const { editor } = await getContainerForSelector(test.selector, inspector);
+    const attributeEl = editor.attrElements.get(test.attributeName);
+    const linksEl = attributeEl.querySelectorAll(".link");
+
+    is(
+      linksEl.length,
+      test.links.length,
+      "We have the expected number of links in attribute " + test.attributeName
+    );
+
+    for (let i = 0; i < test.links.length; i++) {
+      info(`Checking link # ${i} for attribute "${test.attributeName}"`);
+
+      const linkEl = linksEl[i];
+      ok(linkEl, "Found the link");
+
+      const expectedReferencedNodeId = test.links[i];
+
+      info("Simulating a context click on the link");
+      const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+        target: linkEl,
+      });
+
+      const linkFollow = allMenuItems.find(
+        ({ id }) => id === "node-menu-link-follow"
+      );
+      const linkCopy = allMenuItems.find(
+        ({ id }) => id === "node-menu-link-copy"
+      );
+
+      is(linkFollow.visible, true, "The follow-link item is visible");
+      is(linkCopy.visible, false, "The copy-link item is not visible");
+      const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
+        "inspector.menu.selectElement.label",
+        expectedReferencedNodeId
+      );
+      is(
+        linkFollow.label,
+        linkFollowItemLabel,
+        "the follow-link label is correct"
+      );
+
+      info("Check that select node button is displayed");
+      const buttonEl = linkEl.querySelector("button.select-node");
+      ok(buttonEl, "Found the select node button");
+      is(
+        buttonEl.getAttribute("title"),
+        linkFollowItemLabel,
+        "Button has expected title"
+      );
+
+      info("Check that clicking on button selects the associated node");
+      const onSelection = inspector.selection.once("new-node-front");
+      buttonEl.click();
+      await onSelection;
+
+      is(
+        inspector.selection.nodeFront.id,
+        expectedReferencedNodeId,
+        "The expected new node was selected"
+      );
+    }
+  }
+});