govuk_publishing_components 21.16.3 → 21.17.0

data/node_modules/axe-core/doc/rule-development.md

@@ -2,7 +2,7 @@
 
 Before you start writing axe-core rules, be sure to create a proposal for them in a github issue. Read [Proposing Axe-core rules](./rule-proposal.md) for details.
 
-A rule is a JSON Object that defines a test for aXe-core to run. At a high level, think of a rule as doing two things. First it finds all elements that it should test, and after that it runs a number of checks to see if those selected elements pass or fail the rule.
+A rule is a JSON Object that defines a test for axe-core to run. At a high level, think of a rule as doing two things. First it finds all elements that it should test, and after that it runs a number of checks to see if those selected elements pass or fail the rule.
 
 ## Rule Select and Matches
 
@@ -33,7 +33,7 @@ The actual testing of elements in axe-core is done by checks. A rule has one or
 | enabled              | Does the rule run by default                                        |
 | tags                 | Grouping for the rule, such as wcag2a, best-practice                |
 | metadata.description | Description of what a rule does                                     |
-| metadata.help        | Short description of a violation, used in the aXe extension sidebar |
+| metadata.help        | Short description of a violation, used in the axe extension sidebar |
 
 ## Check Properties
 
@@ -93,3 +93,31 @@ this.data({
 	missingData: 'bgImage'
 });
 ```
+
+# Hierarchical rules
+
+Axe-core handles shadow DOM and cross-domain iframe rules very well - as long as you take care in the design and implementation of your rule. Any rule that evaluates the DOM hierarchy needs to think about what happens across shadow DOM boundaries and iframe boundaries.
+
+The rule callbacks all receive both a `node` and a `virtualNode` argument (in addition to the `options` argument). `node` points to the DOM Node that is to be evaluated, whereas `virtualNode` points to the node in the flattened tree (the hierarchy that shadow DOM creates that is used for parent child relationships across shadow DOM boundaries).
+
+If your rule looks at any hierarchical context (parents or children) then you need to operate on the `virtualNode` for those operations. Calls to `isHidden` and the accessible name calculation calls will all evaluate the hierarchy. The commons and utils functions will all fetch the `virtualNode` from the flattened tree if you use the `node` implementation (and then simply call the virtualNode one) and are there for backwards compatibility. This backwards compatibility comes at a performance cost that can be avoided by simply using the `virtualNode` to start with. We will ask you to change this during PR review, so you might as well just start out by using the `virtualNode`.
+
+## iframes
+
+Rules that evaluate the structure and/or the number of elements on the entire page (for example the heading nesting rule, or the landmark rules) will need to do this evaluation across iframe boundaries. What this means is that the check function instead of determining pass/fail/incomplete, performs a data gathering function. This data is then passed up the iframe hierarchy to the top window where it is passed into the `after` function, which does the evaluation of the gathered data and determines pass/fail.
+
+## Rules of Thumb for Rule Code Reviewers
+
+Rules of thumb for determining whether `virtualNode` should be used - if any of the answers to the following questions is yes, then it should use shadow DOM and `virtualNode`:
+
+1. Is it using the non-virtualNode version of a function that wraps the flattened tree lookup?
+2. Is it evaluating the DOM hierarchy?
+
+Rules that do this MUST have shadow DOM test cases that show passes and fails across the shadow DOM boundary.
+
+Rules of thumb for determining whether an `after` function is required - if any of the answers to the following questions is yes:
+
+1. Does the rule evaluate number of things on a page?
+2. Does the rule evaluate hierarchy of things across a whole page?
+
+Rules that use an `after` function MUST have iframe test cases that assert correct data passing between iframes and handle all the relevant cases across iframes.

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

@@ -6,7 +6,7 @@ var attr,
 	attrName,
 	allowed,
 	role = node.getAttribute('role'),
-	attrs = node.attributes;
+	attrs = axe.utils.getNodeAttributes(node);
 
 if (!role) {
 	role = axe.commons.aria.implicitRole(node);

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

@@ -0,0 +1,14 @@
+options = options || {};
+
+const role = axe.commons.aria.getRole(node);
+const supportedRoles = options.supportedRoles || [];
+
+if (supportedRoles.includes(role)) {
+	return true;
+}
+
+if (role && role !== 'presentation' && role !== 'none') {
+	return undefined;
+}
+
+return false;

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

@@ -0,0 +1,23 @@
+{
+	"id": "aria-roledescription",
+	"evaluate": "aria-roledescription.js",
+	"options": {
+		"supportedRoles": [
+			"button",
+			"img",
+			"checkbox",
+			"radio",
+			"combobox",
+			"menuitemcheckbox",
+			"menuitemradio"
+		]
+	},
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "aria-roledescription used on a supported semantic role",
+			"incomplete": "Check that the aria-roledescription is announced by supported screen readers",
+			"fail": "Give the element a role that supports aria-roledescription"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/aria/no-implicit-explicit-label.js

@@ -0,0 +1,21 @@
+const { aria, text } = axe.commons;
+
+const role = aria.getRole(node, { noImplicit: true });
+this.data(role);
+
+const labelText = text.sanitize(text.labelText(virtualNode)).toLowerCase();
+const accText = text.sanitize(text.accessibleText(node)).toLowerCase();
+
+if (!accText && !labelText) {
+	return false;
+}
+
+if (!accText && labelText) {
+	return undefined;
+}
+
+if (!accText.includes(labelText)) {
+	return undefined;
+}
+
+return false;

data/node_modules/axe-core/lib/checks/aria/no-implicit-explicit-label.json

@@ -0,0 +1,11 @@
+{
+	"id": "no-implicit-explicit-label",
+	"evaluate": "no-implicit-explicit-label.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"pass": "There is no mismatch between a <label> and accessible name",
+			"incomplete": "Check that the <label> does not need be part of the ARIA {{=it.data}} field's name"
+		}
+	}
+}

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

@@ -1,19 +1,44 @@
 options = options || {};
 
-var missing = [];
+const missing = [];
+const {
+	isNativeTextbox,
+	isNativeSelect,
+	isAriaTextbox,
+	isAriaListbox,
+	isAriaCombobox,
+	isAriaRange
+} = axe.commons.forms;
+
+// aria-valuenow should fail if element does not have a value property
+// @see https://github.com/dequelabs/axe-core/issues/1501
+const preChecks = {
+	'aria-valuenow': function() {
+		return !(
+			isNativeTextbox(node) ||
+			isNativeSelect(node) ||
+			isAriaTextbox(node) ||
+			isAriaListbox(node) ||
+			isAriaCombobox(node) ||
+			(isAriaRange(node) && node.hasAttribute('aria-valuenow'))
+		);
+	}
+};
 
 if (node.hasAttributes()) {
-	var attr,
-		role = node.getAttribute('role'),
-		required = axe.commons.aria.requiredAttr(role);
+	const role = node.getAttribute('role');
+	let required = axe.commons.aria.requiredAttr(role);
 
 	if (Array.isArray(options[role])) {
 		required = axe.utils.uniqueArray(options[role], required);
 	}
 	if (role && required) {
-		for (var i = 0, l = required.length; i < l; i++) {
-			attr = required[i];
-			if (!node.getAttribute(attr)) {
+		for (let i = 0, l = required.length; i < l; i++) {
+			const attr = required[i];
+			if (
+				!node.getAttribute(attr) &&
+				(preChecks[attr] ? preChecks[attr]() : true)
+			) {
 				missing.push(attr);
 			}
 		}

data/node_modules/axe-core/lib/checks/aria/required-children.js

@@ -2,6 +2,7 @@ const requiredOwned = axe.commons.aria.requiredOwned;
 const implicitNodes = axe.commons.aria.implicitNodes;
 const matchesSelector = axe.utils.matchesSelector;
 const idrefs = axe.commons.dom.idrefs;
+const hasContentVirtual = axe.commons.dom.hasContentVirtual;
 const reviewEmpty =
 	options && Array.isArray(options.reviewEmpty) ? options.reviewEmpty : [];
 
@@ -13,7 +14,9 @@ function owns(node, virtualTree, role, ariaOwned) {
 		selector = ['[role="' + role + '"]'];
 
 	if (implicit) {
-		selector = selector.concat(implicit);
+		selector = selector.concat(
+			implicit.map(implicitSelector => implicitSelector + ':not([role])')
+		);
 	}
 
 	selector = selector.join(',');
@@ -30,7 +33,7 @@ function ariaOwns(nodes, role) {
 		if (nodes[index] === null) {
 			continue;
 		}
-		let virtualTree = axe.utils.getNodeFromTree(axe._tree[0], nodes[index]);
+		const virtualTree = axe.utils.getNodeFromTree(nodes[index]);
 		if (owns(nodes[index], virtualTree, role, true)) {
 			return true;
 		}
@@ -39,34 +42,38 @@ function ariaOwns(nodes, role) {
 }
 
 function missingRequiredChildren(node, childRoles, all, role) {
-	/* eslint max-statements: ["error", 22], complexity: ["error", 17] */
-	var i,
-		l = childRoles.length,
+	var index,
+		length = childRoles.length,
 		missing = [],
 		ownedElements = idrefs(node, 'aria-owns');
 
-	for (i = 0; i < l; i++) {
-		var r = childRoles[i];
-		if (owns(node, virtualNode, r) || ariaOwns(ownedElements, r)) {
+	for (index = 0; index < length; index++) {
+		var childRole = childRoles[index];
+		if (
+			owns(node, virtualNode, childRole) ||
+			ariaOwns(ownedElements, childRole)
+		) {
 			if (!all) {
 				return null;
 			}
 		} else {
 			if (all) {
-				missing.push(r);
+				missing.push(childRole);
 			}
 		}
 	}
 
 	// combobox exceptions
 	if (role === 'combobox') {
-		// remove 'textbox' from missing roles if combobox is a native text-type input
+		// remove 'textbox' from missing roles if combobox is a native text-type input or owns a 'searchbox'
 		var textboxIndex = missing.indexOf('textbox');
 		var textTypeInputs = ['text', 'search', 'email', 'url', 'tel'];
 		if (
-			textboxIndex >= 0 &&
-			node.nodeName.toUpperCase() === 'INPUT' &&
-			textTypeInputs.includes(node.type)
+			(textboxIndex >= 0 &&
+				(node.nodeName.toUpperCase() === 'INPUT' &&
+					textTypeInputs.includes(node.type))) ||
+			(owns(node, virtualNode, 'searchbox') ||
+				ariaOwns(ownedElements, 'searchbox'))
 		) {
 			missing.splice(textboxIndex, 1);
 		}
@@ -88,6 +95,19 @@ function missingRequiredChildren(node, childRoles, all, role) {
 	return null;
 }
 
+function hasDecendantWithRole(node) {
+	return (
+		node.children &&
+		node.children.some(child => {
+			const role = axe.commons.aria.getRole(child);
+			return (
+				!['presentation', 'none', null].includes(role) ||
+				hasDecendantWithRole(child)
+			);
+		})
+	);
+}
+
 var role = node.getAttribute('role');
 var required = requiredOwned(role);
 
@@ -110,7 +130,13 @@ if (!missing) {
 
 this.data(missing);
 
-if (reviewEmpty.includes(role)) {
+// Only review empty nodes when a node is both empty and does not have an aria-owns relationship
+if (
+	reviewEmpty.includes(role) &&
+	!hasContentVirtual(virtualNode, false, true) &&
+	!hasDecendantWithRole(virtualNode) &&
+	idrefs(node, 'aria-owns').length === 0
+) {
 	return undefined;
 } else {
 	return false;

data/node_modules/axe-core/lib/checks/aria/required-children.json

@@ -2,7 +2,18 @@
 	"id": "aria-required-children",
 	"evaluate": "required-children.js",
 	"options": {
-		"reviewEmpty": ["listbox"]
+		"reviewEmpty": [
+			"doc-bibliography",
+			"doc-endnotes",
+			"grid",
+			"list",
+			"listbox",
+			"table",
+			"tablist",
+			"tree",
+			"treegrid",
+			"rowgroup"
+		]
 	},
 	"metadata": {
 		"impact": "critical",

data/node_modules/axe-core/lib/checks/aria/required-parent.js

@@ -73,7 +73,7 @@ var owners = getAriaOwners(node);
 if (owners) {
 	for (var i = 0, l = owners.length; i < l; i++) {
 		missingParents = getMissingContext(
-			axe.utils.getNodeFromTree(axe._tree[0], owners[i]),
+			axe.utils.getNodeFromTree(owners[i]),
 			missingParents,
 			true
 		);

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

@@ -2,7 +2,7 @@ const nodeName = node.nodeName.toUpperCase();
 const lookupTable = axe.commons.aria.lookupTable;
 const role = axe.commons.aria.getRole(node);
 
-const unsupportedAttrs = Array.from(node.attributes)
+const unsupportedAttrs = Array.from(axe.utils.getNodeAttributes(node))
 	.filter(({ name }) => {
 		const attribute = lookupTable.attributes[name];
 

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

@@ -1,29 +1,62 @@
 options = Array.isArray(options) ? options : [];
 
-var invalid = [],
-	aria = /^aria-/;
+const needsReview = [];
+const invalid = [];
+const aria = /^aria-/;
+const attrs = axe.utils.getNodeAttributes(node);
 
-var attr,
-	attrName,
-	attrs = node.attributes;
+const skipAttrs = ['aria-errormessage'];
 
-var skipAttrs = ['aria-errormessage'];
+const preChecks = {
+	// aria-controls should only check if element exists if the element
+	// doesn't have aria-expanded=false or aria-selected=false (tabs)
+	// @see https://github.com/dequelabs/axe-core/issues/1463
+	'aria-controls': function() {
+		return (
+			node.getAttribute('aria-expanded') !== 'false' &&
+			node.getAttribute('aria-selected') !== 'false'
+		);
+	},
+	// aria-owns should only check if element exists if the element
+	// doesn't have aria-expanded=false (combobox)
+	// @see https://github.com/dequelabs/axe-core/issues/1524
+	'aria-owns': function() {
+		return node.getAttribute('aria-expanded') !== 'false';
+	},
+	// aria-describedby should not mark missing element as violation but
+	// instead as needs review
+	// @see https://github.com/dequelabs/axe-core/issues/1151
+	'aria-describedby': function() {
+		if (!axe.commons.aria.validateAttrValue(node, 'aria-describedby')) {
+			needsReview.push(
+				`aria-describedby="${node.getAttribute('aria-describedby')}"`
+			);
+		}
+
+		return;
+	}
+};
 
-for (var i = 0, l = attrs.length; i < l; i++) {
-	attr = attrs[i];
-	attrName = attr.name;
+for (let i = 0, l = attrs.length; i < l; i++) {
+	const attr = attrs[i];
+	const 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 (
+		!skipAttrs.includes(attrName) &&
+		options.indexOf(attrName) === -1 &&
+		aria.test(attrName) &&
+		(preChecks[attrName] ? preChecks[attrName]() : true) &&
+		!axe.commons.aria.validateAttrValue(node, attrName)
+	) {
+		invalid.push(`${attrName}="${attr.nodeValue}"`);
 	}
 }
 
+if (needsReview.length) {
+	this.data(needsReview);
+	return undefined;
+}
+
 if (invalid.length) {
 	this.data(invalid);
 	return false;

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

@@ -6,7 +6,8 @@
 		"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}}{{~}}"
+			"fail": "Invalid ARIA attribute value{{=it.data && it.data.length > 1 ? 's' : ''}}:{{~it.data:value}} {{=value}}{{~}}",
+			"incomplete": "ARIA attribute{{=it.data && it.data.length > 1 ? 's' : ''}} element ID does not exist on the page:{{~it.data:value}} {{=value}}{{~}}"
 		}
 	}
 }

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

@@ -4,7 +4,7 @@ var invalid = [],
 	aria = /^aria-/;
 
 var attr,
-	attrs = node.attributes;
+	attrs = axe.utils.getNodeAttributes(node);
 
 for (var i = 0, l = attrs.length; i < l; i++) {
 	attr = attrs[i].name;

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

@@ -7,7 +7,7 @@ if (!dom.isVisible(node, false)) {
 const noScroll = !!(options || {}).noScroll;
 const bgNodes = [];
 const bgColor = color.getBackgroundColor(node, bgNodes, noScroll);
-const fgColor = color.getForegroundColor(node, noScroll);
+const fgColor = color.getForegroundColor(node, noScroll, bgColor);
 
 const nodeStyle = window.getComputedStyle(node);
 const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
@@ -42,7 +42,7 @@ const data = {
 	fgColor: fgColor ? fgColor.toHexString() : undefined,
 	bgColor: bgColor ? bgColor.toHexString() : undefined,
 	contrastRatio: cr ? truncatedResult : undefined,
-	fontSize: ((fontSize * 72) / 96).toFixed(1) + 'pt',
+	fontSize: `${((fontSize * 72) / 96).toFixed(1)}pt (${fontSize}px)`,
 	fontWeight: bold ? 'bold' : 'normal',
 	missingData: missing,
 	expectedContrastRatio: cr.expectedContrastRatio + ':1'