fix(idref): fallback to qsa

lib/commons/dom/get-root-children.js

@@ -0,0 +1,48 @@
+import { nodeLookup } from '../../core/utils';
+import cache from '../../core/base/cache';
+
+/**
+ * Return the child virtual nodes of the root node
+ * @method getRootChildren
+ * @memberof axe.commons.dom
+ * @instance
+ * @param {Element|VirtualNode} node
+ * @returns {VirtualNode[]|undefined}
+ */
+export default function getRootChildren(node) {
+  const { vNode } = nodeLookup(node);
+  const { shadowId } = vNode;
+
+  const childrenMap = cache.get('getRootChildrenMap', () => ({}));
+  if (childrenMap[shadowId]) {
+    return childrenMap[shadowId];
+  }
+
+  // top of tree
+  if (vNode.parent === null) {
+    childrenMap[shadowId] = [...vNode.children];
+    return childrenMap[shadowId];
+  }
+
+  // disconnected tree
+  if (!vNode.parent) {
+    childrenMap[shadowId] = undefined;
+    return childrenMap[shadowId];
+  }
+
+  // since the virtual tree does not have a #shadowRoot element the root virtual
+  // node is the shadow host element. however the shadow host element is not inside
+  // the shadow DOM tree so we return the children of the shadow host element in
+  // order to not cross shadow DOM boundaries.
+  //
+  // TODO: slotted elements share the shadowId of the shadow tree it is attached to
+  // but should not be used to find id's inside the shadow tree. throw an error
+  // until we resolve this
+  if (vNode.shadowId !== vNode.parent.shadowId) {
+    throw new Error(
+      'Getting root children of shadow DOM elements is not supported'
+    );
+  }
+
+  return getRootChildren(vNode.parent);
+}

lib/commons/dom/idrefs.js

@@ -1,5 +1,10 @@
-import getRootNode from './get-root-node';
-import { tokenList } from '../../core/utils';
+import getRootChildren from './get-root-children';
+import {
+  tokenList,
+  nodeLookup,
+  querySelectorAll,
+  getRootNode
+} from '../../core/utils';
 
 /**
  * Get elements referenced via a space-separated token attribute;
@@ -18,24 +23,41 @@ import { tokenList } from '../../core/utils';
  *
  */
 function idrefs(node, attr) {
-  node = node.actualNode || node;
+  const { domNode, vNode } = nodeLookup(node);
+  const results = [];
+  const attrValue = vNode ? vNode.attr(attr) : node.getAttribute(attr);
+
+  if (!attrValue) {
+    return results;
+  }
 
   try {
-    const doc = getRootNode(node);
-    const result = [];
-    let attrValue = node.getAttribute(attr);
-
-    if (attrValue) {
-      attrValue = tokenList(attrValue);
-      for (let index = 0; index < attrValue.length; index++) {
-        result.push(doc.getElementById(attrValue[index]));
-      }
+    const root = getRootNode(domNode);
+    for (const token of tokenList(attrValue)) {
+      results.push(root.getElementById(token));
     }
-
-    return result;
   } catch {
-    throw new TypeError('Cannot resolve id references for non-DOM nodes');
+    const rootVNodes = getRootChildren(vNode);
+    if (!rootVNodes) {
+      throw new TypeError('Cannot resolve id references for non-DOM nodes');
+    }
+
+    for (const token of tokenList(attrValue)) {
+      let result = null;
+
+      for (const root of rootVNodes) {
+        const foundNode = querySelectorAll(root, `#${token}`)[0];
+        if (foundNode) {
+          result = foundNode;
+          break;
+        }
+      }
+
+      results.push(result);
+    }
   }
+
+  return results;
 }
 
 export default idrefs;

lib/commons/dom/index.js

@@ -14,6 +14,7 @@ export { default as getElementCoordinates } from './get-element-coordinates';
 export { default as getElementStack } from './get-element-stack';
 export { default as getModalDialog } from './get-modal-dialog';
 export { default as getOverflowHiddenAncestors } from './get-overflow-hidden-ancestors';
+export { default as getRootChildren } from './get-root-children';
 export { default as getRootNode } from './get-root-node';
 export { default as getScrollOffset } from './get-scroll-offset';
 export { default as getTabbableElements } from './get-tabbable-elements';

lib/commons/text/accessible-text.js

@@ -1,5 +1,5 @@
 import accessibleTextVirtual from './accessible-text-virtual';
-import { getNodeFromTree } from '../../core/utils';
+import { nodeLookup } from '../../core/utils';
 
 /**
  * Finds virtual node and calls accessibleTextVirtual()
@@ -12,8 +12,8 @@ import { getNodeFromTree } from '../../core/utils';
  * @return {string}
  */
 function accessibleText(element, context) {
-  const virtualNode = getNodeFromTree(element); // throws an exception on purpose if axe._tree not correct
-  return accessibleTextVirtual(virtualNode, context);
+  const { vNode } = nodeLookup(element);
+  return accessibleTextVirtual(vNode, context);
 }
 
 export default accessibleText;

test/commons/dom/get-root-children.js

@@ -0,0 +1,30 @@
+describe('dom.getRootChildren', () => {
+  const getRootChildren = axe.commons.dom.getRootChildren;
+  const fixture = document.querySelector('#fixture');
+  const queryShadowFixture = axe.testUtils.queryShadowFixture;
+
+  it('should return the children of the root node of a complete tree', () => {
+    axe.setup();
+    const expected = axe.utils.getNodeFromTree(
+      document.documentElement
+    ).children;
+    assert.deepEqual(getRootChildren(fixture), expected);
+  });
+
+  it('should return undefined for disconnected tree', () => {
+    axe.setup();
+    axe.utils.getNodeFromTree(document.documentElement).parent = undefined;
+    assert.isUndefined(getRootChildren(fixture));
+  });
+
+  it('should throw for shadow DOM', () => {
+    const target = queryShadowFixture(
+      '<div id="shadow"></div>',
+      '<div id="target">Hello World</div><div id="child1"></div><div id="child2"></div>'
+    );
+
+    assert.throws(() => {
+      getRootChildren(target);
+    });
+  });
+});