suggestions

Author: straker

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

@@ -35,11 +35,12 @@ export default function getAriaValue(node, attrName, options = {}) {
     return null;
   }
 
+  const { vNode, domNode } = nodeLookup(node);
   const { type } = attrStandard;
   const { lowercase } = options;
 
   for (const { source, getValue } of sources) {
-    let value = getValue(node, attrStandard, attrName);
+    let value = getValue(vNode, domNode, attrStandard, attrName);
     if (value === null || value === undefined) {
       continue;
     }
@@ -68,8 +69,7 @@ export default function getAriaValue(node, attrName, options = {}) {
   return null;
 }
 
-function getAttributeValue(node, attrStandard, attrName) {
-  const { vNode, domNode } = nodeLookup(node);
+function getAttributeValue(vNode, domNode, attrStandard, attrName) {
   const { type } = attrStandard;
   const value = vNode ? vNode.attr(attrName) : domNode.getAttribute(attrName);
 
@@ -85,24 +85,28 @@ function getAttributeValue(node, attrStandard, attrName) {
   }
 
   // return null for the attribute if the value is empty but the idref(s) prop is not
-  const propValue = getPropertyValue(node, attrStandard);
+  const propValue = getPropertyValue(vNode, domNode, attrStandard);
   const propEmpty = Array.isArray(propValue) ? propValue.length : !!propValue;
   return propEmpty ? null : value;
 }
 
-function getPropertyValue(node, attrStandard) {
-  const { domNode } = nodeLookup(node);
+function getPropertyValue(vNode, domNode, attrStandard) {
   const { prop } = attrStandard;
   return prop && domNode ? domNode[prop] : null;
 }
 
-function getInternalValue(node, attrStandard) {
-  const { vNode, domNode } = nodeLookup(node);
+function getInternalValue(vNode, domNode, attrStandard) {
   const { prop } = attrStandard;
   if (!prop) {
     return null;
   }
 
+  // feature flag to enable internals. uses globalThis.axe as it can be run outside of axe context
+  // TODO: remove when feature is fully enabled
+  if (!axe._enableElementInternals) {
+    return null;
+  }
+
   const internals = vNode
     ? vNode.elementInternals
     : getElementInternals(domNode);

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

@@ -16,31 +16,37 @@ export default function hasAriaValue(node, attrName) {
     throw new TypeError(`Attribute ${attrName} is not an ARIA attribute`);
   }
 
+  const { vNode, domNode } = nodeLookup(node);
+
   return (
-    hasAttributeValue(node, attrName) ||
-    hasPropertyValue(node, attrStandard) ||
-    hasInternalValue(node, attrStandard)
+    hasAttributeValue(vNode, domNode, attrName) ||
+    hasPropertyValue(vNode, domNode, attrStandard) ||
+    hasInternalValue(vNode, domNode, attrStandard)
   );
 }
 
-function hasAttributeValue(node, attrName) {
-  const { vNode, domNode } = nodeLookup(node);
+function hasAttributeValue(vNode, domNode, attrName) {
   return vNode ? vNode.hasAttr(attrName) : domNode.hasAttribute(attrName);
 }
 
-function hasPropertyValue(node, attrStandard) {
+function hasPropertyValue(vNode, domNode, attrStandard) {
   const { prop } = attrStandard;
-  const { domNode } = nodeLookup(node);
   if (prop && domNode) {
     const propValue = domNode[prop];
     return propValue !== null && propValue !== undefined;
   }
   return false;
 }
 
-function hasInternalValue(node, attrStandard) {
-  const { vNode, domNode } = nodeLookup(node);
+function hasInternalValue(vNode, domNode, attrStandard) {
   const { prop } = attrStandard;
+
+  // feature flag to enable internals. uses globalThis.axe as it can be run outside of axe context
+  // TODO: remove when feature is fully enabled
+  if (!axe._enableElementInternals) {
+    return false;
+  }
+
   const internals = vNode
     ? vNode.elementInternals
     : getElementInternals(domNode);

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

@@ -3,6 +3,10 @@ describe('aria.getAriaValue', () => {
   const getAriaValue = axe.commons.aria.getAriaValue;
   const SerialVirtualNode = axe.SerialVirtualNode;
 
+  afterEach(() => {
+    axe._enableElementInternals = true;
+  });
+
   it('returns the aria attribute value', () => {
     const vNode = queryFixture(
       html`<div id="target" aria-label="hello"></div>`
@@ -173,6 +177,7 @@ describe('aria.getAriaValue', () => {
   });
 
   it('returns element internals from an element not in the tree', () => {
+    axe._elemen;
     fixture.innerHTML = html`<testutils-element
       id="target"
       with-aria-label="hello"
@@ -186,6 +191,17 @@ describe('aria.getAriaValue', () => {
     });
   });
 
+  it('does not return element internals from an element not in the tree when feature flag is off', () => {
+    axe._enableElementInternals = false;
+    fixture.innerHTML = html`<testutils-element
+      id="target"
+      with-aria-label="hello"
+    ></testutils-element>`;
+    const node = fixture.querySelector('#target');
+
+    assert.isNull(getAriaValue(node, 'aria-label'));
+  });
+
   describe('idref', () => {
     it('returns the attribute value over the property value', () => {
       const vNode = queryFixture(

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

@@ -3,6 +3,10 @@ describe('aria.hasAriaValue', () => {
   const hasAriaValue = axe.commons.aria.hasAriaValue;
   const SerialVirtualNode = axe.SerialVirtualNode;
 
+  afterEach(() => {
+    axe._enableElementInternals = true;
+  });
+
   it('returns true if element has attribute', () => {
     const vNode = queryFixture(
       html`<div id="target" aria-label="hello"></div>`
@@ -95,6 +99,17 @@ describe('aria.hasAriaValue', () => {
     assert.isTrue(hasAriaValue(node, 'aria-label'));
   });
 
+  it('returns false if element not in the tree has elementInternals but feature flag is off', () => {
+    axe._enableElementInternals = false;
+    fixture.innerHTML = html`<testutils-element
+      id="target"
+      with-aria-label="hello"
+    ></testutils-element>`;
+    const node = fixture.querySelector('#target');
+
+    assert.isFalse(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