govuk_publishing_components 21.16.3 → 21.17.0

data/node_modules/axe-core/lib/commons/forms/is-aria-range.js

@@ -0,0 +1,14 @@
+/* global forms */
+const rangeRoles = ['progressbar', 'scrollbar', 'slider', 'spinbutton'];
+
+/**
+ * Determines if an element is an aria range element
+ * @method isAriaRange
+ * @memberof axe.commons.forms
+ * @param {Element} node Node to determine if aria range
+ * @returns {Bool}
+ */
+forms.isAriaRange = function(node) {
+	const role = axe.commons.aria.getRole(node, { noImplicit: true });
+	return rangeRoles.includes(role);
+};

data/node_modules/axe-core/lib/commons/forms/is-aria-textbox.js

@@ -0,0 +1,13 @@
+/* global forms */
+
+/**
+ * Determines if an element is an aria textbox element
+ * @method isAriaTextbox
+ * @memberof axe.commons.forms
+ * @param {Element} node Node to determine if aria textbox
+ * @returns {Bool}
+ */
+forms.isAriaTextbox = function(node) {
+	const role = axe.commons.aria.getRole(node, { noImplicit: true });
+	return role === 'textbox';
+};

data/node_modules/axe-core/lib/commons/forms/is-native-select.js

@@ -0,0 +1,13 @@
+/* global forms */
+
+/**
+ * Determines if an element is a native select element
+ * @method isNativeSelect
+ * @memberof axe.commons.forms
+ * @param {Element} node Node to determine if select
+ * @returns {Bool}
+ */
+forms.isNativeSelect = function(node) {
+	const nodeName = node.nodeName.toUpperCase();
+	return nodeName === 'SELECT';
+};

data/node_modules/axe-core/lib/commons/forms/is-native-textbox.js

@@ -0,0 +1,28 @@
+/* global forms */
+const nonTextInputTypes = [
+	'button',
+	'checkbox',
+	'color',
+	'file',
+	'hidden',
+	'image',
+	'password',
+	'radio',
+	'reset',
+	'submit'
+];
+
+/**
+ * Determines if an element is a native textbox element
+ * @method isNativeTextbox
+ * @memberof axe.commons.forms
+ * @param {Element} node Node to determine if textbox
+ * @returns {Bool}
+ */
+forms.isNativeTextbox = function(node) {
+	const nodeName = node.nodeName.toUpperCase();
+	return (
+		nodeName === 'TEXTAREA' ||
+		(nodeName === 'INPUT' && !nonTextInputTypes.includes(node.type))
+	);
+};

data/node_modules/axe-core/lib/commons/table/get-cell-position.js

@@ -8,7 +8,7 @@
  * @param  {HTMLTableCellElement} cell The table cell of which to get the position
  * @return {Object} Object with `x` and `y` properties of the coordinates
  */
-table.getCellPosition = function(cell, tableGrid) {
+table.getCellPosition = axe.utils.memoize(function(cell, tableGrid) {
 	var rowIndex, index;
 	if (!tableGrid) {
 		tableGrid = table.toGrid(dom.findUp(cell, 'table'));
@@ -25,4 +25,4 @@ table.getCellPosition = function(cell, tableGrid) {
 			}
 		}
 	}
-};
+});

data/node_modules/axe-core/lib/commons/table/get-headers.js

@@ -1,29 +1,73 @@
 /* global table */
 
