fix(is-hidden-for-everyone): support content-visibility: hidden (#3690)

* fix(is-hidden-for-everyone): support content-visibility: hidden * Update test/commons/dom/is-hidden-for-everyone.js Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update test/commons/dom/visibility-methods.js Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update test/commons/dom/visibility-methods.js Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update test/commons/dom/visibility-methods.js Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
dequelabs · Oct 3, 2022 · 95cf6e7 · 95cf6e7
1 parent e9a399c
commit 95cf6e7
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 138 deletions.
diff --git a/lib/commons/dom/is-hidden-for-everyone.js b/lib/commons/dom/is-hidden-for-everyone.js
@@ -4,10 +4,11 @@ import memoize from '../../core/utils/memoize';
 import {
   nativelyHidden,
   displayHidden,
-  visibilityHidden
+  visibilityHidden,
+  contentVisibiltyHidden
 } from './visibility-methods';
 
-const hiddenMethods = [displayHidden, visibilityHidden];
+const hiddenMethods = [displayHidden, visibilityHidden, contentVisibiltyHidden];
 
 /**
  * Determine if an element is hidden from screenreaders and visual users

diff --git a/lib/commons/dom/visibility-methods.js b/lib/commons/dom/visibility-methods.js
@@ -56,6 +56,20 @@ export function visibilityHidden(vNode, { isAncestor } = {}) {
   );
 }
 
+/**
+ * Determine if an element is hidden using the content-visibility property
+ * @param {VirtualNode} vNode
+ * @return {Boolean}
+ */
+export function contentVisibiltyHidden(vNode, { isAncestor } = {}) {
+  // content-visibility only applies to descendants
+  // and does not hide the node with the property
+  return (
+    !!isAncestor &&
+    vNode.getComputedStylePropertyValue('content-visibility') === 'hidden'
+  );
+}
+
 /**
  * Determine if an element is hidden using the aria-hidden attribute
  * @param {VirtualNode} vNode

diff --git a/lib/core/_exposed-for-testing.js b/lib/core/_exposed-for-testing.js
@@ -27,6 +27,7 @@ import {
   nativelyHidden,
   displayHidden,
   visibilityHidden,
+  contentVisibiltyHidden,
   ariaHidden,
   opacityHidden,
   scrollHidden,
@@ -64,6 +65,7 @@ const _thisWillBeDeletedDoNotUse = {
       nativelyHidden,
       displayHidden,
       visibilityHidden,
+      contentVisibiltyHidden,
       ariaHidden,
       opacityHidden,
       scrollHidden,

diff --git a/test/commons/dom/is-hidden-for-everyone.js b/test/commons/dom/is-hidden-for-everyone.js
@@ -5,6 +5,7 @@ describe('dom.isHiddenForEveryone', function () {
   var shadowSupported = axe.testUtils.shadowSupport.v1;
   var isHiddenForEveryone = axe.commons.dom.isHiddenForEveryone;
   var queryFixture = axe.testUtils.queryFixture;
+  var contentVisibilitySupported = CSS.supports('content-visibility: hidden');
 
   function createContentSlotted(mainProps, targetProps) {
     var group = document.createElement('div');
@@ -287,6 +288,26 @@ describe('dom.isHiddenForEveryone', function () {
     }
   );
 
+  (contentVisibilitySupported ? it : xit)(
+    'should return true for `content-visibility: hidden` parent',
+    () => {
+      const vNode = queryFixture(
+        '<div style="content-visibility: hidden"><div id="target">Hidden</div></div>'
+      );
+      assert.isTrue(isHiddenForEveryone(vNode));
+    }
+  );
+
+  (contentVisibilitySupported ? it : xit)(
+    'should return false for `content-visibility: hidden`',
+    () => {
+      const vNode = queryFixture(
+        '<div id="target" style="content-visibility: hidden"></div>'
+      );
+      assert.isFalse(isHiddenForEveryone(vNode));
+    }
+  );
+
   describe('SerialVirtualNode', function () {
     it('should return false on detached virtual nodes', function () {
       var vNode = new axe.SerialVirtualNode({