govuk_publishing_components 21.16.3 → 21.17.0

data/node_modules/axe-core/lib/commons/aria/label-virtual.js

@@ -17,7 +17,7 @@ aria.labelVirtual = function({ actualNode }) {
 		ref = dom.idrefs(actualNode, 'aria-labelledby');
 		candidate = ref
 			.map(function(thing) {
-				const vNode = axe.utils.getNodeFromTree(axe._tree[0], thing);
+				const vNode = axe.utils.getNodeFromTree(thing);
 				return vNode ? text.visibleVirtual(vNode, true) : '';
 			})
 			.join(' ')
@@ -49,6 +49,6 @@ aria.labelVirtual = function({ actualNode }) {
  * @return {Mixed} String of visible text, or `null` if no label is found
  */
 aria.label = function(node) {
-	node = axe.utils.getNodeFromTree(axe._tree[0], node);
+	node = axe.utils.getNodeFromTree(node);
 	return aria.labelVirtual(node);
 };

data/node_modules/axe-core/lib/commons/aria/roles.js

@@ -188,7 +188,7 @@ aria.implicitRole = function(node) {
 		return null;
 	}
 
-	var nodeAttributes = node.attributes;
+	var nodeAttributes = axe.utils.getNodeAttributes(node);
 	var ariaAttributes = [];
 
 	/* Get all aria-attributes defined for this node */

data/node_modules/axe-core/lib/commons/aria/validate-attr-value.js

@@ -10,7 +10,6 @@
  * @return {Boolean}
  */
 aria.validateAttrValue = function validateAttrValue(node, attr) {
-	/*eslint complexity: ["error",17]*/
 	'use strict';
 	var matches,
 		list,

data/node_modules/axe-core/lib/commons/color/center-point-of-rect.js

@@ -0,0 +1,30 @@
+/* global color */
+
+/**
+ * Get coordinates for an element's client rects or bounding client rect
+ *
+ * @method centerPointOfRect
+ * @memberof axe.commons.color
+ * @param {DOMRect} rect
+ * @returns {Object | undefined}
+ */
+color.centerPointOfRect = function centerPointOfRect(rect) {
+	if (rect.left > window.innerWidth) {
+		return undefined;
+	}
+
+	if (rect.top > window.innerHeight) {
+		return undefined;
+	}
+
+	const x = Math.min(
+		Math.ceil(rect.left + rect.width / 2),
+		window.innerWidth - 1
+	);
+	const y = Math.min(
+		Math.ceil(rect.top + rect.height / 2),
+		window.innerHeight - 1
+	);
+
+	return { x, y };
+};

data/node_modules/axe-core/lib/commons/color/contrast.js

@@ -74,7 +74,13 @@ color.Color = function(red, green, blue, alpha) {
 			this.red = parseInt(match[1], 10);
 			this.green = parseInt(match[2], 10);
 			this.blue = parseInt(match[3], 10);
-			this.alpha = parseFloat(match[4]);
+
+			// alpha values can be between 0 and 1, with browsers having
+			// different floating point precision. for example,
+			// 'rgba(0,0,0,0.5)' results in 'rgba(0,0,0,0.498039)' in Safari
+			// when getting the computed style background-color property. to
+			// fix this, we'll round all alpha values to 2 decimal points.
+			this.alpha = Math.round(parseFloat(match[4]) * 100) / 100;
 			return;
 		}
 	};

data/node_modules/axe-core/lib/commons/color/element-has-image.js

@@ -0,0 +1,36 @@
+/* global color */
+
+/**
+ * Reports if an element has a background image or gradient
+ *
+ * @method elementHasImage
+ * @memberof axe.commons.color
+ * @private
+ * @param {Element} elm
+ * @param {Object|null} style
+ * @return {Boolean}
+ */
+color.elementHasImage = function elementHasImage(elm, style) {
+	const graphicNodes = ['IMG', 'CANVAS', 'OBJECT', 'IFRAME', 'VIDEO', 'SVG'];
+	const nodeName = elm.nodeName.toUpperCase();
+
+	if (graphicNodes.includes(nodeName)) {
+		axe.commons.color.incompleteData.set('bgColor', 'imgNode');
+		return true;
+	}
+
+	style = style || window.getComputedStyle(elm);
+
+	const bgImageStyle = style.getPropertyValue('background-image');
+	const hasBgImage = bgImageStyle !== 'none';
+
+	if (hasBgImage) {
+		const hasGradient = /gradient/.test(bgImageStyle);
+		axe.commons.color.incompleteData.set(
+			'bgColor',
+			hasGradient ? 'bgGradient' : 'bgImage'
+		);
+	}
+
+	return hasBgImage;
+};

data/node_modules/axe-core/lib/commons/color/get-background-color.js

@@ -1,236 +1,188 @@
 /* global axe, color, dom */
-const graphicNodes = ['IMG', 'CANVAS', 'OBJECT', 'IFRAME', 'VIDEO', 'SVG'];
 
 /**
- * Reports if an element has a background image or gradient
- * @private
- * @param {Element} elm
- * @param {Object|null} style
- * @return {Boolean}
+ * Returns background color for element
+ * Uses getBackgroundStack() to get all elements rendered underneath the current element,
+ * to help determine the composite background color.
+ *
+ * @method getBackgroundColor
+ * @memberof axe.commons.color
+ * @param	{Element} elm Element to determine background color
+ * @param	{Array}	 [bgElms=[]] elements to inspect
+ * @param	{Boolean} [noScroll=false] should scroll
+ * @returns {Color}
  */
-function elmHasImage(elm, style) {
-	var nodeName = elm.nodeName.toUpperCase();
-	if (graphicNodes.includes(nodeName)) {
-		axe.commons.color.incompleteData.set('bgColor', 'imgNode');
-		return true;
-	}
+color.getBackgroundColor = function getBackgroundColor(
+	elm,
+	bgElms = [],
+	noScroll = false
+) {
+	if (noScroll !== true) {
+		/**
+		 * Avoid scrolling overflow:hidden containers, by only aligning to top,
+		 * when not doing so would move the center point above the viewport top.
+		 */
+		const clientHeight = elm.getBoundingClientRect().height;
+		const alignToTop = clientHeight - 2 >= window.innerHeight * 2;
+		elm.scrollIntoView(alignToTop);
+
+		// ensure element is scrolled into view horizontally
+		let center, scrollParent;
+		do {
+			const rect = elm.getBoundingClientRect();
 
-	style = style || window.getComputedStyle(elm);
-	var bgImageStyle = style.getPropertyValue('background-image');
-	var hasBgImage = bgImageStyle !== 'none';
-	if (hasBgImage) {
-		var hasGradient = /gradient/.test(bgImageStyle);
-		axe.commons.color.incompleteData.set(
-			'bgColor',
-			hasGradient ? 'bgGradient' : 'bgImage'
-		);
+			// 'x' does not exist in IE11
+			const x = 'x' in rect ? rect.x : rect.left;
+			center = x + rect.width / 2;
+
+			if (center < 0) {
+				scrollParent = getScrollParent(elm);
+				scrollParent.scrollLeft = 0;
+			}
+		} while (center < 0 && scrollParent !== document.documentElement);
 	}
-	return hasBgImage;
-}
 
-/**
- * Returns the non-alpha-blended background color of an element
- * @private
- * @param {Element} elm
- * @return {Color}
- */
-function getBgColor(elm, elmStyle) {
-	elmStyle = elmStyle || window.getComputedStyle(elm);
+	let bgColors = [];
+	let elmStack = color.getBackgroundStack(elm);
 
-	let bgColor = new color.Color();
-	bgColor.parseRgbString(elmStyle.getPropertyValue('background-color'));
+	// Search the stack until we have an alpha === 1 background
+	(elmStack || []).some(bgElm => {
+		const bgElmStyle = window.getComputedStyle(bgElm);
 
-	if (bgColor.alpha !== 0) {
-		let opacity = elmStyle.getPropertyValue('opacity');
-		bgColor.alpha = bgColor.alpha * opacity;
-	}
-	return bgColor;
-}
+		// Get the background color
+		let bgColor = color.getOwnBackgroundColor(bgElmStyle);
 
-/**
- * Determines overlap of node's content with a bgNode. Used for inline elements
- * @private
- * @param {Element} targetElement
- * @param {Element} bgNode
- * @return {Boolean}
- */
-function contentOverlapping(targetElement, bgNode) {
-	// get content box of target element
-	// check to see if the current bgNode is overlapping
-	var targetRect = targetElement.getClientRects()[0];
-	var obscuringElements = dom.shadowElementsFromPoint(
-		targetRect.left,
-		targetRect.top
-	);
-	if (obscuringElements) {
-		for (var i = 0; i < obscuringElements.length; i++) {
-			if (
-				obscuringElements[i] !== targetElement &&
-				obscuringElements[i] === bgNode
-			) {
-				return true;
-			}
+		if (
+			// abort if a node is partially obscured and obscuring element has a background
+			elmPartiallyObscured(elm, bgElm, bgColor) ||
+			// OR if the background elm is a graphic
+			color.elementHasImage(bgElm, bgElmStyle)
+		) {
+			bgColors = null;
+			bgElms.push(bgElm);
+
+			return true;
 		}
-	}
-	return false;
-}
-/**
- * Calculate alpha transparency of a background element obscuring the current node
- * @private
- * @param {Number} elmIndex
- * @param {Array} elmStack
- * @param {Element} originalElm
- * @return {Number|undefined}
- */
-function calculateObscuringAlpha(elmIndex, elmStack, originalElm) {
-	var totalAlpha = 0;
 
-	if (elmIndex > 0) {
-		// there are elements above our element, check if they contribute to the background
-		for (var i = elmIndex - 1; i >= 0; i--) {
-			let bgElm = elmStack[i];
-			let bgElmStyle = window.getComputedStyle(bgElm);
-			let bgColor = getBgColor(bgElm, bgElmStyle);
-			if (bgColor.alpha && contentOverlapping(originalElm, bgElm)) {
-				totalAlpha += bgColor.alpha;
-			} else {
-				// remove elements not contributing to the background
-				elmStack.splice(i, 1);
-			}
+		if (bgColor.alpha !== 0) {
+			// store elements contributing to the br color.
+			bgElms.push(bgElm);
+			bgColors.push(bgColor);
+
+			// Exit if the background is opaque
+			return bgColor.alpha === 1;
+		} else {
+			return false;
 		}
+	});
+
+	if (bgColors !== null && elmStack !== null) {
+		// Mix the colors together, on top of a default white
+		bgColors.push(new color.Color(255, 255, 255, 1));
+		var colors = bgColors.reduce(color.flattenColors);
+		return colors;
 	}
-	return totalAlpha;
-}
+
+	return null;
+};
+
 /**
- * Determine if element is partially overlapped, triggering a Can't Tell result
- * @private
+ * Get all elements rendered underneath the current element,
+ * In the order they are displayed (front to back)
+ *
+ * @method getBackgroundStack
+ * @memberof axe.commons.color
  * @param {Element} elm
- * @param {Element} bgElm
- * @param {Object} bgColor
- * @return {Boolean}
+ * @return {Array}
  */
-function elmPartiallyObscured(elm, bgElm, bgColor) {
-	var obscured =
-		elm !== bgElm && !dom.visuallyContains(elm, bgElm) && bgColor.alpha !== 0;
-	if (obscured) {
-		axe.commons.color.incompleteData.set('bgColor', 'elmPartiallyObscured');
+color.getBackgroundStack = function getBackgroundStack(elm) {
+	let elmStack = color.filteredRectStack(elm);
+
+	if (elmStack === null) {
+		return null;
 	}
-	return obscured;
-}
+	elmStack = includeMissingElements(elmStack, elm);
+	elmStack = dom.reduceToElementsBelowFloating(elmStack, elm);
+	elmStack = sortPageBackground(elmStack);
+
+	// Return all elements BELOW the current element, null if the element is undefined
+	let elmIndex = elmStack.indexOf(elm);
+	if (calculateObscuringElement(elmIndex, elmStack, elm)) {
+		// if the total of the elements above our element results in total obscuring, return null
+		axe.commons.color.incompleteData.set('bgColor', 'bgOverlap');
+		return null;
+	}
+	return elmIndex !== -1 ? elmStack : null;
+};
 
 /**
- * Include nodes missing from initial gathering because
- * document.elementsFromPoint misses some elements we need
- * i.e. TR is missing from table elementStack and leaves out bgColor
- * https://github.com/dequelabs/axe-core/issues/273
- *
- * @private
- * @param {Array} elmStack
+ * Get filtered stack of block and inline elements, excluding line breaks
+ * @method filteredRectStack
+ * @memberof axe.commons.color
  * @param {Element} elm
+ * @return {Array}
  */
-function includeMissingElements(elmStack, elm) {
-	/*eslint max-depth:["error",7]*/
-	const elementMap = {
-		TD: ['TR', 'TBODY'],
-		TH: ['TR', 'THEAD'],
-		INPUT: ['LABEL']
-	};
-	const tagArray = elmStack.map(elm => {
-		return elm.nodeName;
-	});
-	let bgNodes = elmStack;
-	for (let candidate in elementMap) {
-		// check that TR or LABEL has paired nodeName from elementMap, but don't expect elm to be that candidate
-		if (tagArray.includes(candidate)) {
-			for (let candidateIndex in elementMap[candidate]) {
-				if (candidate.hasOwnProperty(candidateIndex)) {
-					// look up the tree for a matching candidate
-					let ancestorMatch = axe.commons.dom.findUp(
-						elm,
-						elementMap[candidate][candidateIndex]
-					);
-					if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
-						// found an ancestor not in elmStack, and it overlaps
-						let overlaps = axe.commons.dom.visuallyOverlaps(
-							elm.getBoundingClientRect(),
-							ancestorMatch
-						);
-						if (overlaps) {
-							// if target is in the elementMap, use its position.
-							bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
-						}
-					}
-					// nodeName matches value
-					// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
-					if (
-						elm.nodeName === elementMap[candidate][candidateIndex] &&
-						tagArray.indexOf(elm.nodeName) === -1
-					) {
-						bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
-					}
-				}
-			}
-		}
+color.filteredRectStack = function filteredRectStack(elm) {
+	const rectStack = color.getRectStack(elm);
+
+	if (rectStack && rectStack.length === 1) {
+		return rectStack[0];
 	}
-	return bgNodes;
-}
 
-/**
- * Look at document and body elements for relevant background information
- * @private
- * @param {Array} elmStack
- */
-function sortPageBackground(elmStack) {
-	let bodyIndex = elmStack.indexOf(document.body);
+	if (rectStack && rectStack.length > 1) {
+		const boundingStack = rectStack.shift();
+		let isSame;
 
-	let bgNodes = elmStack;
+		// Safari v12.1 does not include labels as part of elementsFromPoint()
+		// if they wrap an input element (UNLESS the label has a background
+		// color). this results in two different rectStacks (since
+		// elm.getClientRects() returns two rects for the element) which
+		// returns null as isSame is false. we can fix this by adding in the
+		// missing label to the boundingStack before checking for isSame
+		// @see https://bugs.webkit.org/show_bug.cgi?id=197743
+		includeMissingElements(boundingStack, elm);
 
-	if (
-		// Check that the body background is the page's background
-		bodyIndex > 1 && // only if there are negative z-index elements
-		!elmHasImage(document.documentElement) &&
-		getBgColor(document.documentElement).alpha === 0
-	) {
-		// Remove body and html from it's current place
-		bgNodes.splice(bodyIndex, 1);
-		bgNodes.splice(elmStack.indexOf(document.documentElement), 1);
+		// iterating over arrays of DOMRects
+		rectStack.forEach((rectList, index) => {
+			if (index === 0) {
+				return;
+			}
+			// if the stacks are the same, use the first one. otherwise, return null.
+			let rectA = rectStack[index - 1],
+				rectB = rectStack[index];
 
-		// Put the body background as the lowest element
-		bgNodes.push(document.body);
-	}
-	return bgNodes;
-}
-/**
- * Get coordinates for an element's client rects or bounding client rect
- * @method getCoords
- * @memberof axe.commons.color
- * @instance
- * @param {DOMRect} rect
- * @return {Object}
- */
-color.getCoords = function(rect) {
-	let x, y;
-	if (rect.left > window.innerWidth) {
-		return;
-	}
-	if (rect.top > window.innerHeight) {
-		return;
+			// if elements in clientRects are the same
+			// or the boundingClientRect contains the differing element, pass it
+			isSame =
+				rectA.every(
+					(element, elementIndex) => element === rectB[elementIndex]
+				) || boundingStack.includes(elm);
+		});
+		if (!isSame) {
+			axe.commons.color.incompleteData.set('bgColor', 'elmPartiallyObscuring');
+			return null;
+		}
+		// pass the first stack if it wasn't partially covered
+		return rectStack[0];
 	}
-	x = Math.min(Math.ceil(rect.left + rect.width / 2), window.innerWidth - 1);
-	y = Math.min(Math.ceil(rect.top + rect.height / 2), window.innerHeight - 1);
 
-	return { x, y };
+	// rect outside of viewport
+	axe.commons.color.incompleteData.set('bgColor', 'outsideViewport');
+	return null;
 };
+
 /**
  * Get relevant stacks of block and inline elements, excluding line breaks
  * @method getRectStack
  * @memberof axe.commons.color
- * @instance
  * @param {Element} elm
  * @return {Array}
  */
 color.getRectStack = function(elm) {
-	let boundingCoords = color.getCoords(elm.getBoundingClientRect());
+	const boundingCoords = axe.commons.color.centerPointOfRect(
+		elm.getBoundingClientRect()
+	);
+
 	if (!boundingCoords) {
 		return null;
 	}
@@ -253,7 +205,7 @@ color.getRectStack = function(elm) {
 			return rect.width && rect.width > 0;
 		})
 		.map(rect => {
-			let coords = color.getCoords(rect);
+			const coords = axe.commons.color.centerPointOfRect(rect);
 			if (coords) {
 				return dom.shadowElementsFromPoint(coords.x, coords.y);
 			}
@@ -268,137 +220,208 @@ color.getRectStack = function(elm) {
 	filteredArr.splice(0, 0, boundingStack);
 	return filteredArr;
 };
+
 /**
- * Get filtered stack of block and inline elements, excluding line breaks
- * @method filteredRectStack
- * @memberof axe.commons.color
- * @instance
- * @param {Element} elm
- * @return {Array}
+ * Look at document and body elements for relevant background information
+ * @method sortPageBackground
+ * @private
+ * @param {Array} elmStack
+ * @returns {Array}
  */
-color.filteredRectStack = function(elm) {
-	let rectStack = color.getRectStack(elm);
-	if (rectStack && rectStack.length === 1) {
-		// default case, elm.getBoundingClientRect()
-		return rectStack[0];
-	} else if (rectStack && rectStack.length > 1) {
-		let boundingStack = rectStack.shift();
-		let isSame;
-		// iterating over arrays of DOMRects
-		rectStack.forEach((rectList, index) => {
-			if (index === 0) {
-				return;
-			}
-			// if the stacks are the same, use the first one. otherwise, return null.
-			let rectA = rectStack[index - 1],
-				rectB = rectStack[index];
+function sortPageBackground(elmStack) {
+	let bodyIndex = elmStack.indexOf(document.body);
+	let bgNodes = elmStack;
 
-			// if elements in clientRects are the same
-			// or the boundingClientRect contains the differing element, pass it
-			isSame =
-				rectA.every(function(element, elementIndex) {
-					return element === rectB[elementIndex];
-				}) || boundingStack.includes(elm);
-		});
-		if (!isSame) {
-			axe.commons.color.incompleteData.set('bgColor', 'elmPartiallyObscuring');
-			return null;
+	// Body can sometimes appear out of order in the stack:
+	//   1) Body is not the first element due to negative z-index elements
+	//   2) Elements are positioned outside of body's rect coordinates
+	//      (see https://github.com/dequelabs/axe-core/issues/1456)
+	// In those instances we want to reinsert body back into the element stack
+	// when not using the root document element as the html canvas for bgcolor
+	// prettier-ignore
+	let sortBodyElement =
+		bodyIndex > 1 || // negative z-index elements
+		bodyIndex === -1; // element does not intersect with body
+
+	if (
+		sortBodyElement &&
+		!color.elementHasImage(document.documentElement) &&
+		color.getOwnBackgroundColor(
+			window.getComputedStyle(document.documentElement)
+		).alpha === 0
+	) {
+		// Only remove document.body if it was originally contained within the element stack
+		if (bodyIndex > 1) {
+			bgNodes.splice(bodyIndex, 1);
 		}
-		// pass the first stack if it wasn't partially covered
-		return rectStack[0];
-	} else {
-		// rect outside of viewport
-		axe.commons.color.incompleteData.set('bgColor', 'outsideViewport');
-		return null;
+		// Remove document element since body will be used for bgcolor
+		bgNodes.splice(elmStack.indexOf(document.documentElement), 1);
+
+		// Put the body background as the lowest element
+		bgNodes.push(document.body);
 	}
-};
+	return bgNodes;
+}
+
 /**
- * Get all elements rendered underneath the current element, In the order they are displayed (front to back)
- * @method getBackgroundStack
- * @memberof axe.commons.color
- * @instance
+ * Include nodes missing from initial gathering because
+ * document.elementsFromPoint misses some elements we need
+ * i.e. TR is missing from table elementStack and leaves out bgColor
+ * https://github.com/dequelabs/axe-core/issues/273
+ * @private
+ * @param {Array} elmStack
  * @param {Element} elm
- * @return {Array}
+ * @returns {Array}
  */
-color.getBackgroundStack = function(elm) {
-	let elmStack = color.filteredRectStack(elm);
-	if (elmStack === null) {
-		return null;
+function includeMissingElements(elmStack, elm) {
+	/*eslint max-depth:["error",7]*/
+	const nodeName = elm.nodeName.toUpperCase();
+	const elementMap = {
+		TD: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
+		TH: ['TR', 'THEAD', 'TBODY', 'TFOOT'],
+		INPUT: ['LABEL']
+	};
+	const tagArray = elmStack.map(elm => {
+		return elm.nodeName.toUpperCase();
+	});
+	let bgNodes = elmStack;
+	for (let candidate in elementMap) {
+		// check that TR or LABEL has paired nodeName from elementMap, but don't expect elm to be that candidate
+		if (tagArray.includes(candidate)) {
+			for (
+				let candidateIndex = 0;
+				candidateIndex < elementMap[candidate].length;
+				candidateIndex++
+			) {
+				// look up the tree for a matching candidate
+				let ancestorMatch = axe.commons.dom.findUp(
+					elm,
+					elementMap[candidate][candidateIndex]
+				);
+				if (ancestorMatch && elmStack.indexOf(ancestorMatch) === -1) {
+					// found an ancestor not in elmStack, and it overlaps
+					let overlaps = axe.commons.dom.visuallyOverlaps(
+						elm.getBoundingClientRect(),
+						ancestorMatch
+					);
+					if (overlaps) {
+						// if target is in the elementMap, use its position.
+						bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, ancestorMatch);
+					}
+				}
+				// nodeName matches value
+				// (such as LABEL, when matching itself. It should be in the list, but Phantom skips it)
+				if (
+					nodeName === elementMap[candidate][candidateIndex] &&
+					tagArray.indexOf(nodeName) === -1
+				) {
+					bgNodes.splice(tagArray.indexOf(candidate) + 1, 0, elm);
+				}
+			}
+		}
 	}
-	elmStack = includeMissingElements(elmStack, elm);
-	elmStack = dom.reduceToElementsBelowFloating(elmStack, elm);
-	elmStack = sortPageBackground(elmStack);
+	return bgNodes;
+}
 
-	// Return all elements BELOW the current element, null if the element is undefined
-	let elmIndex = elmStack.indexOf(elm);
-	if (calculateObscuringAlpha(elmIndex, elmStack, elm) >= 0.99) {
-		// if the total of the elements above our element results in total obscuring, return null
-		axe.commons.color.incompleteData.set('bgColor', 'bgOverlap');
-		return null;
+/**
+ * Determine if element is partially overlapped, triggering a Can't Tell result
+ * @private
+ * @param {Element} elm
+ * @param {Element} bgElm
+ * @param {Object} bgColor
+ * @return {Boolean}
+ */
+function elmPartiallyObscured(elm, bgElm, bgColor) {
+	var obscured =
+		elm !== bgElm && !dom.visuallyContains(elm, bgElm) && bgColor.alpha !== 0;
+	if (obscured) {
+		axe.commons.color.incompleteData.set('bgColor', 'elmPartiallyObscured');
 	}
-	return elmIndex !== -1 ? elmStack : null;
-};
+	return obscured;
+}
 
 /**
- * Returns background color for element
- * Uses color.getBackgroundStack() to get all elements rendered underneath the current element to
- * help determine the background color.
- * @param	{Element} elm Element to determine background color
- * @param	{Array}	 [bgElms=[]]			[description]
- * @param	{Boolean} [noScroll=false] [description]
- * @return {Color}									 [description]
+ * Calculate alpha transparency of a background element obscuring the current node
+ * @private
+ * @param {Number} elmIndex
+ * @param {Array} elmStack
+ * @param {Element} originalElm
+ * @return {Number|undefined}
  */
-color.getBackgroundColor = function(elm, bgElms = [], noScroll = false) {
-	if (noScroll !== true) {
-		// Avoid scrolling overflow:hidden containers, by only aligning to top
-		// when not doing so would move the center point above the viewport top.
-		const clientHeight = elm.getBoundingClientRect().height;
-		const alignToTop = clientHeight - 2 >= window.innerHeight * 2;
-		elm.scrollIntoView(alignToTop);
+function calculateObscuringElement(elmIndex, elmStack, originalElm) {
+	if (elmIndex > 0) {
+		// there are elements above our element, check if they contribute to the background
+		for (var i = elmIndex - 1; i >= 0; i--) {
+			let bgElm = elmStack[i];
+			if (contentOverlapping(originalElm, bgElm)) {
+				return true;
+			} else {
+				// remove elements not contributing to the background
+				elmStack.splice(i, 1);
+			}
+		}
 	}
-	let bgColors = [];
-	let elmStack = color.getBackgroundStack(elm);
-
-	// Search the stack until we have an alpha === 1 background
-	(elmStack || []).some(bgElm => {
-		let bgElmStyle = window.getComputedStyle(bgElm);
-
-		// Get the background color
-		let bgColor = getBgColor(bgElm, bgElmStyle);
 
-		if (
-			// abort if a node is partially obscured and obscuring element has a background
-			elmPartiallyObscured(elm, bgElm, bgColor) ||
-			// OR if the background elm is a graphic
-			elmHasImage(bgElm, bgElmStyle)
-		) {
-			bgColors = null;
-			bgElms.push(bgElm);
+	return false;
+}
 
-			return true;
+/**
+ * Determines overlap of node's content with a bgNode. Used for inline elements
+ * @private
+ * @param {Element} targetElement
+ * @param {Element} bgNode
+ * @return {Boolean}
+ */
+function contentOverlapping(targetElement, bgNode) {
+	// get content box of target element
+	// check to see if the current bgNode is overlapping
+	var targetRect = targetElement.getClientRects()[0];
+	var obscuringElements = dom.shadowElementsFromPoint(
+		targetRect.left,
+		targetRect.top
+	);
+	if (obscuringElements) {
+		for (var i = 0; i < obscuringElements.length; i++) {
+			if (
+				obscuringElements[i] !== targetElement &&
+				obscuringElements[i] === bgNode
+			) {
+				return true;
+			}
 		}
+	}
+	return false;
+}
 
-		if (bgColor.alpha !== 0) {
-			// store elements contributing to the br color.
-			bgElms.push(bgElm);
-			bgColors.push(bgColor);
+/**
+ * Return the scrolling parent element
+ * @see https://stackoverflow.com/questions/35939886/find-first-scrollable-parent#42543908
+ * @param {Element} element
+ * @param {Boolean} includeHidden
+ * @return {Element}
+ */
+function getScrollParent(element, includeHidden) {
+	var style = getComputedStyle(element);
+	var excludeStaticParent = style.position === 'absolute';
+	var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
 
-			// Exit if the background is opaque
-			return bgColor.alpha === 1;
-		} else {
-			return false;
+	if (style.position === 'fixed') {
+		return document.documentElement;
+	}
+	for (var parent = element; (parent = parent.parentElement); ) {
+		style = getComputedStyle(parent);
+		if (excludeStaticParent && style.position === 'static') {
+			continue;
+		}
+		if (
+			overflowRegex.test(style.overflow + style.overflowY + style.overflowX)
+		) {
+			return parent;
 		}
-	});
-
-	if (bgColors !== null && elmStack !== null) {
-		// Mix the colors together, on top of a default white
-		bgColors.push(new color.Color(255, 255, 255, 1));
-		var colors = bgColors.reduce(color.flattenColors);
-		return colors;
 	}
 
-	return null;
-};
+	return document.documentElement;
+}
 
 /**
  * Determines whether an element has a fully opaque background, whether solid color or an image
@@ -406,6 +429,9 @@ color.getBackgroundColor = function(elm, bgElms = [], noScroll = false) {
  * @return {Boolean} false if the background is transparent, true otherwise
  */
 dom.isOpaque = function(node) {
-	let style = window.getComputedStyle(node);
-	return elmHasImage(node, style) || getBgColor(node, style).alpha === 1;
+	const style = window.getComputedStyle(node);
+	return (
+		color.elementHasImage(node, style) ||
+		color.getOwnBackgroundColor(style).alpha === 1
+	);
 };