fix(region): contents in iframes should pass the region rule if the iframe itself is in a region

lib/checks/navigation/heading-order-after.js

@@ -1,8 +1,10 @@
+import { matchAncestry } from '../../core/utils';
+
 export default function headingOrderAfter(results) {
   // Construct a map of all headings on the page
   const headingOrder = getHeadingOrder(results);
   results.forEach(result => {
-    result.result = getHeadingOrderOutcome(result, headingOrder)
+    result.result = getHeadingOrderOutcome(result, headingOrder);
   });
   return results;
 }
@@ -11,20 +13,20 @@ export default function headingOrderAfter(results) {
  * Determine check outcome, based on the position of the result in the headingOrder
  */
 function getHeadingOrderOutcome(result, headingOrder) {
-  const index = findHeadingOrderIndex(headingOrder, result.node.ancestry)
+  const index = findHeadingOrderIndex(headingOrder, result.node.ancestry);
   const currLevel = headingOrder[index]?.level ?? -1;
   const prevLevel = headingOrder[index - 1]?.level ?? -1;
 
   // First heading always passes
   if (index === 0) {
-    return true
-  };
+    return true;
+  }
   // Heading not in the map
   if (currLevel === -1) {
-    return undefined; 
+    return undefined;
   }
   // Check if a heading is skipped
-  return (currLevel - prevLevel <= 1)
+  return currLevel - prevLevel <= 1;
 }
 
 /**
@@ -73,7 +75,7 @@ function mergeHeadingOrder(mergedHeadingOrder, result) {
 
 /**
  * Determine where the iframe results fit into the top-level heading order
- * 
+ *
  * If a frame has no headings, but it does have iframes we might not have a result.
  * We can account for this by finding the closest ancestor we do know about.
  */
@@ -83,7 +85,7 @@ function getFrameIndex(headingOrder, frameAncestry) {
     if (index !== -1) {
       return index;
     }
-    frameAncestry = shortenArray(frameAncestry, 1)
+    frameAncestry = shortenArray(frameAncestry, 1);
   }
   return -1;
 }
@@ -105,25 +107,6 @@ function addFrameToHeadingAncestry(heading, frameAncestry) {
   return { ...heading, ancestry };
 }
 
-/**
- * Check if two ancestries are identical
- */
-function matchAncestry(ancestryA, ancestryB) {
-  if (ancestryA.length !== ancestryB.length) {
-    return false;
-  }
-  return ancestryA.every((selectorA, index) => {
-    const selectorB = ancestryB[index];
-    if (!Array.isArray(selectorA)) {
-      return selectorA === selectorB;
-    }
-    if (selectorA.length !== selectorB.length) {
-      return false;
-    }
-    return selectorA.every((str, index) => selectorB[index] === str);
-  });
-}
-
 /**
  * Shorten an array by some number of items
  */

lib/checks/navigation/region-after.js

@@ -0,0 +1,30 @@
+import { matchAncestry } from '../../core/utils';
+
+function regionAfter(results) {
+  results.forEach((r, index) => {
+    // this element failed the check
+    if (!r.result) {
+      // we need to see if it's actually contained in an iframe that passed the check
+      const ancestryMinusLast = r.node.ancestry.slice(0, -1);
+
+      // we only need to check up to index - 1 because the iframe this element might be contained in will have been found before this element
+      for (const earlierResult of results.slice(0, index)) {
+        // matches if the current result came from the iframe that's represented by earlierResult
+        if (matchAncestry(ancestryMinusLast, earlierResult.node.ancestry)) {
+          r.result = earlierResult.result;
+          break;
+        }
+      }
+    }
+  });
+
+  // iframe elements should always pass
+  results.forEach(r => {
+    if (!r.result && r.data.isIframe) {
+      r.result = true;
+    }
+  });
+  return results;
+}
+
+export default regionAfter;

lib/checks/navigation/region-evaluate.js

