fix(idref): fallback to qsa

lib/commons/dom/idrefs.js

@@ -1,5 +1,10 @@
 import getRootNode from './get-root-node';
-import { tokenList } from '../../core/utils';
+import {
+  tokenList,
+  nodeLookup,
+  closest,
+  querySelectorAll
+} from '../../core/utils';
 
 /**
  * Get elements referenced via a space-separated token attribute;
@@ -18,24 +23,29 @@ import { tokenList } from '../../core/utils';
  *
  */
 function idrefs(node, attr) {
-  node = node.actualNode || node;
+  const { vNode, domNode } = nodeLookup(node);
+  const result = [];
+  let doc;
+  const attrValue = vNode?.attr(attr) ?? node.getAttribute(attr);
 
-  try {
-    const doc = getRootNode(node);
-    const result = [];
-    let attrValue = node.getAttribute(attr);
+  if (attrValue) {
+    for (const token of tokenList(attrValue)) {
+      try {
+        doc ??= getRootNode(domNode);
+        result.push(doc.getElementById(token));
+      } catch {
+        // don't run QSA on detached nodes or partial trees
+        const root = closest(vNode, 'html');
+        if (!root) {
+          throw new TypeError('Cannot resolve id references for non-DOM nodes');
+        }
 
-    if (attrValue) {
-      attrValue = tokenList(attrValue);
-      for (let index = 0; index < attrValue.length; index++) {
-        result.push(doc.getElementById(attrValue[index]));
+        result.push(querySelectorAll(root, `#${token}`, vNode.shadowId)?.[0]);
       }
     }
-
-    return result;
-  } catch {
-    throw new TypeError('Cannot resolve id references for non-DOM nodes');
   }
+
+  return result;
 }
 
 export default idrefs;

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); // throws an exception on purpose if axe._tree not correct
+  return accessibleTextVirtual(vNode, context);
 }
 
 export default accessibleText;

test/commons/dom/idrefs.js

@@ -1,40 +1,36 @@
 function createContentIDR() {
   'use strict';
-  var group = document.createElement('div');
+  const group = document.createElement('div');
   group.id = 'target';
   return group;
 }
 
 function makeShadowTreeIDR(node) {
   'use strict';
-  var root = node.attachShadow({ mode: 'open' });
-  var div = document.createElement('div');
+  const root = node.attachShadow({ mode: 'open' });
+  const div = document.createElement('div');
   div.className = 'parent';
   div.setAttribute('target', 'target');
   root.appendChild(div);
   div.appendChild(createContentIDR());
 }
 
-describe('dom.idrefs', function () {
+describe('dom.idrefs', () => {
   'use strict';
 
-  var fixture = document.getElementById('fixture');
-  var shadowSupported = axe.testUtils.shadowSupport.v1;
+  const fixture = document.getElementById('fixture');
+  const shadowSupported = axe.testUtils.shadowSupport.v1;
 
-  afterEach(function () {
-    fixture.innerHTML = '';
-  });
-
-  it('should find referenced nodes by ID', function () {
+  it('should find referenced nodes by ID', () => {
     fixture.innerHTML =
       '<div aria-cats="target1 target2" id="start"></div>' +
       '<div id="target1"></div><div id="target2"></div>';
 
-    var start = document.getElementById('start'),
-      expected = [
-        document.getElementById('target1'),
-        document.getElementById('target2')
-      ];
+    const start = document.getElementById('start');
+    const expected = [
+      document.getElementById('target1'),
+      document.getElementById('target2')
+    ];
 
     assert.deepEqual(
       axe.commons.dom.idrefs(start, 'aria-cats'),
@@ -45,13 +41,13 @@ describe('dom.idrefs', function () {
 
   (shadowSupported ? it : xit)(
     'should find only referenced nodes within the current root: shadow DOM',
-    function () {
+    () => {
       // shadow DOM v1 - note: v0 is compatible with this code, so no need
       // to specifically test this
       fixture.innerHTML = '<div target="target"><div id="target"></div></div>';
       makeShadowTreeIDR(fixture.firstChild);
-      var start = fixture.firstChild.shadowRoot.querySelector('.parent');
-      var expected = [fixture.firstChild.shadowRoot.getElementById('target')];
+      const start = fixture.firstChild.shadowRoot.querySelector('.parent');
+      const expected = [fixture.firstChild.shadowRoot.getElementById('target')];
 
       assert.deepEqual(
         axe.commons.dom.idrefs(start, 'target'),
@@ -63,14 +59,14 @@ describe('dom.idrefs', function () {
 
   (shadowSupported ? it : xit)(
     'should find only referenced nodes within the current root: document',
-    function () {
+    () => {
       // shadow DOM v1 - note: v0 is compatible with this code, so no need
       // to specifically test this
       fixture.innerHTML =
         '<div target="target" class="parent"><div id="target"></div></div>';
       makeShadowTreeIDR(fixture.firstChild);
-      var start = fixture.querySelector('.parent');
-      var expected = [document.getElementById('target')];
+      const start = fixture.querySelector('.parent');
+      const expected = [document.getElementById('target')];
 
       assert.deepEqual(
         axe.commons.dom.idrefs(start, 'target'),
@@ -80,17 +76,17 @@ describe('dom.idrefs', function () {
     }
   );
 
-  it('should insert null if a reference is not found', function () {
+  it('should insert null if a reference is not found', () => {
     fixture.innerHTML =
       '<div aria-cats="target1 target2 target3" id="start"></div>' +
       '<div id="target1"></div><div id="target2"></div>';
 
-    var start = document.getElementById('start'),
-      expected = [
-        document.getElementById('target1'),
-        document.getElementById('target2'),
-        null
-      ];
+    const start = document.getElementById('start');
+    const expected = [
+      document.getElementById('target1'),
+      document.getElementById('target2'),
+      null
+    ];
 
     assert.deepEqual(
       axe.commons.dom.idrefs(start, 'aria-cats'),
@@ -99,22 +95,24 @@ describe('dom.idrefs', function () {
     );
   });
 
-  it('should not fail when extra whitespace is used', function () {
+  it('should not fail when extra whitespace is used', () => {
     fixture.innerHTML =
       '<div aria-cats="    \ttarget1 \n  target2  target3 \n\t" id="start"></div>' +
       '<div id="target1"></div><div id="target2"></div>';
 
-    var start = document.getElementById('start'),
-      expected = [
-        document.getElementById('target1'),
-        document.getElementById('target2'),
-        null
-      ];
+    const start = document.getElementById('start');
+    const expected = [
+      document.getElementById('target1'),
+      document.getElementById('target2'),
+      null
+    ];
 
     assert.deepEqual(
       axe.commons.dom.idrefs(start, 'aria-cats'),
       expected,
       'Should find it!'
     );
   });
+
+  // virtual-node tests test throwing for non-DOM nodes and working with complete trees
 });