chore: support elements not in tree for get/hasAriaValue

lib/commons/aria/get-aria-value.js

@@ -1,4 +1,4 @@
-import { nodeLookup } from '../../core/utils';
+import { nodeLookup, getElementInternals } from '../../core/utils';
 import standards from '../../standards';
 
 const idrefTypes = ['idref', 'idrefs'];
@@ -36,11 +36,10 @@ export default function getAriaValue(node, attrName, options = {}) {
   }
 
   const { type } = attrStandard;
-  const { vNode } = nodeLookup(node);
   const { lowercase } = options;
 
   for (const { source, getValue } of sources) {
-    let value = getValue(vNode, attrStandard, attrName);
+    let value = getValue(node, attrStandard, attrName);
     if (value === null || value === undefined) {
       continue;
     }
@@ -69,9 +68,10 @@ export default function getAriaValue(node, attrName, options = {}) {
   return null;
 }
 
-function getAttributeValue(vNode, attrStandard, attrName) {
+function getAttributeValue(node, attrStandard, attrName) {
+  const { vNode, domNode } = nodeLookup(node);
   const { type } = attrStandard;
-  const value = vNode.attr(attrName);
+  const value = vNode ? vNode.attr(attrName) : domNode.getAttribute(attrName);
 
   // setting an ARIA idref(s) prop value can result in empty attribute values, so we'll need extra processing for idref(s)
   // e.g. el.ariaLabelledByElements = [label]; el.getAttribute('aria-labelledby') === ''
@@ -90,12 +90,22 @@ function getAttributeValue(vNode, attrStandard, attrName) {
   return propEmpty ? null : value;
 }
 
-function getPropertyValue(vNode, attrStandard) {
+function getPropertyValue(node, attrStandard) {
+  const { domNode } = nodeLookup(node);
   const { prop } = attrStandard;
-  return prop && vNode.actualNode ? vNode.actualNode[prop] : null;
+  return prop && domNode ? domNode[prop] : null;
 }
 
-function getInternalValue(vNode, attrStandard) {
+function getInternalValue(node, attrStandard) {
+  const { vNode, domNode } = nodeLookup(node);
   const { prop } = attrStandard;
-  return prop && vNode.elementInternals ? vNode.elementInternals[prop] : null;
+  if (!prop) {
+    return null;
+  }
+
+  const internals = vNode
+    ? vNode.elementInternals
+    : getElementInternals(domNode);
+
+  return internals ? internals[prop] : null;
 }

lib/commons/aria/has-aria-value.js

@@ -1,4 +1,4 @@
-import { nodeLookup } from '../../core/utils';
+import { nodeLookup, getElementInternals } from '../../core/utils';
 import standards from '../../standards';
 
 /**
@@ -16,31 +16,37 @@ export default function hasAriaValue(node, attrName) {
     throw new TypeError(`Attribute ${attrName} is not an ARIA attribute`);
   }
 
-  const { vNode } = nodeLookup(node);
   return (
-    hasAttributeValue(vNode, attrName) ||
-    hasPropertyValue(vNode, attrStandard) ||
-    hasInternalValue(vNode, attrStandard)
+    hasAttributeValue(node, attrName) ||
+    hasPropertyValue(node, attrStandard) ||
+    hasInternalValue(node, attrStandard)
   );
 }
 
-function hasAttributeValue(vNode, attrName) {
-  return vNode.hasAttr(attrName);
+function hasAttributeValue(node, attrName) {
+  const { vNode, domNode } = nodeLookup(node);
+  return vNode ? vNode.hasAttr(attrName) : domNode.hasAttribute(attrName);
 }
 
-function hasPropertyValue(vNode, attrStandard) {
+function hasPropertyValue(node, attrStandard) {
   const { prop } = attrStandard;
-  if (prop && vNode.actualNode) {
-    const propValue = vNode.actualNode[prop];
+  const { domNode } = nodeLookup(node);
+  if (prop && domNode) {
+    const propValue = domNode[prop];
     return propValue !== null && propValue !== undefined;
   }
   return false;
 }
 
-function hasInternalValue(vNode, attrStandard) {
+function hasInternalValue(node, attrStandard) {
+  const { vNode, domNode } = nodeLookup(node);
   const { prop } = attrStandard;
-  if (prop && vNode.elementInternals) {
-    const internalsValue = vNode.elementInternals[prop];
+  const internals = vNode
+    ? vNode.elementInternals
+    : getElementInternals(domNode);
+
+  if (prop && internals) {
+    const internalsValue = internals[prop];
     return internalsValue !== null && internalsValue !== undefined;
   }
   return false;

test/commons/aria/get-aria-value.js

@@ -161,6 +161,31 @@ describe('aria.getAriaValue', () => {
     assert.isNull(getAriaValue(vNode, 'aria-label'));
   });
 
+  it('returns attribute from an element not in the tree', () => {
+    fixture.innerHTML = html`<div id="target" aria-label="hello"></div>`;
+    const node = fixture.querySelector('#target');
+
+    const result = getAriaValue(node, 'aria-label');
+    assert.deepEqual(result, {
+      value: 'hello',
+      source: 'attribute'
+    });
+  });
+
+  it('returns element internals from an element not in the tree', () => {
+    fixture.innerHTML = html`<testutils-element
+      id="target"
+      with-aria-label="hello"
+    ></testutils-element>`;
+    const node = fixture.querySelector('#target');
+
+    const result = getAriaValue(node, 'aria-label');
+    assert.deepEqual(result, {
+      value: 'hello',
+      source: 'internals'
+    });
+  });
+
   describe('idref', () => {
     it('returns the attribute value over the property value', () => {
       const vNode = queryFixture(

test/commons/aria/has-aria-value.js

@@ -1,5 +1,5 @@
 describe('aria.hasAriaValue', () => {
-  const { queryFixture, html } = axe.testUtils;
+  const { queryFixture, fixture, html } = axe.testUtils;
   const hasAriaValue = axe.commons.aria.hasAriaValue;
   const SerialVirtualNode = axe.SerialVirtualNode;
 
@@ -78,6 +78,23 @@ describe('aria.hasAriaValue', () => {
     assert.isFalse(hasAriaValue(vNode, 'aria-label'));
   });
 
+  it('returns true if element not in the tree has attribute', () => {
+    fixture.innerHTML = html`<div id="target" aria-label="hello"></div>`;
+    const node = fixture.querySelector('#target');
+
+    assert.isTrue(hasAriaValue(node, 'aria-label'));
+  });
+
+  it('returns true if element not in the tree has elementInternals', () => {
+    fixture.innerHTML = html`<testutils-element
+      id="target"
+      with-aria-label="hello"
+    ></testutils-element>`;
+    const node = fixture.querySelector('#target');
+
+    assert.isTrue(hasAriaValue(node, 'aria-label'));
+  });
+
   describe('SerialVirtualNode', () => {
     it('returns true if element has attribute', () => {
       // SerialVirtualNode will not support `props` or `elementInternals` so everything must be part of the `attributes` property