+/**
+ * Loop through the table grid looking for headers and caching the result.
+ * @param {String} headerType The type of header to look for ("row" or "col")
+ * @param {Object} position The position of the cell to start looking
+ * @param {Array} tablegrid A matrix of the table obtained using axe.commons.table.toGrid
+ * @return {Array<HTMLTableCellElement>} Array of HTMLTableCellElements that are headers
+ */
+function traverseForHeaders(headerType, position, tableGrid) {
+	const property = headerType === 'row' ? '_rowHeaders' : '_colHeaders';
+	const predicate =
+		headerType === 'row' ? table.isRowHeader : table.isColumnHeader;
+	const rowEnd = headerType === 'row' ? position.y : 0;
+	const colEnd = headerType === 'row' ? 0 : position.x;
+
+	let headers;
+	const cells = [];
+	for (let row = position.y; row >= rowEnd && !headers; row--) {
+		for (let col = position.x; col >= colEnd; col--) {
+			const cell = tableGrid[row] ? tableGrid[row][col] : undefined;
+
+			if (!cell) {
+				continue;
+			}
+
+			// stop traversing once we've found a cache
+			const vNode = axe.utils.getNodeFromTree(cell);
+			if (vNode[property]) {
+				headers = vNode[property];
+				break;
+			}
+
+			cells.push(cell);
+		}
+	}
+
+	// need to check that the cells we've traversed are headers
+	headers = (headers || []).concat(cells.filter(predicate));
+
+	// cache results
+	cells.forEach(tableCell => {
+		const vNode = axe.utils.getNodeFromTree(tableCell);
+		vNode[property] = headers;
+	});
+
+	return headers;
+}
+
 /**
  * Get any associated table headers for a `HTMLTableCellElement`
  * @method getHeaders
  * @memberof axe.commons.table
  * @instance
  * @param  {HTMLTableCellElement} cell The cell of which to get headers
+ * @param {Array} [tablegrid] A matrix of the table obtained using axe.commons.table.toGrid
  * @return {Array<HTMLTableCellElement>} Array of headers associated to the table cell
  */
