feat(rules): support ARIA element internals properties

lib/rules/aria-hidden-focus-matches.js

@@ -1,4 +1,6 @@
 import { getComposedParent } from '../commons/dom';
+import { getAriaValue } from '../commons/aria';
+import { getNodeFromTree } from '../core/utils';
 
 /**
  * Only match the outer-most `aria-hidden=true` element
@@ -9,7 +11,14 @@ function shouldMatchElement(el) {
   if (!el) {
     return true;
   }
-  if (el.getAttribute('aria-hidden') === 'true') {
+
+  const vNode = getNodeFromTree(el);
+
+  // the composed parent could or could not be included in the tree so we'll need to handle either case
+  const ariaHidden = vNode
+    ? getAriaValue(vNode, 'aria-hidden', { lowercase: true })?.value
+    : el.getAttribute('aria-hidden');
+  if (ariaHidden === 'true') {
     return false;
   }
   return shouldMatchElement(getComposedParent(el));

lib/rules/color-contrast-matches.js

@@ -5,7 +5,8 @@ import {
   visuallyOverlaps,
   getRootNode,
   isInert,
-  getOverflowHiddenAncestors
+  getOverflowHiddenAncestors,
+  getResolvedRefs
 } from '../commons/dom';
 import {
   visibleVirtual,
@@ -115,9 +116,23 @@ function colorContrastMatches(node, virtualNode) {
     if (ancestorNode.props.id) {
       const virtualControls = getAccessibleRefs(ancestorNode)
         .filter(control => {
-          return tokenList(
-            control.getAttribute('aria-labelledby') || ''
-          ).includes(ancestorNode.props.id);
+          const vControl = getNodeFromTree(control);
+          const labelledby =
+            vControl?.attr('aria-labelledby') ??
+            control.getAttribute('aria-labelledby');
+          if (labelledby) {
+            return tokenList(labelledby).includes(ancestorNode.props.id);
+          }
+          if (vControl) {
+            try {
+              return getResolvedRefs(vControl, 'aria-labelledby').some(
+                ref => ref?.actualNode === ancestorNode.actualNode
+              );
+            } catch {
+              return false;
+            }
+          }
+          return false;
         })
         .map(control => getNodeFromTree(control));
 

test/rule-matches/aria-hidden-focus-matches.js

@@ -12,13 +12,13 @@ describe('aria-hidden-focus-matches', () => {
     assert.isFunction(rule.matches);
   });
 
-  it('return true when there is no parent with aria-hidden', () => {
+  it('returns true if no parent has aria-hidden', () => {
     const vNode = queryFixture(html` <div id="target"></div> `);
     const actual = rule.matches(vNode.actualNode);
     assert.isTrue(actual);
   });
 
-  it('return false when has a parent element with aria-hidden', () => {
+  it('returns false if a parent has aria-hidden', () => {
     const vNode = queryFixture(html`
       <div aria-hidden="true">
         <div id="target" aria-hidden="true"></div>
@@ -28,7 +28,7 @@ describe('aria-hidden-focus-matches', () => {
     assert.isFalse(actual);
   });
 
-  it('return false when has any parent element with aria-hidden', () => {
+  it('returns false if an ancestor has aria-hidden', () => {
     const vNode = queryFixture(html`
       <div aria-hidden="true">
         <div>
@@ -40,7 +40,7 @@ describe('aria-hidden-focus-matches', () => {
     assert.isFalse(actual);
   });
 
-  it('return false when has any parent element with aria-hidden', () => {
+  it('returns false if an ancestor has aria-hidden but the node itself does not', () => {
     const vNode = queryFixture(html`
       <div aria-hidden="true">
         <div aria-hidden="true">
@@ -51,4 +51,16 @@ describe('aria-hidden-focus-matches', () => {
     const actual = rule.matches(vNode.actualNode);
     assert.isFalse(actual);
   });
+
+  it('returns false if a custom element ancestor has internals aria-hidden', () => {
+    const vNode = queryFixture(html`
+      <testutils-element with-aria-hidden="true">
+        <div aria-hidden="true">
+          <button id="target">btn</button>
+        </div>
+      </testutils-element>
+    `);
+    const actual = rule.matches(vNode.actualNode);
+    assert.isFalse(actual);
+  });
 });