test(label-content-name-mismatch): cover visually-hidden text exclusion

test/checks/label/label-content-name-mismatch.js

@@ -2,6 +2,7 @@ describe('label-content-name-mismatch tests', () => {
   const html = axe.testUtils.html;
 
   const queryFixture = axe.testUtils.queryFixture;
+  const queryShadowFixture = axe.testUtils.queryShadowFixture;
   const check = checks['label-content-name-mismatch'];
   const options = undefined;
 
@@ -224,4 +225,35 @@ describe('label-content-name-mismatch tests', () => {
       assert.isFalse(actual);
     }
   );
+
+  it('returns true when a visually-hidden child is excluded from the visible text', () => {
+    const vNode = queryFixture(
+      '<a id="target" href="#" aria-label="deque are great">' +
+        'deque <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0px,0px,0px,0px);">labs</span> are great' +
+        '</a>'
+    );
+    const actual = check.evaluate(vNode.actualNode, options, vNode);
+    assert.isTrue(actual);
+  });
+
+  it('returns false when the visible text alone is not contained in the accessible name', () => {
+    const vNode = queryFixture(
+      '<a id="target" href="#" aria-label="deque are great">' +
+        'deque <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0px,0px,0px,0px);">labs</span> are truly great' +
+        '</a>'
+    );
+    const actual = check.evaluate(vNode.actualNode, options, vNode);
+    assert.isFalse(actual);
+  });
+
+  it('returns true when a visually-hidden child inside shadow DOM is excluded from the visible text', () => {
+    const vNode = queryShadowFixture(
+      '<div id="shadow"></div>',
+      '<a id="target" href="#" aria-label="deque are great">' +
+        'deque <span style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0px,0px,0px,0px);">labs</span> are great' +
+        '</a>'
+    );
+    const actual = check.evaluate(vNode.actualNode, options, vNode);
+    assert.isTrue(actual);
+  });
 });

test/integration/rules/label-content-name-mismatch/label-content-name-mismatch.html

@@ -26,6 +26,20 @@
   </svg>
   Hello World
 </a>
+<a id="pass10" href="#" aria-label="deque are great">
+  deque
+  <span
+    style="
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0px, 0px, 0px, 0px);
+    "
+    >labs</span
+  >
+  are great
+</a>
 
 <!-- Fail -->
 <div id="fail1" role="link" aria-label="OK">Next</div>

test/integration/rules/label-content-name-mismatch/label-content-name-mismatch.json

@@ -19,7 +19,8 @@
     ["#pass6"],
     ["#pass7"],
     ["#pass8"],
-    ["#pass9"]
+    ["#pass9"],
+    ["#pass10"]
   ],
   "incomplete": [
     ["#incomplete1"],