govuk_publishing_components 18.1.0 → 18.1.1

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

@@ -0,0 +1,172 @@
+/* global color */
+
+/**
+ * @class Color
+ * @memberof axe.commons.color
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @param {number} alpha
+ */
+color.Color = function(red, green, blue, alpha) {
+	/** @type {number} */
+	this.red = red;
+
+	/** @type {number} */
+	this.green = green;
+
+	/** @type {number} */
+	this.blue = blue;
+
+	/** @type {number} */
+	this.alpha = alpha;
+
+	/**
+	 * Provide the hex string value for the color
+	 * @method toHexString
+	 * @memberof axe.commons.color.Color
+	 * @instance
+	 * @return {string}
+	 */
+	this.toHexString = function() {
+		var redString = Math.round(this.red).toString(16);
+		var greenString = Math.round(this.green).toString(16);
+		var blueString = Math.round(this.blue).toString(16);
+		return (
+			'#' +
+			(this.red > 15.5 ? redString : '0' + redString) +
+			(this.green > 15.5 ? greenString : '0' + greenString) +
+			(this.blue > 15.5 ? blueString : '0' + blueString)
+		);
+	};
+
+	var rgbRegex = /^rgb\((\d+), (\d+), (\d+)\)$/;
+	var rgbaRegex = /^rgba\((\d+), (\d+), (\d+), (\d*(\.\d+)?)\)/;
+
+	/**
+	 * Set the color value based on a CSS RGB/RGBA string
+	 * @method parseRgbString
+	 * @memberof axe.commons.color.Color
+	 * @instance
+	 * @param  {string}  rgb  The string value
+	 */
+	this.parseRgbString = function(colorString) {
+		// IE can pass transparent as value instead of rgba
+		if (colorString === 'transparent') {
+			this.red = 0;
+			this.green = 0;
+			this.blue = 0;
+			this.alpha = 0;
+			return;
+		}
+		var match = colorString.match(rgbRegex);
+
+		if (match) {
+			this.red = parseInt(match[1], 10);
+			this.green = parseInt(match[2], 10);
+			this.blue = parseInt(match[3], 10);
+			this.alpha = 1;
+			return;
+		}
+
+		match = colorString.match(rgbaRegex);
+		if (match) {
+			this.red = parseInt(match[1], 10);
+			this.green = parseInt(match[2], 10);
+			this.blue = parseInt(match[3], 10);
+			this.alpha = parseFloat(match[4]);
+			return;
+		}
+	};
+
+	/**
+	 * Get the relative luminance value
+	 * using algorithm from http://www.w3.org/WAI/GL/wiki/Relative_luminance
+	 * @method getRelativeLuminance
+	 * @memberof axe.commons.color.Color
+	 * @instance
+	 * @return {number} The luminance value, ranges from 0 to 1
+	 */
+	this.getRelativeLuminance = function() {
+		var rSRGB = this.red / 255;
+		var gSRGB = this.green / 255;
+		var bSRGB = this.blue / 255;
+
+		var r =
+			rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4);
+		var g =
+			gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4);
+		var b =
+			bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4);
+
+		return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+	};
+};
+
+/**
+ * Combine the two given color according to alpha blending.
+ * @method flattenColors
+ * @memberof axe.commons.color.Color
+ * @instance
+ * @param {Color} fgColor Foreground color
+ * @param {Color} bgColor Background color
+ * @return {Color} Blended color
+ */
+color.flattenColors = function(fgColor, bgColor) {
+	var alpha = fgColor.alpha;
+	var r = (1 - alpha) * bgColor.red + alpha * fgColor.red;
+	var g = (1 - alpha) * bgColor.green + alpha * fgColor.green;
+	var b = (1 - alpha) * bgColor.blue + alpha * fgColor.blue;
+	var a = fgColor.alpha + bgColor.alpha * (1 - fgColor.alpha);
+
+	return new color.Color(r, g, b, a);
+};
+
+/**
+ * Get the contrast of two colors
+ * @method getContrast
+ * @memberof axe.commons.color.Color
+ * @instance
+ * @param  {Color}  bgcolor  Background color
+ * @param  {Color}  fgcolor  Foreground color
+ * @return {number} The contrast ratio
+ */
+color.getContrast = function(bgColor, fgColor) {
+	if (!fgColor || !bgColor) {
+		return null;
+	}
+
+	if (fgColor.alpha < 1) {
+		fgColor = color.flattenColors(fgColor, bgColor);
+	}
+
+	var bL = bgColor.getRelativeLuminance();
+	var fL = fgColor.getRelativeLuminance();
+
+	return (Math.max(fL, bL) + 0.05) / (Math.min(fL, bL) + 0.05);
+};
+
+/**
+ * Check whether certain text properties meet WCAG contrast rules
+ * @method hasValidContrastRatio
+ * @memberof axe.commons.color.Color
+ * @instance
+ * @param  {Color}  bgcolor  Background color
+ * @param  {Color}  fgcolor  Foreground color
+ * @param  {number}  fontSize  Font size of text, in pixels
+ * @param  {boolean}  isBold  Whether the text is bold
+ * @return {{isValid: boolean, contrastRatio: number, expectedContrastRatio: number}}
+ */
+color.hasValidContrastRatio = function(bg, fg, fontSize, isBold) {
+	var contrast = color.getContrast(bg, fg);
+	var isSmallFont =
+		(isBold && Math.ceil(fontSize * 72) / 96 < 14) ||
+		(!isBold && Math.ceil(fontSize * 72) / 96 < 18);
+	var expectedContrastRatio = isSmallFont ? 4.5 : 3;
+
+	return {
+		isValid: contrast > expectedContrastRatio,
+		contrastRatio: contrast,
+		expectedContrastRatio: expectedContrastRatio
+	};
+};

