fix(idref): fallback to qsa

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

@@ -0,0 +1,38 @@
+import { nodeLookup } from '../../core/utils';
+
+/**
+ * Return the document or document fragment (shadow DOM)
+ * @method getRootVNodes
+ * @memberof axe.commons.dom
+ * @instance
+ * @param {Element|VirtualNode} node
+ * @returns {VirtualNode[]}
+ */
+export default function getRootVNodes(node) {
+  const { vNode } = nodeLookup(node);
+
+  if (vNode._rootNodes) {
+    return vNode._rootNodes;
+  }
+
+  // top of tree
+  if (vNode.parent === null) {
+    return [vNode];
+  }
+
+  // disconnected tree
+  if (!vNode.parent) {
+    return undefined;
+  }
+
+  // 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
+  if (vNode.shadowId !== vNode.parent.shadowId) {
+    return [...vNode.parent.children];
+  }
+
+  vNode._rootNodes = getRootVNodes(vNode.parent);
+  return vNode._rootNodes;
+}

lib/commons/dom/idrefs.js

@@ -1,5 +1,10 @@
-import getRootNode from './get-root-node';
-import { tokenList } from '../../core/utils';
+import getRootVNodes from './get-root-vnodes';
+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 = getRootVNodes(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

@@ -15,6 +15,7 @@ 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 getRootNode } from './get-root-node';
+export { default as getRootVNodes } from './get-root-vnodes';
 export { default as getScrollOffset } from './get-scroll-offset';
 export { default as getTabbableElements } from './get-tabbable-elements';
 export { default as getTargetRects } from './get-target-rects';

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-vnodes.js

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