@@ -75,6 +75,11 @@ function findRegionlessElms(virtualNode, options) {
 
 function regionEvaluate(node, options, virtualNode) {
   let regionlessNodes = cache.get('regionlessNodes');
+
+  this.data({
+    isIframe: ['iframe', 'frame'].includes(virtualNode.props.nodeName)
+  });
+
   if (regionlessNodes) {
     return !regionlessNodes.includes(virtualNode);
   }

lib/checks/navigation/region.json

@@ -1,8 +1,9 @@
 {
   "id": "region",
   "evaluate": "region-evaluate",
+  "after": "region-after",
   "options": {
-    "regionMatcher": "dialog, [role=dialog], [role=alertdialog], svg, iframe"
+    "regionMatcher": "dialog, [role=dialog], [role=alertdialog], svg"
   },
   "metadata": {
     "impact": "moderate",

lib/core/base/metadata-function-map.js

@@ -60,6 +60,7 @@ import internalLinkPresentEvaluate from '../../checks/navigation/internal-link-p
 import metaRefreshEvaluate from '../../checks/navigation/meta-refresh-evaluate';
 import pAsHeadingEvaluate from '../../checks/navigation/p-as-heading-evaluate';
 import regionEvaluate from '../../checks/navigation/region-evaluate';
+import regionAfter from '../../checks/navigation/region-after';
 import skipLinkEvaluate from '../../checks/navigation/skip-link-evaluate';
 import uniqueFrameTitleAfter from '../../checks/navigation/unique-frame-title-after';
 import uniqueFrameTitleEvaluate from '../../checks/navigation/unique-frame-title-evaluate';
@@ -234,6 +235,7 @@ const metadataFunctionMap = {
   'meta-refresh-evaluate': metaRefreshEvaluate,
   'p-as-heading-evaluate': pAsHeadingEvaluate,
   'region-evaluate': regionEvaluate,
+  'region-after': regionAfter,
   'skip-link-evaluate': skipLinkEvaluate,
   'unique-frame-title-after': uniqueFrameTitleAfter,
   'unique-frame-title-evaluate': uniqueFrameTitleEvaluate,

lib/core/utils/index.js

@@ -53,6 +53,7 @@ export {
   matchesExpression,
   convertSelector
 } from './matches';
+export { default as matchAncestry } from './match-ancestry';
 export { default as memoize } from './memoize';
 export { default as mergeResults } from './merge-results';
 export { default as nodeSorter } from './node-sorter';

lib/core/utils/match-ancestry.js

@@ -0,0 +1,20 @@
+/**
+ * Check if two ancestries are identical
+ */
+function matchAncestry(ancestryA, ancestryB) {
+  if (ancestryA.length !== ancestryB.length) {
+    return false;
+  }
+  return ancestryA.every((selectorA, index) => {
+    const selectorB = ancestryB[index];
+    if (!Array.isArray(selectorA)) {
+      return selectorA === selectorB;
+    }
+    if (selectorA.length !== selectorB.length) {
+      return false;
+    }
+    return selectorA.every((str, index) => selectorB[index] === str);
+  });
+}
+
+export default matchAncestry;

test/checks/navigation/region-after.js

@@ -0,0 +1,197 @@
+describe('region-after', function() {
+  'use strict';
+
+  var checkContext = axe.testUtils.MockCheckContext();
+
+  afterEach(function() {
+    checkContext.reset();
+  });
+
+  it('should always pass iframes', function() {
+    var result = checks.region.after([
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: false
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > p']
+        },
+        result: false
+      }
+    ]);
+
+    assert.deepEqual(result, [
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > p']
+        },
+        result: false
+      }
+    ]);
+  });
+
+  it('should pass children of iframes if the iframe contained in it is in a region', function() {
+    var result = checks.region.after([
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > p']
+        },
+        result: false
+      }
+    ]);
+
+    assert.deepEqual(result, [
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > p']
+        },
+        result: true
+      }
+    ]);
+  });
+
+  it('should pass nested iframes', function() {
+    var result = checks.region.after([
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: false
+      },
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > iframe']
+        },
+        result: false
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: [
+            'html > body > iframe',
+            'html > body > iframe',
+            'html > body > p'
+          ]
+        },
+        result: false
+      }
+    ]);
+
+    assert.deepEqual(result, [
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: [
+            'html > body > iframe',
+            'html > body > iframe',
+            'html > body > p'
+          ]
+        },
+        result: false
+      }
+    ]);
+  });
+
+  it('should pass children of nested iframes if the nested iframe is in a region', function() {
+    var result = checks.region.after([
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: false
+      },
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: [
+            'html > body > iframe',
+            'html > body > iframe',
+            'html > body > p'
+          ]
+        },
+        result: false
+      }
+    ]);
+
+    assert.deepEqual(result, [
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: true },
+        node: {
+          ancestry: ['html > body > iframe', 'html > body > iframe']
+        },
+        result: true
+      },
+      {
+        data: { isIframe: false },
+        node: {
+          ancestry: [
+            'html > body > iframe',
+            'html > body > iframe',
+            'html > body > p'
+          ]
+        },
+        result: true
+      }
+    ]);
+  });
+});

test/checks/navigation/region.js

@@ -290,14 +290,6 @@ describe('region', function() {
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
-  it('treats iframe elements as regions', function() {
-    var checkArgs = checkSetup(
-      '<iframe id="target"></iframe><div role="main">Content</div>'
-    );
-
-    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
-  });
-
   it('returns the outermost element as the error', function() {
     var checkArgs = checkSetup(
       '<div id="target"><p>This is random content.</p></div><div role="main"><h1 id="mainheader" tabindex="0">Introduction</h1></div>'