Updated axe-core files for 200% zoom

Author: mattscepter

lib/commons/dom/get-element-stack.js

@@ -9,7 +9,7 @@ import createGrid from './create-grid';
  * @param {Node} node
  * @return {Node[]}
  */
-function getElementStack(node) {
+function getElementStack(node, isCoordsPassed = false, x, y) {
   createGrid();
 
   const vNode = getNodeFromTree(node);
@@ -19,7 +19,14 @@ function getElementStack(node) {
     return [];
   }
 
-  return getRectStack(grid, vNode.boundingClientRect);
+  return getRectStack(
+    grid,
+    vNode.boundingClientRect,
+    false,
+    isCoordsPassed,
+    x,
+    y
+  );
 }
 
 export default getElementStack;

lib/commons/dom/get-overflow-hidden-ancestors.js

@@ -17,7 +17,11 @@ const getOverflowHiddenAncestors = memoize(
 
     const overflow = vNode.getComputedStylePropertyValue('overflow');
 
-    if (overflow === 'hidden') {
+    if (
+      overflow.includes('hidden') ||
+      overflow.includes('clip') ||
+      overflow.includes('scroll')
+    ) {
       ancestors.push(vNode);
     }
 

lib/commons/dom/get-rect-stack.js

@@ -1,12 +1,25 @@
 import visuallySort from './visually-sort';
 import { getRectCenter } from '../math';
 
-export function getRectStack(grid, rect, recursed = false) {
+export function getRectStack(
+  grid,
+  rect,
+  recursed = false,
+  isCoordsPassed,
+  x,
+  y
+) {
   const center = getRectCenter(rect);
   const gridCell = grid.getCellFromPoint(center) || [];
 
-  const floorX = Math.floor(center.x);
-  const floorY = Math.floor(center.y);
+  let floorX = Math.floor(center.x);
+  let floorY = Math.floor(center.y);
+
+  if (isCoordsPassed) {
+    floorX = Math.floor(x);
+    floorY = Math.floor(y);
+  }
+
   let stack = gridCell.filter(gridCellNode => {
     return gridCellNode.clientRects.some(clientRect => {
       const rectX = clientRect.left;

lib/commons/dom/get-visible-child-text-rects.js

@@ -1,6 +1,6 @@
-import { getNodeFromTree, memoize } from '../../core/utils';
+import { getNodeFromTree } from '../../core/utils';
 import { sanitize } from '../text';
-import { getRectCenter, isPointInRect, getIntersectionRect } from '../math';
+import { getIntersectionRect } from '../math';
 import getOverflowHiddenAncestors from './get-overflow-hidden-ancestors';
 
 /**
@@ -10,45 +10,56 @@ import getOverflowHiddenAncestors from './get-overflow-hidden-ancestors';
  * @instance
  * @param {Element} node
  */
-const getVisibleChildTextRects = memoize(
-  function getVisibleChildTextRectsMemoized(node) {
-    const vNode = getNodeFromTree(node);
-    const nodeRect = vNode.boundingClientRect;
-    const clientRects = [];
-    const overflowHiddenNodes = getOverflowHiddenAncestors(vNode);
+const getVisibleChildTextRects = function getVisibleChildTextRectsMemoized(
+  node
+) {
+  const vNode = getNodeFromTree(node);
+  const nodeRect = vNode.boundingClientRect;
+  const clientRects = [];
+  const overflowHiddenNodes = getOverflowHiddenAncestors(vNode);
 
-    node.childNodes.forEach(textNode => {
-      if (textNode.nodeType !== 3 || sanitize(textNode.nodeValue) === '') {
-        return;
-      }
+  // console.log("Here");
+  // console.log("Child Nodes are ",  node.childNodes);
 
-      const contentRects = getContentRects(textNode);
-      if (isOutsideNodeBounds(contentRects, nodeRect)) {
-        return;
-      }
+  node.childNodes.forEach(textNode => {
+    if (textNode.nodeType !== 3 || sanitize(textNode.nodeValue) === '') {
+      return;
+    }
+
+    const contentRects = getContentRects(textNode);
+    // if (isOutsideNodeBounds(contentRects, nodeRect)) {
+    //   return;
+    // }
+
+    // console.log("Client Rects ate ",  structuredClone(contentRects));
 
-      clientRects.push(...filterHiddenRects(contentRects, overflowHiddenNodes));
-    });
+    clientRects.push(...filterHiddenRects(contentRects, overflowHiddenNodes));
+  });
 
-    /**
-     * if all text rects are larger than the bounds of the node,
-     * or goes outside of the bounds of the node, we need to use
-     * the nodes bounding rect so we stay within the bounds of the
-     * element.
-     *
-     * @see https://github.com/dequelabs/axe-core/issues/2178
-     * @see https://github.com/dequelabs/axe-core/issues/2483
-     * @see https://github.com/dequelabs/axe-core/issues/2681
-     *
-     * also need to resize the nodeRect to fit within the bounds of any overflow: hidden ancestors.
-     *
-     * @see https://github.com/dequelabs/axe-core/issues/4253
-     */
-    return clientRects.length
-      ? clientRects
-      : filterHiddenRects([nodeRect], overflowHiddenNodes);
+  if (clientRects.length <= 0) {
+    return [];
   }
-);
+  /**
+   * if all text rects are larger than the bounds of the node,
+   * or goes outside of the bounds of the node, we need to use
+   * the nodes bounding rect so we stay within the bounds of the
+   * element.
+   *
+   * @see https://github.com/dequelabs/axe-core/issues/2178
+   * @see https://github.com/dequelabs/axe-core/issues/2483
+   * @see https://github.com/dequelabs/axe-core/issues/2681
+   *
+   * also need to resize the nodeRect to fit within the bounds of any overflow: hidden ancestors.
+   *
+   * @see https://github.com/dequelabs/axe-core/issues/4253
+   */
+
+  // console.log("Node is ", node);
+  // console.log("Client Rects is ", clientRects);
+  return clientRects.length
+    ? clientRects
+    : filterHiddenRects([nodeRect], overflowHiddenNodes);
+};
 export default getVisibleChildTextRects;
 
 function getContentRects(node) {
@@ -63,12 +74,12 @@ function getContentRects(node) {
  * when determining the rect stack we will also use the midpoint
  * of the text rect to determine out of bounds
  */
-function isOutsideNodeBounds(rects, nodeRect) {
-  return rects.some(rect => {
-    const centerPoint = getRectCenter(rect);
-    return !isPointInRect(centerPoint, nodeRect);
-  });
-}
+// function isOutsideNodeBounds(rects, nodeRect) {
+//   return rects.some(rect => {
+//     const centerPoint = getRectCenter(rect);
+//     return !isPointInRect(centerPoint, nodeRect);
+//   });
+// }
 
 /**
  * Filter out 0 width and height rects (newline characters) and
@@ -86,7 +97,9 @@ function filterHiddenRects(contentRects, overflowHiddenNodes) {
 
     // update the rect size to fit inside the bounds of all overflow
     // hidden ancestors
+    // console.log("Overflow Hidden nodes are ", overflowHiddenNodes);
     const visibleRect = overflowHiddenNodes.reduce((rect, overflowNode) => {
+      // console.log("Overflow node is ", overflowNode);
       return rect && getIntersectionRect(rect, overflowNode.boundingClientRect);
     }, contentRect);
 

lib/core/constants.js

@@ -27,7 +27,7 @@ const definitions = [
 
 const constants = {
   helpUrlBase: 'https://dequeuniversity.com/rules/',
-  gridSize: 200,
+  gridSize: 500,
   results: [],
   resultGroups: [],
   resultGroupMap: {},