fix(page-no-duplicate): don't count elements hidden from screenreader…

…s as potential duplicates (#3051)
dequelabs · Jun 29, 2021 · 5e0098b · 5e0098b
1 parent e93fdb1
commit 5e0098b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/lib/checks/generic/page-no-duplicate-evaluate.js b/lib/checks/generic/page-no-duplicate-evaluate.js
@@ -18,7 +18,7 @@ function pageNoDuplicateEvaluate(node, options, virtualNode) {
   cache.set(key, true);
 
   let elms = querySelectorAllFilter(axe._tree[0], options.selector, elm =>
-    isVisible(elm.actualNode)
+    isVisible(elm.actualNode, true)
   );
 
   // Filter elements that, within certain contexts, don't map their role.

diff --git a/test/checks/keyboard/page-no-duplicate.js b/test/checks/keyboard/page-no-duplicate.js
@@ -59,6 +59,15 @@ describe('page-no-duplicate', function() {
       assert.isTrue(check.evaluate.apply(checkContext, params));
     });
 
+    it('should return true if there is more than one element matching the selector but only one is visible to screenreaders', function() {
+      var options = { selector: 'main' };
+      var params = checkSetup(
+        '<div><main id="target" aria-hidden="true"></main><main id="dup"></main></div>',
+        options
+      );
+      assert.isTrue(check.evaluate.apply(checkContext, params));
+    });
+
     (shadowSupported ? it : xit)(
       'should return false if there is a second matching element inside the shadow dom',
       function() {
@@ -81,6 +90,30 @@ describe('page-no-duplicate', function() {
         ]);
       }
     );
+
+    (shadowSupported ? it : xit)(
+      'should return true if there is a second matching element inside the shadow dom but only one is visible to screenreaders',
+      function() {
+        var options = { selector: 'main' };
+        var div = document.createElement('div');
+        div.innerHTML =
+          '<div id="shadow"></div><main id="target" aria-hidden="true"></main>';
+
+        var shadow = div
+          .querySelector('#shadow')
+          .attachShadow({ mode: 'open' });
+        shadow.innerHTML = '<main></main>';
+        axe.testUtils.fixtureSetup(div);
+        var vNode = axe.utils.querySelectorAll(axe._tree, '#target')[0];
+
+        assert.isTrue(
+          check.evaluate.call(checkContext, vNode.actualNode, options, vNode)
+        );
+        assert.deepEqual(checkContext._relatedNodes, [
+          shadow.querySelector('main')
+        ]);
+      }
+    );
   });
 
   describe('option.nativeScopeFilter', function() {