data/node_modules/axe-core/lib/commons/color/element-is-distinct.js

@@ -0,0 +1,88 @@
+/* global color */
+
+/**
+ * Creates a string array of fonts for given CSSStyleDeclaration object
+ * @private
+ * @param {Object} style CSSStyleDeclaration object
+ * @return {Array}
+ */
+function _getFonts(style) {
+	return style
+		.getPropertyValue('font-family')
+		.split(/[,;]/g)
+		.map(function(font) {
+			return font.trim().toLowerCase();
+		});
+}
+
+/**
+ * Determine if the text content of two nodes is styled in a way that they can be distinguished without relying on color
+ * @method elementIsDistinct
+ * @memberof axe.commons.color
+ * @instance
+ * @param  {HTMLElement} node The element to check
+ * @param  {HTMLElement} ancestorNode The ancestor node element to check
+ * @return {Boolean}
+ */
+function elementIsDistinct(node, ancestorNode) {
+	var nodeStyle = window.getComputedStyle(node);
+
+	// Check if the link has a background
+	if (nodeStyle.getPropertyValue('background-image') !== 'none') {
+		return true;
+	}
+
+	// Check if the link has a border or outline
+	var hasBorder = ['border-bottom', 'border-top', 'outline'].reduce(function(
+		result,
+		edge
+	) {
+		var borderClr = new color.Color();
+		borderClr.parseRgbString(nodeStyle.getPropertyValue(edge + '-color'));
+
+		// Check if a border/outline was specified
+		return (
+			result ||
+			// or if the current border edge / outline
+			(nodeStyle.getPropertyValue(edge + '-style') !== 'none' &&
+				parseFloat(nodeStyle.getPropertyValue(edge + '-width')) > 0 &&
+				borderClr.alpha !== 0)
+		);
+	},
+	false);
+
+	if (hasBorder) {
+		return true;
+	}
+
+	var parentStyle = window.getComputedStyle(ancestorNode);
+	// Compare fonts
+	if (_getFonts(nodeStyle)[0] !== _getFonts(parentStyle)[0]) {
+		return true;
+	}
+
+	var hasStyle = [
+		'text-decoration-line',
+		'text-decoration-style',
+		'font-weight',
+		'font-style',
+		'font-size'
+	].reduce(function(result, cssProp) {
+		return (
+			result ||
+			nodeStyle.getPropertyValue(cssProp) !==
+				parentStyle.getPropertyValue(cssProp)
+		);
+	}, false);
+
+	var tDec = nodeStyle.getPropertyValue('text-decoration');
+	if (tDec.split(' ').length < 3) {
+		// old style CSS text decoration
+		hasStyle =
+			hasStyle || tDec !== parentStyle.getPropertyValue('text-decoration');
+	}
+
+	return hasStyle;
+}
+
+color.elementIsDistinct = elementIsDistinct;

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

