Bug 1546003 - [markup view] Linkify ARIA attributes. r=devtools-revie…

…wers,nchevobbe Add support to linkify ARIA attributes referencing other elements in Inspector. Differential Revision: https://phabricator.services.mozilla.com/D95682
dothq · Aug 10, 2023 · 287025b · 287025b
1 parent 35c3924
commit 287025b
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/devtools/client/inspector/markup/test/browser.ini b/devtools/client/inspector/markup/test/browser.ini
@@ -32,6 +32,7 @@ support-files =
   doc_markup_html_mixed_case.html
   doc_markup_image_and_canvas.html
   doc_markup_image_and_canvas_2.html
+  doc_markup_links_aria_attributes.html
   doc_markup_links.html
   doc_markup_mutation.html
   doc_markup_navigation.html
@@ -159,6 +160,7 @@ skip-if = true # Bug 1177550
 [browser_markup_links_05.js]
 [browser_markup_links_06.js]
 [browser_markup_links_07.js]
+[browser_markup_links_aria_attributes.js]
 [browser_markup_load_01.js]
 skip-if = true # Bug 1706833, times out waiting for context menu to open
 [browser_markup_html_edit_01.js]

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
@@ -0,0 +1,177 @@
+/* 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.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
+// - popupNodeSelector: css selector for the element inside the attribute
+//   element to use as the contextual menu anchor
+// - linkFollowItemLabel: the expected label of the follow-link item
+// - linkCopyItemLabel: the expected label of the copy-link item
+const TEST_DATA = [
+  {
+    selector: "#aria-activedescendant",
+    attributeName: "aria-activedescendant",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "activedescendant01"
+    ),
+  },
+  {
+    selector: "#aria-controls",
+    attributeName: "aria-controls",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "controls01"
+    ),
+  },
+  {
+    selector: "#aria-controls",
+    attributeName: "aria-controls",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "controls02"
+    ),
+  },
+  {
+    selector: "#aria-describedby",
+    attributeName: "aria-describedby",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "describedby01"
+    ),
+  },
+  {
+    selector: "#aria-describedby",
+    attributeName: "aria-describedby",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "describedby02"
+    ),
+  },
+  {
+    selector: "#aria-details",
+    attributeName: "aria-details",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "details01"
+    ),
+  },
+  {
+    selector: "#aria-details",
+    attributeName: "aria-details",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "details02"
+    ),
+  },
+  {
+    selector: "#aria-errormessage",
+    attributeName: "aria-errormessage",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "errormessage01"
+    ),
+  },
+  {
+    selector: "#aria-flowto",
+    attributeName: "aria-flowto",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "flowto01"
+    ),
+  },
+  {
+    selector: "#aria-flowto",
+    attributeName: "aria-flowto",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "flowto02"
+    ),
+  },
+  {
+    selector: "#aria-labelledby",
+    attributeName: "aria-labelledby",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "labelledby01"
+    ),
+  },
+  {
+    selector: "#aria-labelledby",
+    attributeName: "aria-labelledby",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "labelledby02"
+    ),
+  },
+  {
+    selector: "#aria-owns",
+    attributeName: "aria-owns",
+    popupNodeSelector: ".link",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "owns01"
+    ),
+  },
+  {
+    selector: "#aria-owns",
+    attributeName: "aria-owns",
+    popupNodeSelector: ".link:nth-of-type(2)",
+    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
+      "inspector.menu.selectElement.label",
+      "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 popupNode = editor.attrElements
+      .get(test.attributeName)
+      .querySelector(test.popupNodeSelector);
+    ok(popupNode, "Found the popupNode in attribute " + test.attributeName);
+
+    info("Simulating a context click on the popupNode");
+    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
+      target: popupNode,
+    });
+
+    const linkFollow = allMenuItems.find(i => i.id === "node-menu-link-follow");
+    const linkCopy = allMenuItems.find(i => i.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");
+    is(
+      linkFollow.label,
+      test.linkFollowItemLabel,
+      "the follow-link label is correct"
+    );
+  }
+});
diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Markup-view Linkify ARIA attributes</title>
+  </head>
+  <body>
+    <div id="aria-activedescendant"
+      aria-activedescendant="activedescendant01">aria-activedescendant test</div>
+    <div id="activedescendant01">#activedescendant01</div>
+
+    <div id="aria-controls"
+      aria-controls="controls01 controls02">aria-controls test</div>
+    <div id="controls01">#controls01</div>
+    <div id="controls02">#controls02</div>
+
+    <div id="aria-describedby"
+      aria-describedby="describedby01 describedby02">aria-describedby test</div>
+    <div id="describedby01">#describedby01</div>
+    <div id="describedby02">#describedby02</div>
+
+    <div id="aria-details" aria-details="details01 details02">aria-details test</div>
+    <div id="details01">details01</div>
+    <div id="details02">details02</div>
+
+    <div id="aria-errormessage"
+      aria-errormessage="errormessage01">aria-errormessage test</div>
+    <div id="errormessage01">errormessage01</div>
+
+    <div id="aria-flowto"
+      aria-flowto="flowto01 flowto02">aria-flowto test</div>
+    <div id="flowto01">#flowto01</div>
+    <div id="flowto02">#flowto01</div>
+
+    <div id="aria-labelledby"
+      aria-labelledby="labelledby01 labelledby02">aria-labelledby test</div>
+    <div id="labelledby01">#labelledby01</div>
+    <div id="labelledby02">#labelledby02</div>
+
+    <div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div>
+    <div id="owns01">#owns01</div>
+    <div id="owns02">#owns02</div>
+  </body>
+</html>
diff --git a/devtools/client/shared/node-attribute-parser.js b/devtools/client/shared/node-attribute-parser.js
@@ -39,6 +39,35 @@ const WILDCARD = Symbol();
 
 const ATTRIBUTE_TYPES = new Map([
   ["action", { form: { namespaceURI: HTML_NS, type: TYPE_URI } }],
+  [
+    "aria-activedescendant",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF } },
+  ],
+  [
+    "aria-controls",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } },
+  ],
+  [
+    "aria-describedby",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } },
+  ],
+  [
+    "aria-details",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } },
+  ],
+  [
+    "aria-errormessage",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF } },
+  ],
+  [
+    "aria-flowto",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } },
+  ],
+  [
+    "aria-labelledby",
+    { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } },
+  ],
+  ["aria-owns", { WILDCARD: { namespaceURI: HTML_NS, type: TYPE_IDREF_LIST } }],
   ["background", { body: { namespaceURI: HTML_NS, type: TYPE_URI } }],
   [
     "cite",