Bug 1544678 - fixing a11y audit when checking an accessible object with no bounds. r=gl

Differential Revision: https://phabricator.services.mozilla.com/D27884 --HG-- extra : moz-landing-system : lando
2019-04-17 12:28:04 +00:00 · 2019-04-17 12:28:04 +00:00 · 060fc67e56
--- a/devtools/server/actors/accessibility/accessible.js
+++ b/devtools/server/actors/accessibility/accessible.js
@ -393,14 +393,20 @@ const AccessibleActor = ActorClassWithSpec(accessibleSpec, {
      return null;
    }

+    const { bounds } = this;
+    if (!bounds) {
+      return null;
+    }
+
    const { DOMNode: rawNode } = this.rawAccessible;
    const win = rawNode.ownerGlobal;
+
    // Keep the reference to the walker actor in case the actor gets destroyed
    // during the colour contrast ratio calculation.
    const { walker } = this;
    walker.clearStyles(win);
    const contrastRatio = await getContrastRatioFor(rawNode.parentNode, {
-      bounds: this.bounds,
+      bounds,
      win,
    });

--- a/devtools/server/tests/browser/browser_accessibility_node_audit.js
+++ b/devtools/server/tests/browser/browser_accessibility_node_audit.js
@ -10,33 +10,40 @@
 * corresponding event as well as the AccesibleFront state being up to date.
 */

+async function checkAudit(a11yWalker, node, expected) {
+  const front = await a11yWalker.getAccessibleFor(node);
+  const [ textLeafNode ] = await front.children();
+
+  const onAudited = textLeafNode.once("audited");
+  const audit = await textLeafNode.audit();
+  const auditFromEvent = await onAudited;
+
+  Assert.deepEqual(audit, expected, "Audit results are correct.");
+  Assert.deepEqual(textLeafNode.checks, expected, "Checks are correct.");
+  Assert.deepEqual(auditFromEvent, expected, "Audit results from event are correct.");
+}
+
 add_task(async function() {
  const {target, walker, accessibility} =
    await initAccessibilityFrontForUrl(MAIN_DOMAIN + "doc_accessibility_infobar.html");

  const a11yWalker = await accessibility.getWalker();
  await accessibility.enable();
+
  const headerNode = await walker.querySelector(walker.rootNode, "#h1");
-  const headerFront = await a11yWalker.getAccessibleFor(headerNode);
-  const [textLeafNode] = await headerFront.children();
-
-  const onAudited = textLeafNode.once("audited");
-  const audit = await textLeafNode.audit();
-  const auditFromEvent = await onAudited;
-
-  const expectedAudit = {
+  await checkAudit(a11yWalker, headerNode, {
    "CONTRAST": {
      "value": 21,
      "color": [0, 0, 0, 1],
      "backgroundColor": [255, 255, 255, 1],
      "isLargeText": true,
    },
-  };
+  });

-  Assert.deepEqual(audit, expectedAudit, "Audit results are correct.");
-  Assert.deepEqual(textLeafNode.checks, expectedAudit, "Checks are correct.");
-  Assert.deepEqual(auditFromEvent, expectedAudit,
-    "Audit results from event are correct.");
+  const paragraphNode = await walker.querySelector(walker.rootNode, "#p");
+  await checkAudit(a11yWalker, paragraphNode, {
+    "CONTRAST": null,
+  });

  await accessibility.disable();
  await waitForA11yShutdown();
--- a/devtools/server/tests/browser/doc_accessibility_infobar.html
+++ b/devtools/server/tests/browser/doc_accessibility_infobar.html
@ -6,5 +6,6 @@
 <body>
  <h1 id="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
  <button id="button">Accessible Button</button>
+  <p id="p" style="font-size: 0;">This is a paragraph that has no bounds.</p>
 </body>
 </html>