-table.getHeaders = function(cell) {
+table.getHeaders = function(cell, tableGrid) {
 	if (cell.hasAttribute('headers')) {
 		return commons.dom.idrefs(cell, 'headers');
 	}
-
-	var tableGrid = commons.table.toGrid(commons.dom.findUp(cell, 'table'));
-	var position = commons.table.getCellPosition(cell, tableGrid);
+	if (!tableGrid) {
+		tableGrid = commons.table.toGrid(commons.dom.findUp(cell, 'table'));
+	}
+	const position = commons.table.getCellPosition(cell, tableGrid);
 
 	// TODO: RTL text
-	var rowHeaders = table
-		.traverse('left', position, tableGrid)
-		.filter(cell => table.isRowHeader(cell));
-
-	var colHeaders = table
-		.traverse('up', position, tableGrid)
-		.filter(cell => table.isColumnHeader(cell));
+	const rowHeaders = traverseForHeaders('row', position, tableGrid);
+	const colHeaders = traverseForHeaders('col', position, tableGrid);
 
 	return [].concat(rowHeaders, colHeaders).reverse();
 };

data/node_modules/axe-core/lib/commons/table/get-scope.js

@@ -29,7 +29,7 @@ table.getScope = function(cell) {
 		return false;
 	}
 	var tableGrid = table.toGrid(dom.findUp(cell, 'table'));
-	var pos = table.getCellPosition(cell);
+	var pos = table.getCellPosition(cell, tableGrid);
 
 	// The element is in a row with all th elements, that makes it a column header
 	var headerRow = tableGrid[pos.y].reduce((headerRow, cell) => {

data/node_modules/axe-core/lib/commons/table/is-data-table.js

@@ -1,5 +1,4 @@
 /* global table, dom */
-/* eslint max-statements: ["error",70], complexity: ["error",47] */
 
 /**
  * Determines whether a table is a data table

data/node_modules/axe-core/lib/commons/table/to-grid.js

@@ -8,7 +8,7 @@
  * @param  {HTMLTableElement} node The table to convert
  * @return {Array<HTMLTableCellElement>} Array of HTMLTableCellElements
  */
-table.toGrid = function(node) {
+table.toGrid = axe.utils.memoize(function(node) {
 	var table = [];
 	var rows = node.rows;
 	for (var i = 0, rowLength = rows.length; i < rowLength; i++) {
@@ -32,7 +32,7 @@ table.toGrid = function(node) {
 	}
 
 	return table;
-};
+});
 
 // This was the old name
 table.toArray = table.toGrid;

data/node_modules/axe-core/lib/commons/text/accessible-text-virtual.js

@@ -11,7 +11,7 @@
  * @return {string}
  */
 text.accessibleText = function accessibleText(element, context) {
-	let virtualNode = axe.utils.getNodeFromTree(axe._tree[0], element); // throws an exception on purpose if axe._tree not correct
+	const virtualNode = axe.utils.getNodeFromTree(element); // throws an exception on purpose if axe._tree not correct
 	return text.accessibleTextVirtual(virtualNode, context);
 };
 
@@ -49,6 +49,10 @@ text.accessibleTextVirtual = function accessibleTextVirtual(
 
 	// Find the first step that returns a non-empty string
 	let accName = computationSteps.reduce((accName, step) => {
+		if (context.startNode === virtualNode) {
+			accName = text.sanitize(accName);
+		}
+
 		if (accName !== '') {
 			// yes, whitespace only a11y names halt the algorithm
 			return accName;
@@ -56,10 +60,6 @@ text.accessibleTextVirtual = function accessibleTextVirtual(
 		return step(virtualNode, context);
 	}, '');
 
-	if (context.startNode === virtualNode) {
-		accName = text.sanitize(accName);
-	}
-
 	if (context.debug) {
 		axe.log(accName || '{empty-value}', actualNode, context);
 	}

data/node_modules/axe-core/lib/commons/text/form-control-value.js

@@ -1,7 +1,13 @@
 /* global text, aria, dom */
-const selectRoles = ['combobox', 'listbox'];
-const rangeRoles = ['progressbar', 'scrollbar', 'slider', 'spinbutton'];
-const controlValueRoles = ['textbox', ...selectRoles, ...rangeRoles];
+const controlValueRoles = [
+	'textbox',
+	'progressbar',
+	'scrollbar',
+	'slider',
+	'spinbutton',
+	'combobox',
+	'listbox'
+];
 
 text.formControlValueMethods = {
 	nativeTextboxValue,
@@ -62,24 +68,7 @@ text.formControlValue = function formControlValue(virtualNode, context = {}) {
  */
 function nativeTextboxValue(node) {
 	node = node.actualNode || node;
-	const nonTextInputTypes = [
-		'button',
-		'checkbox',
-		'file',
-		'hidden',
-		'image',
-		'password',
-		'radio',
-		'reset',
-		'submit',
-		'color'
-	];
-	const nodeName = node.nodeName.toUpperCase();
-
-	if (
-		nodeName === 'TEXTAREA' ||
-		(nodeName === 'INPUT' && !nonTextInputTypes.includes(node.type))
-	) {
+	if (axe.commons.forms.isNativeTextbox(node)) {
 		return node.value || '';
 	}
 	return '';
@@ -93,7 +82,7 @@ function nativeTextboxValue(node) {
  */
 function nativeSelectValue(node) {
 	node = node.actualNode || node;
-	if (node.nodeName.toUpperCase() !== 'SELECT') {
+	if (!axe.commons.forms.isNativeSelect(node)) {
 		return '';
 	}
 	return (
@@ -112,8 +101,7 @@ function nativeSelectValue(node) {
  */
 function ariaTextboxValue(virtualNode) {
 	const { actualNode } = virtualNode;
-	const role = aria.getRole(actualNode);
-	if (role !== 'textbox') {
+	if (!axe.commons.forms.isAriaTextbox(actualNode)) {
 		return '';
 	}
 	if (!dom.isHiddenWithCSS(actualNode)) {
@@ -135,8 +123,7 @@ function ariaTextboxValue(virtualNode) {
  */
 function ariaListboxValue(virtualNode, context) {
 	const { actualNode } = virtualNode;
-	const role = aria.getRole(actualNode);
-	if (role !== 'listbox') {
+	if (!axe.commons.forms.isAriaListbox(actualNode)) {
 		return '';
 	}
 
@@ -169,11 +156,10 @@ function ariaListboxValue(virtualNode, context) {
  */
 function ariaComboboxValue(virtualNode, context) {
 	const { actualNode } = virtualNode;
-	const role = aria.getRole(actualNode, { noImplicit: true });
 	let listbox;
 
 	// For combobox, find the first owned listbox:
-	if (!role === 'combobox') {
+	if (!axe.commons.forms.isAriaCombobox(actualNode)) {
 		return '';
 	}
 	listbox = aria
@@ -193,8 +179,10 @@ function ariaComboboxValue(virtualNode, context) {
  */
 function ariaRangeValue(node) {
 	node = node.actualNode || node;
-	const role = aria.getRole(node);
-	if (!rangeRoles.includes(role) || !node.hasAttribute('aria-valuenow')) {
+	if (
+		!axe.commons.forms.isAriaRange(node) ||
+		!node.hasAttribute('aria-valuenow')
+	) {
 		return '';
 	}
 	// Validate the number, if not, return 0.

data/node_modules/axe-core/lib/commons/text/is-icon-ligature.js

@@ -0,0 +1,210 @@
+/* global text */
+
+/**
+ * Determines if a given text node is an icon ligature
+ *
+ * @method isIconLigature
+ * @memberof axe.commons.text
+ * @instance
+ * @param {VirtualNode} textVNode The virtual text node
+ * @param {Number} occuranceThreshold Number of times the font is encountered before auto-assigning the font as a ligature or not
+ * @param {Number} differenceThreshold Percent of differences in pixel data or pixel width needed to determine if a font is a ligature font
+ * @return {Boolean}
+ */
+text.isIconLigature = function(
+	textVNode,
+	differenceThreshold = 0.15,
+	occuranceThreshold = 3
+) {
+	/**
+	 * Determine if the visible text is a ligature by comparing the
+	 * first letters image data to the entire strings image data.
+	 * If the two images are significantly different (typical set to 5%
+	 * statistical significance, but we'll be using a slightly higher value
+	 * of 15% to help keep the size of the canvas down) then we know the text
+	 * has been replaced by a ligature.
+	 *
+	 * Example:
+	 * If a text node was the string "File", looking at just the first
+	 * letter "F" would produce the following image:
+	 *
+	 * ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
+	 * │ │ │█│█│█│█│█│█│█│█│█│█│█│ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│█│█│█│█│█│█│█│█│█│ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│ │ │ │ │ │ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│ │ │ │ │ │ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│█│█│█│█│█│ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│█│█│█│█│█│ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│ │ │ │ │ │ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│ │ │ │ │ │ │ │ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │ │█│█│ │ │ │ │ │ │ │ │ │ │ │
+	 * └─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
+	 *
+	 * But if the entire string "File" produced an image which had at least
+	 * a 15% difference in pixels, we would know that the string was replaced
+	 * by a ligature:
+	 *
+	 * ┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
+	 * │ │█│█│█│█│█│█│█│█│█│█│ │ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │ │ │ │ │ │ │ │█│█│ │ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │█│█│█│█│█│█│ │█│ │█│ │ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │ │ │ │ │ │ │ │█│█│█│█│ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │█│█│█│█│█│█│ │ │ │ │█│ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │ │ │ │ │ │ │ │ │ │ │█│ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │█│█│█│█│█│█│█│█│█│ │█│ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│ │ │ │ │ │ │ │ │ │ │ │█│ │
+	 * ├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
+	 * │ │█│█│█│█│█│█│█│█│█│█│█│█│█│ │
+	 * └─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
+	 */
+	const nodeValue = textVNode.actualNode.nodeValue.trim();
+
+	// text with unicode or non-bmp letters cannot be ligature icons
+	if (
+		!text.sanitize(nodeValue) ||
+		text.hasUnicode(nodeValue, { emoji: true, nonBmp: true })
+	) {
+		return false;
+	}
+
+	if (!axe._cache.get('canvasContext')) {
+		axe._cache.set(
+			'canvasContext',
+			document.createElement('canvas').getContext('2d')
+		);
+	}
+	const canvasContext = axe._cache.get('canvasContext');
+	const canvas = canvasContext.canvas;
+
+	// keep track of each font encountered and the number of times it shows up
+	// as a ligature.
+	if (!axe._cache.get('fonts')) {
+		axe._cache.set('fonts', {});
+	}
+	const fonts = axe._cache.get('fonts');
+
+	const style = window.getComputedStyle(textVNode.parent.actualNode);
+	const fontFamily = style.getPropertyValue('font-family');
+
+	if (!fonts[fontFamily]) {
+		fonts[fontFamily] = {
+			occurances: 0,
+			numLigatures: 0
+		};
+	}
+	const font = fonts[fontFamily];
+
+	// improve the performance by only comparing the image data of a font
+	// a certain number of times
+	if (font.occurances >= occuranceThreshold) {
+		// if the font has always been a ligature assume it's a ligature font
+		if (font.numLigatures / font.occurances === 1) {
+			return true;
+		}
+		// inversely, if it's never been a ligature assume it's not a ligature font
+		else if (font.numLigatures === 0) {
+			return false;
+		}
+
+		// we could theoretically get into an odd middle ground scenario in which
+		// the font family is being used as normal text sometimes and as icons
+		// other times. in these cases we would need to always check the text
+		// to know if it's an icon or not
+	}
+	font.occurances++;
+
+	// 30px was chosen to account for common ligatures in normal fonts
+	// such as fi, ff, ffi. If a ligature would add a single column of
+	// pixels to a 30x30 grid, it would not meet the statistical significance
+	// threshold of 15% (30x30 = 900; 30/900 = 3.333%). this also allows for
+	// more than 1 column differences (60/900 = 6.666%) and things like
+	// extending the top of the f in the fi ligature.
+	let fontSize = 30;
+	let fontStyle = `${fontSize}px ${fontFamily}`;
+
+	// set the size of the canvas to the width of the first letter
+	canvasContext.font = fontStyle;
+	const firstChar = nodeValue.charAt(0);
+	let width = canvasContext.measureText(firstChar).width;
+
+	// ensure font meets the 30px width requirement (30px font-size doesn't
+	// necessarily mean its 30px wide when drawn)
+	if (width < 30) {
+		const diff = 30 / width;
+		width *= diff;
+		fontSize *= diff;
+		fontStyle = `${fontSize}px ${fontFamily}`;
+	}
+	canvas.width = width;
+	canvas.height = fontSize;
+
+	// changing the dimensions of a canvas resets all properties (include font)
+	// and clears it
+	canvasContext.font = fontStyle;
+	canvasContext.textAlign = 'left';
+	canvasContext.textBaseline = 'top';
+	canvasContext.fillText(firstChar, 0, 0);
+	const compareData = new Uint32Array(
+		canvasContext.getImageData(0, 0, width, fontSize).data.buffer
+	);
+
+	// if the font doesn't even have character data for a single char then
+	// it has to be an icon ligature (e.g. Material Icon)
+	if (!compareData.some(pixel => pixel)) {
+		font.numLigatures++;
+		return true;
+	}
+
+	canvasContext.clearRect(0, 0, width, fontSize);
+	canvasContext.fillText(nodeValue, 0, 0);
+	const compareWith = new Uint32Array(
+		canvasContext.getImageData(0, 0, width, fontSize).data.buffer
+	);
+
+	// calculate the number of differences between the first letter and the
+	// entire string, ignoring color differences
+	const differences = compareData.reduce((diff, pixel, i) => {
+		if (pixel === 0 && compareWith[i] === 0) {
+			return diff;
+		}
+		if (pixel !== 0 && compareWith[i] !== 0) {
+			return diff;
+		}
+		return ++diff;
+	}, 0);
+
+	// calculate the difference between the width of each character and the
+	// combined with of all characters
+	const expectedWidth = nodeValue.split('').reduce((width, char) => {
+		return width + canvasContext.measureText(char).width;
+	}, 0);
+	const actualWidth = canvasContext.measureText(nodeValue).width;
+
+	const pixelDifference = differences / compareData.length;
+	const sizeDifference = 1 - actualWidth / expectedWidth;
+
+	if (
+		pixelDifference >= differenceThreshold &&
+		sizeDifference >= differenceThreshold
+	) {
+		font.numLigatures++;
+		return true;
+	}
+
+	return false;
+};