govuk_publishing_components 18.1.0 → 18.1.1

data/node_modules/axe-core/lib/checks/aria/unsupportedattr.json

@@ -0,0 +1,11 @@
+{
+	"id": "aria-unsupported-attr",
+	"evaluate": "unsupportedattr.js",
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "ARIA attribute is supported",
+			"fail": "ARIA attribute is not widely supported in screen readers and assistive technologies: {{~it.data:value}} {{=value}}{{~}}"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/aria/unsupportedrole.js

@@ -0,0 +1 @@
+return axe.commons.aria.isUnsupportedRole(axe.commons.aria.getRole(node));

data/node_modules/axe-core/lib/checks/aria/unsupportedrole.json

@@ -0,0 +1,11 @@
+{
+	"id": "unsupportedrole",
+	"evaluate": "unsupportedrole.js",
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "ARIA role is supported",
+			"fail": "The role used is not widely supported in screen readers and assistive technologies: {{~it.data:value}} {{=value}}{{~}}"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/aria/valid-attr-value.js

@@ -0,0 +1,32 @@
+options = Array.isArray(options) ? options : [];
+
+var invalid = [],
+	aria = /^aria-/;
+
+var attr,
+	attrName,
+	attrs = node.attributes;
+
+var skipAttrs = ['aria-errormessage'];
+
+for (var i = 0, l = attrs.length; i < l; i++) {
+	attr = attrs[i];
+	attrName = attr.name;
+	// skip any attributes handled elsewhere
+	if (!skipAttrs.includes(attrName)) {
+		if (
+			options.indexOf(attrName) === -1 &&
+			aria.test(attrName) &&
+			!axe.commons.aria.validateAttrValue(node, attrName)
+		) {
+			invalid.push(attrName + '="' + attr.nodeValue + '"');
+		}
+	}
+}
+
+if (invalid.length) {
+	this.data(invalid);
+	return false;
+}
+
+return true;

data/node_modules/axe-core/lib/checks/aria/valid-attr-value.json

@@ -0,0 +1,12 @@
+{
+	"id": "aria-valid-attr-value",
+	"evaluate": "valid-attr-value.js",
+	"options": [],
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "ARIA attribute values are valid",
+			"fail": "Invalid ARIA attribute value{{=it.data && it.data.length > 1 ? 's' : ''}}:{{~it.data:value}} {{=value}}{{~}}"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/aria/valid-attr.js

@@ -0,0 +1,25 @@
+options = Array.isArray(options) ? options : [];
+
+var invalid = [],
+	aria = /^aria-/;
+
+var attr,
+	attrs = node.attributes;
+
+for (var i = 0, l = attrs.length; i < l; i++) {
+	attr = attrs[i].name;
+	if (
+		options.indexOf(attr) === -1 &&
+		aria.test(attr) &&
+		!axe.commons.aria.validateAttr(attr)
+	) {
+		invalid.push(attr);
+	}
+}
+
+if (invalid.length) {
+	this.data(invalid);
+	return false;
+}
+
+return true;

data/node_modules/axe-core/lib/checks/aria/valid-attr.json

@@ -0,0 +1,12 @@
+{
+	"id": "aria-valid-attr",
+	"evaluate": "valid-attr.js",
+	"options": [],
+	"metadata": {
+		"impact": "critical",
+		"messages": {
+			"pass": "ARIA attribute name{{=it.data && it.data.length > 1 ? 's' : ''}} are valid",
+			"fail": "Invalid ARIA attribute name{{=it.data && it.data.length > 1 ? 's' : ''}}:{{~it.data:value}} {{=value}}{{~}}"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/aria/valid-scrollable-semantics.js

@@ -0,0 +1,62 @@
+/**
+ * A map from HTML tag names to a boolean which reflects whether it is
+ * appropriate for scrollable elements found in the focus order.
+ */
+const VALID_TAG_NAMES_FOR_SCROLLABLE_REGIONS = {
+	ARTICLE: true,
+	ASIDE: true,
+	NAV: true,
+	SECTION: true
+};
+
+/**
+ * A map from each landmark role to a boolean which reflects whether it is
+ * appropriate for scrollable elements found in the focus order.
+ */
+const VALID_ROLES_FOR_SCROLLABLE_REGIONS = {
+	application: true,
+	banner: false,
+	complementary: true,
+	contentinfo: true,
+	form: true,
+	main: true,
+	navigation: true,
+	region: true,
+	search: false
+};
+
+/**
+ * @param {HTMLElement} node
+ * @return {Boolean} Whether the element has a tag appropriate for a scrollable
+ *		 region.
+ */
+function validScrollableTagName(node) {
+	// Some elements with nonsensical roles will pass this check, but should be
+	// flagged by other checks.
+	const nodeName = node.nodeName.toUpperCase();
+	return VALID_TAG_NAMES_FOR_SCROLLABLE_REGIONS[nodeName] || false;
+}
+
+/**
+ * @param {HTMLElement} node
+ * @return {Boolean} Whether the node has a role appropriate for a scrollable
+ *		 region.
+ */
+function validScrollableRole(node) {
+	var role = node.getAttribute('role');
+	if (!role) {
+		return false;
+	}
+	return VALID_ROLES_FOR_SCROLLABLE_REGIONS[role.toLowerCase()] || false;
+}
+
+/**
+ * @param {HTMLElement} node
+ * @return {Boolean} Whether the element would have valid semantics if it were a
+ *			scrollable region.
+ */
+function validScrollableSemantics(node) {
+	return validScrollableRole(node) || validScrollableTagName(node);
+}
+
+return validScrollableSemantics(node);

data/node_modules/axe-core/lib/checks/aria/valid-scrollable-semantics.json

@@ -0,0 +1,12 @@
+{
+	"id": "valid-scrollable-semantics",
+	"evaluate": "valid-scrollable-semantics.js",
+	"options": [],
+	"metadata": {
+		"impact": "minor",
+		"messages": {
+			"pass": "Element has valid semantics for an element in the focus order.",
+			"fail": "Element has invalid semantics for an element in the focus order."
+		}
+	}
+}

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

@@ -0,0 +1,70 @@
+const { dom, color, text } = axe.commons;
+
+if (!dom.isVisible(node, false)) {
+	return true;
+}
+
+const noScroll = !!(options || {}).noScroll;
+const bgNodes = [];
+const bgColor = color.getBackgroundColor(node, bgNodes, noScroll);
+const fgColor = color.getForegroundColor(node, noScroll);
+
+const nodeStyle = window.getComputedStyle(node);
+const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
+const fontWeight = nodeStyle.getPropertyValue('font-weight');
+const bold =
+	['bold', 'bolder', '600', '700', '800', '900'].indexOf(fontWeight) !== -1;
+
+const cr = color.hasValidContrastRatio(bgColor, fgColor, fontSize, bold);
+
+// truncate ratio to three digits while rounding down
+// 4.499 = 4.49, 4.019 = 4.01
+const truncatedResult = Math.floor(cr.contrastRatio * 100) / 100;
+
+// if fgColor or bgColor are missing, get more information.
+let missing;
+if (bgColor === null) {
+	missing = color.incompleteData.get('bgColor');
+}
+
+const equalRatio = truncatedResult === 1;
+const shortTextContent =
+	text.visibleVirtual(virtualNode, false, true).length === 1;
+if (equalRatio) {
+	missing = color.incompleteData.set('bgColor', 'equalRatio');
+} else if (shortTextContent) {
+	// Check that the text content is a single character long
+	missing = 'shortTextContent';
+}
+
+// need both independently in case both are missing
+const data = {
+	fgColor: fgColor ? fgColor.toHexString() : undefined,
+	bgColor: bgColor ? bgColor.toHexString() : undefined,
+	contrastRatio: cr ? truncatedResult : undefined,
+	fontSize: ((fontSize * 72) / 96).toFixed(1) + 'pt',
+	fontWeight: bold ? 'bold' : 'normal',
+	missingData: missing,
+	expectedContrastRatio: cr.expectedContrastRatio + ':1'
+};
+
+this.data(data);
+
+// We don't know, so we'll put it into Can't Tell
+if (
+	fgColor === null ||
+	bgColor === null ||
+	equalRatio ||
+	(shortTextContent && !cr.isValid)
+) {
+	missing = null;
+	color.incompleteData.clear();
+	this.relatedNodes(bgNodes);
+	return undefined;
+}
+
+if (!cr.isValid) {
+	this.relatedNodes(bgNodes);
+}
+
+return cr.isValid;

data/node_modules/axe-core/lib/checks/color/color-contrast.json

@@ -0,0 +1,24 @@
+{
+	"id": "color-contrast",
+	"evaluate": "color-contrast.js",
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "Element has sufficient color contrast of {{=it.data.contrastRatio}}",
+			"fail": "Element has insufficient color contrast of {{=it.data.contrastRatio}} (foreground color: {{=it.data.fgColor}}, background color: {{=it.data.bgColor}}, font size: {{=it.data.fontSize}}, font weight: {{=it.data.fontWeight}}). Expected contrast ratio of {{=it.data.expectedContrastRatio}}",
+			"incomplete": {
+				"bgImage": "Element's background color could not be determined due to a background image",
+				"bgGradient": "Element's background color could not be determined due to a background gradient",
+				"imgNode": "Element's background color could not be determined because element contains an image node",
+				"bgOverlap": "Element's background color could not be determined because it is overlapped by another element",
+				"fgAlpha": "Element's foreground color could not be determined because of alpha transparency",
+				"elmPartiallyObscured": "Element's background color could not be determined because it's partially obscured by another element",
+				"elmPartiallyObscuring": "Element's background color could not be determined because it partially overlaps other elements",
+				"outsideViewport": "Element's background color could not be determined because it's outside the viewport",
+				"equalRatio": "Element has a 1:1 contrast ratio with the background",
+				"shortTextContent": "Element content is too short to determine if it is actual text content",
+				"default": "Unable to determine contrast ratio"
+			}
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/color/link-in-text-block.js

@@ -0,0 +1,85 @@
+/* global axe*/
+const { color, dom } = axe.commons;
+
+function getContrast(color1, color2) {
+	var c1lum = color1.getRelativeLuminance();
+	var c2lum = color2.getRelativeLuminance();
+	return (Math.max(c1lum, c2lum) + 0.05) / (Math.min(c1lum, c2lum) + 0.05);
+}
+
+const blockLike = [
+	'block',
+	'list-item',
+	'table',
+	'flex',
+	'grid',
+	'inline-block'
+];
+function isBlock(elm) {
+	var display = window.getComputedStyle(elm).getPropertyValue('display');
+	return blockLike.indexOf(display) !== -1 || display.substr(0, 6) === 'table-';
+}
+
+if (isBlock(node)) {
+	return false;
+}
+
+var parentBlock = dom.getComposedParent(node);
+while (parentBlock.nodeType === 1 && !isBlock(parentBlock)) {
+	parentBlock = dom.getComposedParent(parentBlock);
+}
+
+this.relatedNodes([parentBlock]);
+
+// TODO: Check the :visited state of the link
+if (color.elementIsDistinct(node, parentBlock)) {
+	return true;
+} else {
+	// Check if contrast of foreground is sufficient
+	var nodeColor, parentColor;
+	nodeColor = color.getForegroundColor(node);
+	parentColor = color.getForegroundColor(parentBlock);
+
+	if (!nodeColor || !parentColor) {
+		return undefined;
+	}
+
+	var contrast = getContrast(nodeColor, parentColor);
+	if (contrast === 1) {
+		return true;
+	} else if (contrast >= 3.0) {
+		axe.commons.color.incompleteData.set('fgColor', 'bgContrast');
+		this.data({
+			missingData: axe.commons.color.incompleteData.get('fgColor')
+		});
+		axe.commons.color.incompleteData.clear();
+		// User needs to check whether there is a hover and a focus style
+		return undefined;
+	}
+
+	// Check if contrast of background is sufficient
+	nodeColor = color.getBackgroundColor(node);
+	parentColor = color.getBackgroundColor(parentBlock);
+
+	if (
+		!nodeColor ||
+		!parentColor ||
+		getContrast(nodeColor, parentColor) >= 3.0
+	) {
+		let reason;
+		if (!nodeColor || !parentColor) {
+			reason = axe.commons.color.incompleteData.get('bgColor');
+		} else {
+			reason = 'bgContrast';
+		}
+		axe.commons.color.incompleteData.set('fgColor', reason);
+		this.data({
+			missingData: axe.commons.color.incompleteData.get('fgColor')
+		});
+		axe.commons.color.incompleteData.clear();
+		return undefined;
+	}
+}
+
+// TODO: We should check the focus / hover style too
+return false;

data/node_modules/axe-core/lib/checks/color/link-in-text-block.json

@@ -0,0 +1,19 @@
+{
+	"id": "link-in-text-block",
+	"evaluate": "link-in-text-block.js",
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "Links can be distinguished from surrounding text in some way other than by color",
+			"fail": "Links need to be distinguished from surrounding text in some way other than by color",
+			"incomplete": {
+				"bgContrast": "Element's contrast ratio could not be determined. Check for a distinct hover/focus style",
+				"bgImage": "Element's contrast ratio could not be determined due to a background image",
+				"bgGradient": "Element's contrast ratio could not be determined due to a background gradient",
+				"imgNode": "Element's contrast ratio could not be determined because element contains an image node",
+				"bgOverlap": "Element's contrast ratio could not be determined because of element overlap",
+				"default": "Unable to determine contrast ratio"
+			}
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/forms/autocomplete-appropriate.js

@@ -0,0 +1,67 @@
+// Select and textarea is always allowed
+if (node.nodeName.toUpperCase() !== 'INPUT') {
+	return true;
+}
+
+const number = ['text', 'search', 'number'];
+const url = ['text', 'search', 'url'];
+const allowedTypesMap = {
+	bday: ['text', 'search', 'date'],
+	email: ['text', 'search', 'email'],
+	'cc-exp': ['text', 'search', 'month'],
+	'street-address': ['text'], // Issue: https://github.com/dequelabs/axe-core/issues/1161
+	tel: ['text', 'search', 'tel'],
+	'cc-exp-month': number,
+	'cc-exp-year': number,
+	'transaction-amount': number,
+	'bday-day': number,
+	'bday-month': number,
+	'bday-year': number,
+	'new-password': ['text', 'search', 'password'],
+	'current-password': ['text', 'search', 'password'],
+	url: url,
+	photo: url,
+	impp: url
+};
+
+if (typeof options === 'object') {
+	// Merge in options
+	Object.keys(options).forEach(key => {
+		if (!allowedTypesMap[key]) {
+			allowedTypesMap[key] = [];
+		}
+		allowedTypesMap[key] = allowedTypesMap[key].concat(options[key]);
+	});
+}
+
+const autocomplete = node.getAttribute('autocomplete');
+const autocompleteTerms = autocomplete
+	.split(/\s+/g)
+	.map(term => term.toLowerCase());
+
+const purposeTerm = autocompleteTerms[autocompleteTerms.length - 1];
+if (axe.commons.text.autocomplete.stateTerms.includes(purposeTerm)) {
+	return true;
+}
+
+const allowedTypes = allowedTypesMap[purposeTerm];
+
+/**
+ * Note:
+ * Inconsistent response for `node.type` across browsers, hence resolving and sanitizing using getAttribute
+ * Example:
+ * Firefox returns `node.type` as `text` for `type='month'`
+ *
+ * Reference HTML Spec - https://html.spec.whatwg.org/multipage/input.html#the-input-element to filter allowed values for `type`
+ * and sanitize (https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm)
+ */
+let type = node.hasAttribute('type')
+	? axe.commons.text.sanitize(node.getAttribute('type')).toLowerCase()
+	: 'text';
+type = axe.utils.validInputTypes().includes(type) ? type : 'text';
+
+if (typeof allowedTypes === 'undefined') {
+	return type === 'text';
+}
+
+return allowedTypes.includes(type);