govuk_publishing_components 21.22.1 → 21.22.2

data/node_modules/axe-core/lib/commons/dom/get-element-stack.js

@@ -1,7 +1,7 @@
-/* global dom */
+/* global dom, VirtualNode */
 
 // split the page cells to group elements by the position
-const gridSize = 200; // arbitrary size, increase to reduce memory (less cells) use but increase time (more nodes per grid to check collision)
+const gridSize = 200; // arbitrary size, increase to reduce memory use (less cells) but increase time (more nodes per grid to check collision)
 
 /**
  * Determine if node produces a stacking context.
@@ -11,31 +11,20 @@ const gridSize = 200; // arbitrary size, increase to reduce memory (less cells)
  * @param {VirtualNode} vNode
  * @return {Boolean}
  */
-function isStackingContext(vNode) {
-	const node = vNode.actualNode;
+function isStackingContext(vNode, parentVNode) {
+	const position = vNode.getComputedStylePropertyValue('position');
+	const zIndex = vNode.getComputedStylePropertyValue('z-index');
 
-	//the root element (HTML)
-	if (
-		!node ||
-		node.nodeName === 'HTML' ||
-		node.nodeName === '#document-fragment'
-	) {
-		return true;
-	}
+	// the root element (HTML) is skipped since we always start with a
+	// stacking order of [0]
 
 	// position: fixed or sticky
-	if (
-		vNode.getComputedStylePropertyValue('position') === 'fixed' ||
-		vNode.getComputedStylePropertyValue('position') === 'sticky'
-	) {
+	if (position === 'fixed' || position === 'sticky') {
 		return true;
 	}
 
 	// positioned (absolutely or relatively) with a z-index value other than "auto",
-	if (
-		vNode.getComputedStylePropertyValue('z-index') !== 'auto' &&
-		vNode.getComputedStylePropertyValue('position') !== 'static'
-	) {
+	if (zIndex !== 'auto' && position !== 'static') {
 		return true;
 	}
 
@@ -56,34 +45,26 @@ function isStackingContext(vNode) {
 	}
 
 	// elements with a mix-blend-mode value other than "normal"
-	if (
-		vNode.getComputedStylePropertyValue('mix-blend-mode') &&
-		vNode.getComputedStylePropertyValue('mix-blend-mode') !== 'normal'
-	) {
+	const mixBlendMode = vNode.getComputedStylePropertyValue('mix-blend-mode');
+	if (mixBlendMode && mixBlendMode !== 'normal') {
 		return true;
 	}
 
 	// elements with a filter value other than "none"
-	if (
-		vNode.getComputedStylePropertyValue('filter') &&
-		vNode.getComputedStylePropertyValue('filter') !== 'none'
-	) {
+	const filter = vNode.getComputedStylePropertyValue('filter');
+	if (filter && filter !== 'none') {
 		return true;
 	}
 
 	// elements with a perspective value other than "none"
-	if (
-		vNode.getComputedStylePropertyValue('perspective') &&
-		vNode.getComputedStylePropertyValue('perspective') !== 'none'
-	) {
+	const perspective = vNode.getComputedStylePropertyValue('perspective');
+	if (perspective && perspective !== 'none') {
 		return true;
 	}
 
 	// element with a clip-path value other than "none"
-	if (
-		vNode.getComputedStylePropertyValue('clip-path') &&
-		vNode.getComputedStylePropertyValue('clip-path') !== 'none'
-	) {
+	const clipPath = vNode.getComputedStylePropertyValue('clip-path');
+	if (clipPath && clipPath !== 'none') {
 		return true;
 	}
 
@@ -92,7 +73,6 @@ function isStackingContext(vNode) {
 		vNode.getComputedStylePropertyValue('-webkit-mask') ||
 		vNode.getComputedStylePropertyValue('mask') ||
 		'none';
-
 	if (mask !== 'none') {
 		return true;
 	}
@@ -102,7 +82,6 @@ function isStackingContext(vNode) {
 		vNode.getComputedStylePropertyValue('-webkit-mask-image') ||
 		vNode.getComputedStylePropertyValue('mask-image') ||
 		'none';
-
 	if (maskImage !== 'none') {
 		return true;
 	}
@@ -112,7 +91,6 @@ function isStackingContext(vNode) {
 		vNode.getComputedStylePropertyValue('-webkit-mask-border') ||
 		vNode.getComputedStylePropertyValue('mask-border') ||
 		'none';
-
 	if (maskBorder !== 'none') {
 		return true;
 	}
@@ -123,10 +101,8 @@ function isStackingContext(vNode) {
 	}
 
 	// transform or opacity in will-change even if you don't specify values for these attributes directly
-	if (
-		vNode.getComputedStylePropertyValue('will-change') === 'transform' ||
-		vNode.getComputedStylePropertyValue('will-change') === 'opacity'
-	) {
+	const willChange = vNode.getComputedStylePropertyValue('will-change');
+	if (willChange === 'transform' || willChange === 'opacity') {
 		return true;
 	}
 
@@ -146,11 +122,8 @@ function isStackingContext(vNode) {
 	}
 
 	// a flex item or gird item with a z-index value other than "auto", that is the parent element display: flex|inline-flex|grid|inline-grid,
-	if (
-		vNode.getComputedStylePropertyValue('z-index') !== 'auto' &&
-		vNode.parent
-	) {
-		const parentDsiplay = vNode.parent.getComputedStylePropertyValue('display');
+	if (zIndex !== 'auto' && parentVNode) {
+		const parentDsiplay = parentVNode.getComputedStylePropertyValue('display');
 		if (
 			[
 				'flex',
@@ -192,9 +165,7 @@ function getPositionOrder(vNode) {
 		}
 
 		// 3. the in-flow, non-inline-level, non-positioned descendants.
-		if (vNode.getComputedStylePropertyValue('position') === 'static') {
-			return 0;
-		}
+		return 0;
 	}
 
 	// 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
@@ -210,15 +181,6 @@ function getPositionOrder(vNode) {
  */
 function visuallySort(a, b) {
 	/*eslint no-bitwise: 0 */
-
-	// 1. The root element forms the root stacking context.
-	if (a.actualNode.nodeName.toLowerCase() === 'html') {
-		return 1;
-	}
-	if (b.actualNode.nodeName.toLowerCase() === 'html') {
-		return -1;
-	}
-
 	for (let i = 0; i < a._stackingOrder.length; i++) {
 		if (typeof b._stackingOrder[i] === 'undefined') {
 			return -1;
@@ -236,9 +198,55 @@ function visuallySort(a, b) {
 	}
 
 	// nodes are the same stacking order
-	const docPosition = a.actualNode.compareDocumentPosition(b.actualNode);
-	const DOMOrder = docPosition & 4 ? 1 : -1;
-	const isDescendant = docPosition & 8 || docPosition & 16;
+	let aNode = a.actualNode;
+	let bNode = b.actualNode;
+
+	// elements don't correctly calculate document position when comparing
+	// across shadow boundaries, so we need to compare the position of a
+	// shared host instead
+
+	// elements have different hosts
+	if (aNode.getRootNode && aNode.getRootNode() !== bNode.getRootNode()) {
+		// keep track of all parent hosts and find the one both nodes share
+		const boundaries = [];
+		while (aNode) {
+			boundaries.push({
+				root: aNode.getRootNode(),
+				node: aNode
+			});
+			aNode = aNode.getRootNode().host;
+		}
+
+		while (
+			bNode &&
+			!boundaries.find(boundary => boundary.root === bNode.getRootNode())
+		) {
+			bNode = bNode.getRootNode().host;
+		}
+
+		// bNode is a node that shares a host with some part of the a parent
+		// shadow tree, find the aNode that shares the same host as bNode
+		aNode = boundaries.find(boundary => boundary.root === bNode.getRootNode())
+			.node;
+
+		// sort child of shadow to it's host node by finding which element is
+		// the child of the host and sorting it before the host
+		if (aNode === bNode) {
+			return a.actualNode.getRootNode() !== aNode.getRootNode() ? -1 : 1;
+		}
+	}
+
+	const {
+		DOCUMENT_POSITION_FOLLOWING,
+		DOCUMENT_POSITION_CONTAINS,
+		DOCUMENT_POSITION_CONTAINED_BY
+	} = window.Node;
+
+	const docPosition = aNode.compareDocumentPosition(bNode);
+	const DOMOrder = docPosition & DOCUMENT_POSITION_FOLLOWING ? 1 : -1;
+	const isDescendant =
+		docPosition & DOCUMENT_POSITION_CONTAINS ||
+		docPosition & DOCUMENT_POSITION_CONTAINED_BY;
 	const aPosition = getPositionOrder(a);
 	const bPosition = getPositionOrder(b);
 
@@ -256,17 +264,13 @@ function visuallySort(a, b) {
  * @param {VirtualNode}
  * @return {Number[]}
  */
-function getStackingOrder(vNode) {
-	const stackingOrder = vNode.parent
-		? vNode.parent._stackingOrder.slice()
-		: [0];
-
-	if (vNode.getComputedStylePropertyValue('z-index') !== 'auto') {
-		stackingOrder[stackingOrder.length - 1] = parseInt(
-			vNode.getComputedStylePropertyValue('z-index')
-		);
+function getStackingOrder(vNode, parentVNode) {
+	const stackingOrder = parentVNode._stackingOrder.slice();
+	const zIndex = vNode.getComputedStylePropertyValue('z-index');
+	if (zIndex !== 'auto') {
+		stackingOrder[stackingOrder.length - 1] = parseInt(zIndex);
 	}
-	if (isStackingContext(vNode)) {
+	if (isStackingContext(vNode, parentVNode)) {
 		stackingOrder.push(0);
 	}
 
@@ -278,24 +282,25 @@ function getStackingOrder(vNode) {
  * @param {VirtualNode}
  * @return {VirtualNode|null}
  */
-function findScrollRegionParent(vNode) {
+function findScrollRegionParent(vNode, parentVNode) {
 	let scrollRegionParent = null;
-	let vNodeParent = vNode.parent;
 	let checkedNodes = [vNode];
 
-	while (vNodeParent) {
-		if (vNodeParent._scrollRegionParent) {
-			scrollRegionParent = vNodeParent._scrollRegionParent;
+	while (parentVNode) {
+		if (parentVNode._scrollRegionParent) {
+			scrollRegionParent = parentVNode._scrollRegionParent;
 			break;
 		}
 
-		if (axe.utils.getScroll(vNodeParent.actualNode)) {
-			scrollRegionParent = vNodeParent;
+		if (axe.utils.getScroll(parentVNode.actualNode)) {
+			scrollRegionParent = parentVNode;
 			break;
 		}
 
-		checkedNodes.push(vNodeParent);
-		vNodeParent = vNodeParent.parent;
+		checkedNodes.push(parentVNode);
+		parentVNode = axe.utils.getNodeFromTree(
+			parentVNode.actualNode.parentElement || parentVNode.actualNode.parentNode
+		);
 	}
 
 	// cache result of parent scroll region so we don't have to look up the entire
@@ -306,21 +311,6 @@ function findScrollRegionParent(vNode) {
 	return scrollRegionParent;
 }
 
-/**
- * Get the DOMRect x or y value. IE11 (and Phantom) does not support x/y
- * on DOMRect.
- * @param {DOMRect}
- * @param {String} pos 'x' or 'y'
- * @return {Number}
- */
-function getDomPosition(rect, pos) {
-	if (pos === 'x') {
-		return 'x' in rect ? rect.x : rect.left;
-	}
-
-	return 'y' in rect ? rect.y : rect.top;
-}
-
 /**
  * Add a node to every cell of the grid it intersects with.
  * @param {Grid}
@@ -332,15 +322,15 @@ function addNodeToGrid(grid, vNode) {
 	vNode._grid = grid;
 
 	vNode.clientRects.forEach(rect => {
-		const startRow = Math.floor(getDomPosition(rect, 'y') / gridSize);
-		const startCol = Math.floor(getDomPosition(rect, 'x') / gridSize);
+		const x = rect.left;
+		const y = rect.top;
 
-		const endRow = Math.floor(
-			(getDomPosition(rect, 'y') + rect.height) / gridSize
-		);
-		const endCol = Math.floor(
-			(getDomPosition(rect, 'x') + rect.width) / gridSize
-		);
+		// "| 0" is a faster way to do Math.floor
+		// @see https://jsperf.com/math-floor-vs-math-round-vs-parseint/152
+		const startRow = (y / gridSize) | 0;
+		const startCol = (x / gridSize) | 0;
+		const endRow = ((y + rect.height) / gridSize) | 0;
+		const endCol = ((x + rect.width) / gridSize) | 0;
 
 		for (let row = startRow; row <= endRow; row++) {
 			grid.cells[row] = grid.cells[row] || [];
@@ -357,72 +347,97 @@ function addNodeToGrid(grid, vNode) {
 }
 
 /**
- * Setup the 2d grid and add every element to it.
+ * Setup the 2d grid and add every element to it, even elements not
+ * included in the flat tree
  */
-function createGrid() {
-	const rootGrid = {
+function createGrid(
+	root = document.body,
+	rootGrid = {
 		container: null,
 		cells: []
-	};
-
-	axe.utils
-		.querySelectorAll(axe._tree[0], '*')
-		.filter(vNode => vNode.actualNode.parentElement !== document.head)
-		.forEach(vNode => {
-			if (vNode.actualNode.nodeType !== window.Node.ELEMENT_NODE) {
-				return;
-			}
+	},
+	parentVNode = null
+) {
+	// by not starting at the htmlElement we don't have to pass a custom
+	// filter function into the treeWalker to filter out head elements,
+	// which would be called for every node
+	if (!parentVNode) {
+		let vNode = axe.utils.getNodeFromTree(document.documentElement);
+		if (!vNode) {
+			vNode = new VirtualNode(document.documentElement);
+		}
 
-			vNode._stackingOrder = getStackingOrder(vNode);
+		vNode._stackingOrder = [0];
+		addNodeToGrid(rootGrid, vNode);
 
-			// filter out any elements with 0 width or height
-			// (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) {
-				return;
-			}
+		if (axe.utils.getScroll(vNode.actualNode)) {
+			const subGrid = {
+				container: vNode,
+				cells: []
+			};
+			vNode._subGrid = subGrid;
+		}
+	}
 
-			const scrollRegionParent = findScrollRegionParent(vNode);
-			const grid = scrollRegionParent ? scrollRegionParent._subGrid : rootGrid;
+	// IE11 requires the first 3 parameters
+	// @see https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
+	const treeWalker = document.createTreeWalker(
+		root,
+		window.NodeFilter.SHOW_ELEMENT,
+		null,
+		false
+	);
+	let node = parentVNode ? treeWalker.nextNode() : treeWalker.currentNode;
+	while (node) {
+		let vNode = axe.utils.getNodeFromTree(node);
+
+		// an svg in IE11 does not have a parentElement but instead has a
+		// parentNode. but parentNode could be a shadow root so we need to
+		// verity it's in the tree first
+		if (node.parentElement) {
+			parentVNode = axe.utils.getNodeFromTree(node.parentElement);
+		} else if (node.parentNode && axe.utils.getNodeFromTree(node.parentNode)) {
+			parentVNode = axe.utils.getNodeFromTree(node.parentNode);
+		}
 
-			if (axe.utils.getScroll(vNode.actualNode)) {
-				const subGrid = {
-					container: vNode,
-					cells: []
-				};
-				vNode._subGrid = subGrid;
-			}
+		if (!vNode) {
+			vNode = new VirtualNode(node, parentVNode);
+		}
 
-			addNodeToGrid(grid, vNode);
-		});
-}
+		vNode._stackingOrder = getStackingOrder(vNode, parentVNode);
 
-/**
- * Return all elements that are at the center point of the passed in virtual node.
- * @method getElementStack
- * @memberof axe.commons.dom
- * @param {VirtualNode} vNode
- * @param {Boolean} [recursed] If the function has been called recursively
- * @return {VirtualNode[]}
- */
-dom.getElementStack = function(vNode, recursed = false) {
-	if (!axe._cache.get('gridCreated')) {
-		createGrid();
-		axe._cache.set('gridCreated', true);
-	}
+		const scrollRegionParent = findScrollRegionParent(vNode, parentVNode);
+		const grid = scrollRegionParent ? scrollRegionParent._subGrid : rootGrid;
 
-	const grid = vNode._grid;
+		if (axe.utils.getScroll(vNode.actualNode)) {
+			const subGrid = {
+				container: vNode,
+				cells: []
+			};
+			vNode._subGrid = subGrid;
+		}
 
-	if (!grid) {
-		return [];
-	}
+		// filter out any elements with 0 width or height
+		// (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 && dom.isVisible(node)) {
+			addNodeToGrid(grid, vNode);
+		}
 
-	const boundingRect = vNode.boundingClientRect;
+		// add shadow root elements to the grid
+		if (axe.utils.isShadowRoot(node)) {
+			createGrid(node.shadowRoot, grid, vNode);
+		}
 
+		node = treeWalker.nextNode();
+	}
+}
+
+function getRectStack(grid, rect, recursed = false) {
 	// use center point of rect
-	let x = getDomPosition(boundingRect, 'x') + boundingRect.width / 2;
-	let y = getDomPosition(boundingRect, 'y') + boundingRect.height / 2;
+	let x = rect.left + rect.width / 2;
+	let y = rect.top + rect.height / 2;
 
 	// NOTE: there is a very rare edge case in Chrome vs Firefox that can
 	// return different results of `document.elementsFromPoint`. If the center
@@ -430,36 +445,119 @@ dom.getElementStack = function(vNode, recursed = false) {
 	// Chrome appears to round the number up and return the element while Firefox
 	// keeps the number as is and won't return the element. In this case, we
 	// went with pixel perfect collision rather than rounding
-	const row = Math.floor(y / gridSize);
-	const col = Math.floor(x / gridSize);
+	const row = (y / gridSize) | 0;
+	const col = (x / gridSize) | 0;
 	let stack = grid.cells[row][col].filter(gridCellNode => {
-		return gridCellNode.clientRects.find(rect => {
-			let pointX = x;
-			let pointY = y;
-
-			let rectWidth = rect.width;
-			let rectHeight = rect.height;
-			let rectX = getDomPosition(rect, 'x');
-			let rectY = getDomPosition(rect, 'y');
+		return gridCellNode.clientRects.find(clientRect => {
+			let rectX = clientRect.left;
+			let rectY = clientRect.top;
 
 			// perform an AABB (axis-aligned bounding box) collision check for the
 			// point inside the rect
 			return (
-				pointX < rectX + rectWidth &&
-				pointX > rectX &&
-				pointY < rectY + rectHeight &&
-				pointY > rectY
+				x <= rectX + clientRect.width &&
+				x >= rectX &&
+				y <= rectY + clientRect.height &&
+				y >= rectY
 			);
 		});
 	});
 
-	if (grid.container) {
-		stack = dom.getElementStack(grid.container, true).concat(stack);
+	const gridContainer = grid.container;
+	if (gridContainer) {
+		stack = getRectStack(
+			gridContainer._grid,
+			gridContainer.boundingClientRect,
+			true
+		).concat(stack);
 	}
 
 	if (!recursed) {
-		stack.sort(visuallySort);
+		stack = stack
+			.sort(visuallySort)
+			.map(vNode => vNode.actualNode)
+			// always make sure html is the last element
+			.concat(document.documentElement)
+			// remove duplicates caused by adding client rects of the same node
+			.filter((node, index, array) => array.indexOf(node) === index);
 	}
 
 	return stack;
+}
+
+/**
+ * Return all elements that are at the center bounding rect of the passed in node.
+ * @method getElementStack
+ * @memberof axe.commons.dom
+ * @param {Node} node
+ * @return {Node[]}
+ */
+dom.getElementStack = function(node) {
+	if (!axe._cache.get('gridCreated')) {
+		createGrid();
+		axe._cache.set('gridCreated', true);
+	}
+
+	const vNode = axe.utils.getNodeFromTree(node);
+	const grid = vNode._grid;
+
+	if (!grid) {
+		return [];
+	}
+
+	return getRectStack(grid, vNode.boundingClientRect);
+};
+
+/**
+ * Return all elements that are at the center of each text client rect of the passed in node.
+ * @method getTextElementStack
+ * @memberof axe.commons.dom
+ * @param {Node} node
+ * @return {Array<Node[]>}
+ */
+dom.getTextElementStack = function(node) {
+	if (!axe._cache.get('gridCreated')) {
+		createGrid();
+		axe._cache.set('gridCreated', true);
+	}
+
+	const vNode = axe.utils.getNodeFromTree(node);
+	const grid = vNode._grid;
+
+	if (!grid) {
+		return [];
+	}
+
+	// for code blocks that use syntax highlighting, you can get a ton of client
+	// rects (See https://github.com/dequelabs/axe-core/issues/1985). they use
+	// a mixture of text nodes and other nodes (which will contain their own text
+	// nodes), but all we care about is checking the direct text nodes as the
+	// other nodes will have their own client rects checked. doing this speeds up
+	// color contrast significantly for large syntax highlighted code blocks
+	const clientRects = [];
+	Array.from(node.childNodes).forEach(elm => {
+		if (
+			elm.nodeType === 3 &&
+			axe.commons.text.sanitize(elm.textContent) !== ''
+		) {
+			const range = document.createRange();
+			range.selectNodeContents(elm);
+			const rects = range.getClientRects();
+
+			for (let i = 0; i < rects.length; i++) {
+				const rect = rects[i];
+
+				// filter out 0 width and height rects (newline characters)
+				// ie11 has newline characters return 0.00998, so we'll say if the
+				// line is < 1 it shouldn't be counted
+				if (rect.width >= 1 && rect.height >= 1) {
+					clientRects.push(rect);
+				}
+			}
+		}
+	});
+
+	return clientRects.map(rect => {
+		return getRectStack(grid, rect);
+	});
 };