@@ -0,0 +1,411 @@
+/* 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}
+ */
+function elmHasImage(elm, style) {
+	var nodeName = elm.nodeName.toUpperCase();
+	if (graphicNodes.includes(nodeName)) {
+		axe.commons.color.incompleteData.set('bgColor', 'imgNode');
+		return true;
+	}
+
+	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'
+		);
+	}
+	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 bgColor = new color.Color();
+	bgColor.parseRgbString(elmStyle.getPropertyValue('background-color'));
+
+	if (bgColor.alpha !== 0) {
+		let opacity = elmStyle.getPropertyValue('opacity');
+		bgColor.alpha = bgColor.alpha * opacity;
+	}
+	return bgColor;
+}
+
+/**
+ * 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;
+}
+/**
+ * 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);
+			}
+		}
+	}
+	return totalAlpha;
+}
+/**
+ * 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 obscured;
+}
+
+/**
+ * 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
+ */
+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);
+					}
+				}
+			}
+		}
+	}
+	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);
+
+	let bgNodes = elmStack;
+
+	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);
+
+		// 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;
+	}
+	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 };
+};
+/**
+ * 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());
+	if (!boundingCoords) {
+		return null;
+	}
+
+	let boundingStack = dom.shadowElementsFromPoint(
+		boundingCoords.x,
+		boundingCoords.y
+	);
+
+	let rects = Array.from(elm.getClientRects());
+	// If the element does not have multiple rects, like for display:block, return a single stack
+	if (!rects || rects.length <= 1) {
+		return [boundingStack];
+	}
+
+	// Handle inline elements spanning multiple lines to be evaluated
+	let filteredArr = rects
+		.filter(rect => {
+			// exclude manual line breaks in Chrome/Safari
+			return rect.width && rect.width > 0;
+		})
+		.map(rect => {
+			let coords = color.getCoords(rect);
+			if (coords) {
+				return dom.shadowElementsFromPoint(coords.x, coords.y);
+			}
+		});
+
+	if (filteredArr.some(stack => stack === undefined)) {
+		// Can be happen when one or more of the rects sits outside the viewport
+		return null;
+	}
+
+	// add bounding client rect stack for comparison later
+	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}
+ */
+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];
+
+			// 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;
+		}
+		// 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;
+	}
+};
+/**
+ * Get all elements rendered underneath the current element, In the order they are displayed (front to back)
+ * @method getBackgroundStack
+ * @memberof axe.commons.color
+ * @instance
+ * @param {Element} elm
+ * @return {Array}
+ */
+color.getBackgroundStack = function(elm) {
+	let elmStack = color.filteredRectStack(elm);
+	if (elmStack === null) {
+		return null;
+	}
+	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 (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;
+	}
+	return elmIndex !== -1 ? elmStack : null;
+};
+
+/**
+ * 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]
+ */
+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);
+	}
+	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 true;
+		}
+
+		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 null;
+};
+
+/**
+ * Determines whether an element has a fully opaque background, whether solid color or an image
+ * @param {Element} node
+ * @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;
+};