From 80bf26730a1b7d0c45b5bf971661255a6178cb3b Mon Sep 17 00:00:00 2001 From: Utkarsh Chaudhary Date: Wed, 11 Sep 2024 16:37:38 +0530 Subject: [PATCH 1/3] Updated axe-core files for 200% zoom --- lib/commons/dom/get-element-stack.js | 11 ++- .../dom/get-overflow-hidden-ancestors.js | 6 +- lib/commons/dom/get-rect-stack.js | 19 +++- .../dom/get-visible-child-text-rects.js | 97 +++++++++++-------- lib/core/constants.js | 2 +- 5 files changed, 86 insertions(+), 49 deletions(-) diff --git a/lib/commons/dom/get-element-stack.js b/lib/commons/dom/get-element-stack.js index 132a20f2b..6aeebd4ae 100644 --- a/lib/commons/dom/get-element-stack.js +++ b/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; diff --git a/lib/commons/dom/get-overflow-hidden-ancestors.js b/lib/commons/dom/get-overflow-hidden-ancestors.js index 01ab696e2..0b40cf35d 100644 --- a/lib/commons/dom/get-overflow-hidden-ancestors.js +++ b/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); } diff --git a/lib/commons/dom/get-rect-stack.js b/lib/commons/dom/get-rect-stack.js index 4c51bf3b3..e0a3c5649 100644 --- a/lib/commons/dom/get-rect-stack.js +++ b/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; diff --git a/lib/commons/dom/get-visible-child-text-rects.js b/lib/commons/dom/get-visible-child-text-rects.js index 02611798e..e233750a2 100644 --- a/lib/commons/dom/get-visible-child-text-rects.js +++ b/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); diff --git a/lib/core/constants.js b/lib/core/constants.js index 3880c0a16..c6486d40a 100644 --- a/lib/core/constants.js +++ b/lib/core/constants.js @@ -27,7 +27,7 @@ const definitions = [ const constants = { helpUrlBase: 'https://dequeuniversity.com/rules/', - gridSize: 200, + gridSize: 500, results: [], resultGroups: [], resultGroupMap: {}, From aceb5cdf3c41fd8f7fe52c7f35869f64066e3773 Mon Sep 17 00:00:00 2001 From: Utkarsh Chaudhary Date: Wed, 18 Sep 2024 17:55:49 +0530 Subject: [PATCH 2/3] Adressed issue --- lib/commons/dom/create-grid.js | 10 ++ .../dom/get-overflow-hidden-ancestors.js | 19 +++- .../dom/get-visible-child-text-rects.js | 105 +++++++++--------- 3 files changed, 74 insertions(+), 60 deletions(-) diff --git a/lib/commons/dom/create-grid.js b/lib/commons/dom/create-grid.js index 612e885bb..bcaa86b1a 100644 --- a/lib/commons/dom/create-grid.js +++ b/lib/commons/dom/create-grid.js @@ -27,6 +27,9 @@ export default function createGrid( ) { // Prevent multiple calls per run if (cache.get('gridCreated') && !parentVNode) { + if (cache.get('gridSize')) { + return cache.get('gridSize'); + } return constants.gridSize; } cache.set('gridCreated', true); @@ -110,6 +113,10 @@ export default function createGrid( node = treeWalker.nextNode(); } + + if (cache.get('gridSize')) { + return cache.get('gridSize'); + } return constants.gridSize; } @@ -430,6 +437,9 @@ class Grid { * @returns {number} */ toGridIndex(num) { + if (cache.get('gridSize')) { + return Math.floor(num / cache.get('gridSize')); + } return Math.floor(num / constants.gridSize); } diff --git a/lib/commons/dom/get-overflow-hidden-ancestors.js b/lib/commons/dom/get-overflow-hidden-ancestors.js index 0b40cf35d..78c7e2625 100644 --- a/lib/commons/dom/get-overflow-hidden-ancestors.js +++ b/lib/commons/dom/get-overflow-hidden-ancestors.js @@ -1,3 +1,4 @@ +import cache from '../../core/base/cache'; import memoize from '../../core/utils/memoize'; /** @@ -17,12 +18,18 @@ const getOverflowHiddenAncestors = memoize( const overflow = vNode.getComputedStylePropertyValue('overflow'); - if ( - overflow.includes('hidden') || - overflow.includes('clip') || - overflow.includes('scroll') - ) { - ancestors.push(vNode); + if (cache.get('200%ZoomRule')) { + if ( + overflow.includes('hidden') || + overflow.includes('clip') || + overflow.includes('scroll') + ) { + ancestors.push(vNode); + } + } else { + if (overflow.includes('hidden')) { + ancestors.push(vNode); + } } return ancestors.concat(getOverflowHiddenAncestors(vNode.parent)); diff --git a/lib/commons/dom/get-visible-child-text-rects.js b/lib/commons/dom/get-visible-child-text-rects.js index e233750a2..bd6fa99ba 100644 --- a/lib/commons/dom/get-visible-child-text-rects.js +++ b/lib/commons/dom/get-visible-child-text-rects.js @@ -1,7 +1,8 @@ -import { getNodeFromTree } from '../../core/utils'; +import { getNodeFromTree, memoize } from '../../core/utils'; import { sanitize } from '../text'; -import { getIntersectionRect } from '../math'; +import { getIntersectionRect, getRectCenter, isPointInRect } from '../math'; import getOverflowHiddenAncestors from './get-overflow-hidden-ancestors'; +import cache from '../../core/base/cache'; /** * Get the visible text client rects of a node. @@ -10,56 +11,54 @@ import getOverflowHiddenAncestors from './get-overflow-hidden-ancestors'; * @instance * @param {Element} node */ -const getVisibleChildTextRects = function getVisibleChildTextRectsMemoized( - node -) { - const vNode = getNodeFromTree(node); - const nodeRect = vNode.boundingClientRect; - const clientRects = []; - const overflowHiddenNodes = getOverflowHiddenAncestors(vNode); +const getVisibleChildTextRects = memoize( + function getVisibleChildTextRectsMemoized(node) { + const vNode = getNodeFromTree(node); + const nodeRect = vNode.boundingClientRect; + const clientRects = []; + const overflowHiddenNodes = getOverflowHiddenAncestors(vNode); - // console.log("Here"); - // console.log("Child Nodes are ", node.childNodes); + node.childNodes.forEach(textNode => { + if (textNode.nodeType !== 3 || sanitize(textNode.nodeValue) === '') { + return; + } - node.childNodes.forEach(textNode => { - if (textNode.nodeType !== 3 || sanitize(textNode.nodeValue) === '') { - return; - } + const contentRects = getContentRects(textNode); + if ( + isOutsideNodeBounds(contentRects, nodeRect) && + !cache.get('200%ZoomRule') + ) { + return; + } - const contentRects = getContentRects(textNode); - // if (isOutsideNodeBounds(contentRects, nodeRect)) { - // return; - // } + clientRects.push(...filterHiddenRects(contentRects, overflowHiddenNodes)); + }); - // console.log("Client Rects ate ", structuredClone(contentRects)); - - clientRects.push(...filterHiddenRects(contentRects, overflowHiddenNodes)); - }); + if (clientRects.length <= 0 && cache.get('200%ZoomRule')) { + 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 + */ - if (clientRects.length <= 0) { - return []; + // console.log("Node is ", node); + // console.log("Client Rects is ", clientRects); + return clientRects.length + ? clientRects + : filterHiddenRects([nodeRect], 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 - */ - - // console.log("Node is ", node); - // console.log("Client Rects is ", clientRects); - return clientRects.length - ? clientRects - : filterHiddenRects([nodeRect], overflowHiddenNodes); -}; +); export default getVisibleChildTextRects; function getContentRects(node) { @@ -74,12 +73,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 @@ -97,9 +96,7 @@ 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); From ace6841500bf9c1cdb20a63ddb07f4679b7a16e0 Mon Sep 17 00:00:00 2001 From: Utkarsh Chaudhary Date: Wed, 18 Sep 2024 17:57:48 +0530 Subject: [PATCH 3/3] Adressed issue --- lib/commons/dom/get-visible-child-text-rects.js | 2 -- lib/core/constants.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/commons/dom/get-visible-child-text-rects.js b/lib/commons/dom/get-visible-child-text-rects.js index bd6fa99ba..cd778b743 100644 --- a/lib/commons/dom/get-visible-child-text-rects.js +++ b/lib/commons/dom/get-visible-child-text-rects.js @@ -52,8 +52,6 @@ const getVisibleChildTextRects = memoize( * @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); diff --git a/lib/core/constants.js b/lib/core/constants.js index c6486d40a..3880c0a16 100644 --- a/lib/core/constants.js +++ b/lib/core/constants.js @@ -27,7 +27,7 @@ const definitions = [ const constants = { helpUrlBase: 'https://dequeuniversity.com/rules/', - gridSize: 500, + gridSize: 200, results: [], resultGroups: [], resultGroupMap: {},