feat: deprecate and replace dom.isVisible, utils.isHidden, and dom.is…

…HiddenWithCss (#3351) * replace with dom.isVisibleOnScreen, dom.isVisibleForScreenreader, and dom.isHiddenForEveryone (respectively) * chore: refactor isVisible * comment * fix firefox * Update lib/commons/dom/is-visible.js Co-authored-by: Wilco Fiers <[email protected]> * update per suggestions * Update lib/commons/dom/is-visible.js Co-authored-by: Wilco Fiers <[email protected]> * Update lib/commons/dom/is-visible.js Co-authored-by: Wilco Fiers <[email protected]> * fixes * revert changes * is-hidden-for-everyone * functions done * revert files * fix lint * finish refactor * missed * fixes * revert files * finish tests * fix polyfill * fix test * Update lib/commons/dom/is-modal-open.js Co-authored-by: Wilco Fiers <[email protected]> * suggestions * Update lib/commons/dom/visibility-functions.js Co-authored-by: Wilco Fiers <[email protected]> * suggestions * suggestions * memoize correctly * memoize for real this time * uni tests * guard * reset eslintrc * merge * changes * fix lint Co-authored-by: Wilco Fiers <[email protected]>
dequelabs · Sep 21, 2022 · 1ae2ac0 · 1ae2ac0
1 parent 280815e
commit 1ae2ac0
Show file tree

Hide file tree

Showing 51 changed files with 2,073 additions and 269 deletions.
diff --git a/lib/checks/aria/aria-allowed-role-evaluate.js b/lib/checks/aria/aria-allowed-role-evaluate.js
@@ -1,4 +1,4 @@
-import { isVisible } from '../../commons/dom';
+import { isVisibleForScreenreader } from '../../commons/dom';
 import { getElementUnallowedRoles } from '../../commons/aria';
 
 /**
@@ -29,7 +29,7 @@ function ariaAllowedRoleEvaluate(node, options = {}, virtualNode) {
   const unallowedRoles = getElementUnallowedRoles(virtualNode, allowImplicit);
   if (unallowedRoles.length) {
     this.data(unallowedRoles);
-    if (!isVisible(virtualNode, true)) {
+    if (!isVisibleForScreenreader(virtualNode)) {
       // flag hidden elements for review
       return undefined;
     }

diff --git a/lib/checks/aria/aria-errormessage-evaluate.js b/lib/checks/aria/aria-errormessage-evaluate.js
@@ -1,7 +1,7 @@
 import standards from '../../standards';
 import { idrefs } from '../../commons/dom';
 import { tokenList } from '../../core/utils';
-import { isVisible } from '../../commons/dom';
+import { isVisibleForScreenreader } from '../../commons/dom';
 /**
  * Check if `aria-errormessage` references an element that also uses a technique to announce the message (aria-live, aria-describedby, etc.).
  *
@@ -55,7 +55,7 @@ function ariaErrormessageEvaluate(node, options, virtualNode) {
     }
 
     if (idref) {
-      if (!isVisible(idref, true)) {
+      if (!isVisibleForScreenreader(idref)) {
         this.data({
           messageKey: 'hidden',
           values: tokenList(attr)

diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
@@ -1,4 +1,4 @@
-import { isVisible } from '../../commons/dom';
+import { isVisibleOnScreen } from '../../commons/dom';
 import {
   visibleVirtual,
   hasUnicode,
@@ -29,7 +29,7 @@ export default function colorContrastEvaluate(node, options, virtualNode) {
     pseudoSizeThreshold
   } = options;
 
-  if (!isVisible(node, false)) {
+  if (!isVisibleOnScreen(node)) {
     this.data({ messageKey: 'hidden' });
     return true;
   }

diff --git a/lib/checks/generic/has-descendant-evaluate.js b/lib/checks/generic/has-descendant-evaluate.js
@@ -1,5 +1,5 @@
 import { querySelectorAllFilter } from '../../core/utils';
-import { isVisible, isModalOpen } from '../../commons/dom';
+import { isVisibleForScreenreader, isModalOpen } from '../../commons/dom';
 
 function hasDescendant(node, options, virtualNode) {
   if (!options || !options.selector || typeof options.selector !== 'string') {
@@ -15,7 +15,7 @@ function hasDescendant(node, options, virtualNode) {
   const matchingElms = querySelectorAllFilter(
     virtualNode,
     options.selector,
-    vNode => isVisible(vNode.actualNode, true)
+    vNode => isVisibleForScreenreader(vNode)
   );
   this.relatedNodes(matchingElms.map(vNode => vNode.actualNode));
   return matchingElms.length > 0;

diff --git a/lib/checks/generic/page-no-duplicate-evaluate.js b/lib/checks/generic/page-no-duplicate-evaluate.js
@@ -1,6 +1,6 @@
 import cache from '../../core/base/cache';
 import { querySelectorAllFilter } from '../../core/utils';
-import { isVisible, findUpVirtual } from '../../commons/dom';
+import { isVisibleForScreenreader, findUpVirtual } from '../../commons/dom';
 
 function pageNoDuplicateEvaluate(node, options, virtualNode) {
   if (!options || !options.selector || typeof options.selector !== 'string') {
@@ -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, true)
+    isVisibleForScreenreader(elm)
   );
 
   // Filter elements that, within certain contexts, don't map their role.

diff --git a/lib/checks/keyboard/accesskeys-evaluate.js b/lib/checks/keyboard/accesskeys-evaluate.js
@@ -1,7 +1,7 @@
-import { isVisible } from '../../commons/dom';
+import { isVisibleOnScreen } from '../../commons/dom';
 
 function accesskeysEvaluate(node) {
-  if (isVisible(node, false)) {
+  if (isVisibleOnScreen(node)) {
     this.data(node.getAttribute('accesskey'));
     this.relatedNodes([node]);
   }

diff --git a/lib/checks/label/explicit-evaluate.js b/lib/checks/label/explicit-evaluate.js
@@ -1,4 +1,4 @@
-import { getRootNode, isVisible } from '../../commons/dom';
+import { getRootNode, isVisibleOnScreen } from '../../commons/dom';
 import { accessibleText } from '../../commons/text';
 import { escapeSelector } from '../../core/utils';
 
@@ -16,7 +16,7 @@ function explicitEvaluate(node, options, virtualNode) {
       try {
         return labels.some(label => {
           // defer to hidden-explicit-label check for better messaging
-          if (!isVisible(label)) {
+          if (!isVisibleOnScreen(label)) {
             return true;
           } else {
             return !!accessibleText(label);

diff --git a/lib/checks/label/hidden-explicit-label-evaluate.js b/lib/checks/label/hidden-explicit-label-evaluate.js
@@ -1,4 +1,4 @@
-import { getRootNode, isVisible } from '../../commons/dom';
+import { getRootNode, isVisibleForScreenreader } from '../../commons/dom';
 import { accessibleTextVirtual } from '../../commons/text';
 import { escapeSelector } from '../../core/utils';
 
@@ -12,7 +12,7 @@ function hiddenExplicitLabelEvaluate(node, options, virtualNode) {
     const id = escapeSelector(node.getAttribute('id'));
     const label = root.querySelector(`label[for="${id}"]`);
 
-    if (label && !isVisible(label, true)) {
+    if (label && !isVisibleForScreenreader(label)) {
       let name;
       try {
         name = accessibleTextVirtual(virtualNode).trim();

diff --git a/lib/checks/label/multiple-label-evaluate.js b/lib/checks/label/multiple-label-evaluate.js
@@ -1,4 +1,4 @@
-import { getRootNode, isVisible, idrefs } from '../../commons/dom';
+import { getRootNode, isVisibleOnScreen, isVisibleForScreenreader, idrefs } from '../../commons/dom';
 import { escapeSelector } from '../../core/utils';
 
 function multipleLabelEvaluate(node) {
@@ -10,7 +10,7 @@ function multipleLabelEvaluate(node) {
 
   if (labels.length) {
     // filter out CSS hidden labels because they're fine
-    labels = labels.filter(label => isVisible(label));
+    labels = labels.filter(label => isVisibleOnScreen(label));
   }
 
   while (parent) {
@@ -27,7 +27,7 @@ function multipleLabelEvaluate(node) {
 
   // more than 1 CSS visible label
   if (labels.length > 1) {
-    const ATVisibleLabels = labels.filter(label => isVisible(label, true));
+    const ATVisibleLabels = labels.filter(label => isVisibleForScreenreader(label));
     // more than 1 AT visible label will fail IOS/Safari/VO even with aria-labelledby
     if (ATVisibleLabels.length > 1) {
       return undefined;

diff --git a/lib/checks/lists/only-dlitems-evaluate.js b/lib/checks/lists/only-dlitems-evaluate.js
@@ -1,4 +1,4 @@
-import { isVisible } from '../../commons/dom';
+import { isVisibleForScreenreader } from '../../commons/dom';
 import { getRole, getExplicitRole } from '../../commons/aria';
 
 function onlyDlitemsEvaluate(node, options, virtualNode) {
@@ -23,7 +23,7 @@ function onlyDlitemsEvaluate(node, options, virtualNode) {
     const { actualNode } = childNode;
     const tagName = actualNode.nodeName.toUpperCase();
 
-    if (actualNode.nodeType === 1 && isVisible(actualNode, true, false)) {
+    if (actualNode.nodeType === 1 && isVisibleForScreenreader(actualNode)) {
       const explicitRole = getExplicitRole(actualNode);
 
       if ((tagName !== 'DT' && tagName !== 'DD') || explicitRole) {

diff --git a/lib/checks/lists/only-listitems-evaluate.js b/lib/checks/lists/only-listitems-evaluate.js
@@ -1,4 +1,4 @@
-import { isVisible } from '../../commons/dom';
+import { isVisibleForScreenreader } from '../../commons/dom';
 import { getRole } from '../../commons/aria';
 
 function onlyListitemsEvaluate(node, options, virtualNode) {
@@ -17,7 +17,7 @@ function onlyListitemsEvaluate(node, options, virtualNode) {
       return;
     }
 
-    if (actualNode.nodeType !== 1 || !isVisible(actualNode, true, false)) {
+    if (actualNode.nodeType !== 1 || !isVisibleForScreenreader(actualNode)) {
       return;
     }
 

diff --git a/lib/checks/navigation/heading-order-evaluate.js b/lib/checks/navigation/heading-order-evaluate.js
@@ -1,6 +1,6 @@
 import cache from '../../core/base/cache';
 import { querySelectorAllFilter, getAncestry } from '../../core/utils';
-import { isVisible } from '../../commons/dom';
+import { isVisibleForScreenreader } from '../../commons/dom';
 import { getRole } from '../../commons/aria';
 
 function getLevel(vNode) {
@@ -54,8 +54,10 @@ function headingOrderEvaluate() {
   // @see https://github.com/dequelabs/axe-core/issues/728
   const selector = 'h1, h2, h3, h4, h5, h6, [role=heading], iframe, frame';
   // TODO: es-modules_tree
-  const vNodes = querySelectorAllFilter(axe._tree[0], selector, vNode =>
-    isVisible(vNode.actualNode, true)
+  const vNodes = querySelectorAllFilter(
+    axe._tree[0],
+    selector,
+    isVisibleForScreenreader
   );
 
   headingOrder = vNodes.map(vNode => {

diff --git a/lib/checks/navigation/region-evaluate.js b/lib/checks/navigation/region-evaluate.js
@@ -46,7 +46,7 @@ function findRegionlessElms(virtualNode, options) {
     ['iframe', 'frame'].includes(virtualNode.props.nodeName) ||
     (dom.isSkipLink(virtualNode.actualNode) &&
       dom.getElementByReference(virtualNode.actualNode, 'href')) ||
-    !dom.isVisible(node, true)
+    !dom.isVisibleForScreenreader(node)
   ) {
     // Mark each parent node as having region descendant
     let vNode = virtualNode;

diff --git a/lib/checks/navigation/skip-link-evaluate.js b/lib/checks/navigation/skip-link-evaluate.js
@@ -1,9 +1,9 @@
-import { getElementByReference, isVisible } from '../../commons/dom';
+import { getElementByReference, isVisibleForScreenreader } from '../../commons/dom';
 
 function skipLinkEvaluate(node) {
   const target = getElementByReference(node, 'href');
   if (target) {
-    return isVisible(target, true) || undefined;
+    return isVisibleForScreenreader(target) || undefined;
   }
   return false;
 }

diff --git a/lib/checks/shared/is-on-screen-evaluate.js b/lib/checks/shared/is-on-screen-evaluate.js
@@ -1,8 +1,8 @@
-import { isVisible, isOffscreen } from '../../commons/dom';
+import { isVisibleOnScreen, isOffscreen } from '../../commons/dom';
 
 function isOnScreenEvaluate(node) {
   // From a visual perspective
-  return isVisible(node, false) && !isOffscreen(node);
+  return isVisibleOnScreen(node) && !isOffscreen(node);
 }
 
 export default isOnScreenEvaluate;
diff --git a/lib/commons/dom/focus-disabled.js b/lib/commons/dom/focus-disabled.js
@@ -1,6 +1,6 @@
 import AbstractVirtualNode from '../../core/base/virtual-node/abstract-virtual-node';
 import { getNodeFromTree } from '../../core/utils';
-import isHiddenWithCSS from './is-hidden-with-css';
+import isHiddenForEveryone from './is-hidden-for-everyone';
 // Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled 
 const allowedDisabledNodeNames = [
   'button', 
@@ -74,7 +74,7 @@ function focusDisabled(el) {
     if (!vNode.actualNode) {
       return false;
     }
-    return isHiddenWithCSS(vNode.actualNode);
+    return isHiddenForEveryone(vNode);
   }
 
   return false;

diff --git a/lib/commons/dom/get-rect-stack.js b/lib/commons/dom/get-rect-stack.js
@@ -1,4 +1,4 @@
-import isVisible from './is-visible';
+import isVisibleOnScreen from './is-visible-on-screen';
 import VirtualNode from '../../core/base/virtual-node/virtual-node';
 import { getNodeFromTree, getScroll, isShadowRoot } from '../../core/utils';
 
@@ -80,7 +80,7 @@ export function createGrid(
     // (we don't do this before so we can calculate stacking context
     // of parents with 0 width/height)
     const rect = vNode.boundingClientRect;
-    if (rect.width !== 0 && rect.height !== 0 && isVisible(node)) {
+    if (rect.width !== 0 && rect.height !== 0 && isVisibleOnScreen(node)) {
       addNodeToGrid(grid, vNode);
     }
 

diff --git a/lib/commons/dom/has-lang-text.js b/lib/commons/dom/has-lang-text.js
@@ -1,6 +1,6 @@
 import { hasChildTextNodes } from './has-content-virtual';
 import isVisualContent from './is-visual-content';
-import isHiddenWithCSS from './is-hidden-with-css';
+import isHiddenForEveryone from './is-hidden-for-everyone';
 
 /**
  * Check that a node has text, or an accessible name which language is defined by the
@@ -23,6 +23,6 @@ export default function hasLangText(virtualNode) {
     child =>
       !child.attr('lang') && // non-empty lang
       hasLangText(child) && // has text
-      !isHiddenWithCSS(child) // Not hidden for anyone
+      !isHiddenForEveryone(child) // Not hidden for anyone
   );
 }
diff --git a/lib/commons/dom/index.js b/lib/commons/dom/index.js
@@ -23,6 +23,7 @@ export { default as insertedIntoFocusOrder } from './inserted-into-focus-order';
 export { default as isCurrentPageLink } from './is-current-page-link';
 export { default as isFocusable } from './is-focusable';
 export { default as isHiddenWithCSS } from './is-hidden-with-css';
+export { default as isHiddenForEveryone } from './is-hidden-for-everyone';
 export { default as isHTML5 } from './is-html5';
 export { default as isInTabOrder } from './is-in-tab-order';
 export { default as isInTextBlock } from './is-in-text-block';
@@ -33,6 +34,8 @@ export { default as isNode } from './is-node';
 export { default as isOffscreen } from './is-offscreen';
 export { default as isOpaque } from './is-opaque';
 export { default as isSkipLink } from './is-skip-link';
+export { default as isVisibleForScreenreader } from './is-visible-for-screenreader';
+export { default as isVisibleOnScreen } from './is-visible-on-screen';
 export { default as isVisible } from './is-visible';
 export { default as isVisualContent } from './is-visual-content';
 export { default as reduceToElementsBelowFloating } from './reduce-to-elements-below-floating';

diff --git a/lib/commons/dom/is-hidden-for-everyone.js b/lib/commons/dom/is-hidden-for-everyone.js
@@ -0,0 +1,75 @@
+import AbstractVirtualNode from '../../core/base/virtual-node/abstract-virtual-node';
+import { getNodeFromTree } from '../../core/utils';
+import memoize from '../../core/utils/memoize';
+import {
+  nativelyHidden,
+  displayHidden,
+  visibilityHidden
+} from './visibility-methods';
+
+const hiddenMethods = [displayHidden, visibilityHidden];
+
+/**
+ * Determine if an element is hidden from screenreaders and visual users
+ * @method isHiddenForEveryone
+ * @memberof axe.commons.dom
+ * @param {VirtualNode} vNode The Virtual Node
+ * @param {Object} [options]
+ * @param {Boolean} [options.skipAncestors] If the ancestor tree should be not be used
+ * @param {Boolean} [options.isAncestor] If this function is being called on an ancestor for the target node
+ * @return {Boolean} The element's visibility state
+ */
+export default function isHiddenForEveryone(
+  vNode,
+  { skipAncestors, isAncestor = false } = {}
+) {
+  vNode = vNode instanceof AbstractVirtualNode ? vNode : getNodeFromTree(vNode);
+
+  if (skipAncestors) {
+    return isHiddenSelf(vNode, isAncestor);
+  }
+
+  return isHiddenAncestors(vNode, isAncestor);
+}
+
+/**
+ * Check the element for visibility state
+ */
+const isHiddenSelf = memoize(function isHiddenSelfMemoized(vNode, isAncestor) {
+  if (nativelyHidden(vNode)) {
+    return true;
+  }
+
+  if (!vNode.actualNode) {
+    return false;
+  }
+
+  if (hiddenMethods.some(method => method(vNode, { isAncestor }))) {
+    return true;
+  }
+
+  // detached node
+  if (!vNode.actualNode.isConnected) {
+    return true;
+  }
+
+  return false;
+});
+
+/**
+ * Check the element and ancestors for visibility state
+ */
+const isHiddenAncestors = memoize(function isHiddenAncestorsMemoized(
+  vNode,
+  isAncestor
+) {
+  if (isHiddenSelf(vNode, isAncestor)) {
+    return true;
+  }
+
+  if (!vNode.parent) {
+    return false;
+  }
+
+  return isHiddenAncestors(vNode.parent, true);
+});
diff --git a/lib/commons/dom/is-hidden-with-css.js b/lib/commons/dom/is-hidden-with-css.js
@@ -10,6 +10,7 @@ import AbstractVirtualNode from '../../core/base/virtual-node/abstract-virtual-n
  * @param {HTMLElement} el The HTML Element
  * @param {Boolean} descendentVisibilityValue (Optional) immediate descendant visibility value used for recursive computation
  * @return {Boolean} the element's hidden status
+ * @deprecated use isHiddenForEveryone
  */
 function isHiddenWithCSS(node, descendentVisibilityValue) {
   const vNode =

diff --git a/lib/commons/dom/is-modal-open.js b/lib/commons/dom/is-modal-open.js
@@ -1,4 +1,4 @@
-import isVisible from './is-visible';
+import isVisibleOnScreen from './is-visible-on-screen';
 import getViewportSize from './get-viewport-size';
 import cache from '../../core/base/cache';
 import { querySelectorAllFilter } from '../../core/utils';
@@ -42,7 +42,7 @@ function isModalOpen(options) {
     // TODO: es-module-_tree
     axe._tree[0],
     'dialog, [role=dialog], [aria-modal=true]',
-    vNode => isVisible(vNode.actualNode)
+    isVisibleOnScreen
   );
 
   if (definiteModals.length) {