govuk_publishing_components 21.16.3 → 21.17.0

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

@@ -1,5 +1,5 @@
 // Select and textarea is always allowed
-if (node.nodeName.toUpperCase() !== 'INPUT') {
+if (virtualNode.props.nodeName !== 'input') {
 	return true;
 }
 
@@ -34,7 +34,7 @@ if (typeof options === 'object') {
 	});
 }
 
-const autocomplete = node.getAttribute('autocomplete');
+const autocomplete = virtualNode.attr('autocomplete');
 const autocompleteTerms = autocomplete
 	.split(/\s+/g)
 	.map(term => term.toLowerCase());
@@ -55,8 +55,8 @@ const allowedTypes = allowedTypesMap[purposeTerm];
  * 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()
+let type = virtualNode.hasAttr('type')
+	? axe.commons.text.sanitize(virtualNode.attr('type')).toLowerCase()
 	: 'text';
 type = axe.utils.validInputTypes().includes(type) ? type : 'text';
 

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

@@ -1,2 +1,2 @@
-const autocomplete = node.getAttribute('autocomplete') || '';
+const autocomplete = virtualNode.attr('autocomplete') || '';
 return axe.commons.text.isValidAutocomplete(autocomplete, options);

data/node_modules/axe-core/lib/checks/forms/fieldset.json

@@ -2,6 +2,7 @@
 	"id": "fieldset",
 	"evaluate": "fieldset.js",
 	"after": "fieldset-after.js",
+	"deprecated": true,
 	"metadata": {
 		"impact": "critical",
 		"messages": {

data/node_modules/axe-core/lib/checks/forms/group-labelledby.json

@@ -2,6 +2,7 @@
 	"id": "group-labelledby",
 	"evaluate": "group-labelledby.js",
 	"after": "group-labelledby-after.js",
+	"deprecated": true,
 	"metadata": {
 		"impact": "critical",
 		"messages": {

data/node_modules/axe-core/lib/checks/keyboard/focusable-content.js

@@ -0,0 +1,16 @@
+/**
+ * Note:
+ * Check if given node contains focusable elements (excluding thyself)
+ */
+const tabbableElements = virtualNode.tabbableElements;
+
+if (!tabbableElements) {
+	return false;
+}
+
+// remove thyself from tabbable elements (if exists)
+const tabbableContentElements = tabbableElements.filter(
+	el => el !== virtualNode
+);
+
+return tabbableContentElements.length > 0;

data/node_modules/axe-core/lib/checks/keyboard/focusable-content.json

@@ -0,0 +1,11 @@
+{
+	"id": "focusable-content",
+	"evaluate": "focusable-content.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"pass": "Element contains focusable elements",
+			"fail": "Element should have focusable content"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/keyboard/focusable-element.js

@@ -0,0 +1,12 @@
+/**
+ * Note:
+ * Check
+ * - if element is focusable
+ * - if element is in focus order via `tabindex`
+ */
+const isFocusable = virtualNode.isFocusable;
+
+let tabIndex = parseInt(virtualNode.actualNode.getAttribute('tabindex'), 10);
+tabIndex = !isNaN(tabIndex) ? tabIndex : null;
+
+return tabIndex ? isFocusable && tabIndex >= 0 : isFocusable;

data/node_modules/axe-core/lib/checks/keyboard/focusable-element.json

@@ -0,0 +1,11 @@
+{
+	"id": "focusable-element",
+	"evaluate": "focusable-element.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"pass": "Element is focusable",
+			"fail": "Element should be focusable"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/keyboard/tabindex.js

@@ -1 +1,6 @@
-return node.tabIndex <= 0;
+const tabIndex = parseInt(node.getAttribute('tabindex'), 10);
+
+// an invalid tabindex will either return 0 or -1 (based on the element) so
+// will never be above 0
+// @see https://www.w3.org/TR/html51/editing.html#the-tabindex-attribute
+return isNaN(tabIndex) ? true : tabIndex <= 0;

data/node_modules/axe-core/lib/checks/label/alt-space-value.js

@@ -1,2 +1,3 @@
-const validAttrValue = /^\s+$/.test(node.getAttribute('alt'));
-return node.hasAttribute('alt') && validAttrValue;
+const alt = virtualNode.attr('alt');
+const isOnlySpace = /^\s+$/;
+return typeof alt === 'string' && isOnlySpace.test(alt);

data/node_modules/axe-core/lib/checks/label/duplicate-img-label.js

@@ -1,19 +1,22 @@
-const text = axe.commons.text.visibleVirtual(virtualNode, true).toLowerCase();
-if (text === '') {
+const { aria, text, dom } = axe.commons;
+
+if (['none', 'presentation'].includes(aria.getRole(node))) {
 	return false;
 }
 
-// Get all visible images in the composed tree of the current node
-const images = axe.utils
-	.querySelectorAll(virtualNode, 'img')
-	// Ignore hidden or role=none/presentation images
-	.filter(
-		({ actualNode }) =>
-			axe.commons.dom.isVisible(actualNode) &&
-			!['none', 'presentation'].includes(actualNode.getAttribute('role'))
-	);
-
-// See if any of the images duplicate the node's text
-return images.some(
-	img => text === axe.commons.text.accessibleTextVirtual(img).toLowerCase()
+const parent = dom.findUpVirtual(
+	virtualNode,
+	'button, [role="button"], a[href], p, li, td, th'
 );
+
+if (!parent) {
+	return false;
+}
+
+const parentVNode = axe.utils.getNodeFromTree(parent);
+const visibleText = text.visibleVirtual(parentVNode, true).toLowerCase();
+if (visibleText === '') {
+	return false;
+}
+
+return visibleText === text.accessibleTextVirtual(virtualNode).toLowerCase();

data/node_modules/axe-core/lib/checks/label/label-content-name-mismatch.js

@@ -1,13 +1,23 @@
 const { text } = axe.commons;
+const { pixelThreshold, occuranceThreshold } = options || {};
 
 const accText = text.accessibleText(node).toLowerCase();
 if (text.isHumanInterpretable(accText) < 1) {
 	return undefined;
 }
 
-const visibleText = text
-	.sanitize(text.visibleVirtual(virtualNode))
-	.toLowerCase();
+const textVNodes = text.visibleTextNodes(virtualNode);
+const nonLigatureText = textVNodes
+	.filter(
+		textVNode =>
+			!text.isIconLigature(textVNode, pixelThreshold, occuranceThreshold)
+	)
+	.map(textVNode => textVNode.actualNode.nodeValue)
+	.join('');
+const visibleText = text.sanitize(nonLigatureText).toLowerCase();
+if (!visibleText) {
+	return true;
+}
 if (text.isHumanInterpretable(visibleText) < 1) {
 	if (isStringContained(visibleText, accText)) {
 		return true;

data/node_modules/axe-core/lib/checks/label/label-content-name-mismatch.json

@@ -1,6 +1,10 @@
 {
 	"id": "label-content-name-mismatch",
 	"evaluate": "label-content-name-mismatch.js",
+	"options": {
+		"pixelThreshold": 0.1,
+		"occuranceThreshold": 3
+	},
 	"metadata": {
 		"impact": "serious",
 		"messages": {

data/node_modules/axe-core/lib/checks/label/multiple-label.js

@@ -1,18 +1,12 @@
 const id = axe.utils.escapeSelector(node.getAttribute('id'));
-let labels = Array.from(document.querySelectorAll(`label[for="${id}"]`));
 let parent = node.parentNode;
+let root = axe.commons.dom.getRootNode(node);
+root = root.documentElement || root;
+let labels = Array.from(root.querySelectorAll(`label[for="${id}"]`));
 
 if (labels.length) {
-	// filter out hidden labels because they're fine
-	// except: fail first label if hidden because of VO
-	labels = labels.filter(function(label, index) {
-		if (
-			(index === 0 && !axe.commons.dom.isVisible(label, true)) ||
-			axe.commons.dom.isVisible(label, true)
-		) {
-			return label;
-		}
-	});
+	// filter out CSS hidden labels because they're fine
+	labels = labels.filter(label => axe.commons.dom.isVisible(label));
 }
 
 while (parent) {
@@ -26,4 +20,20 @@ while (parent) {
 }
 
 this.relatedNodes(labels);
-return labels.length > 1;
+
+// more than 1 CSS visible label
+if (labels.length > 1) {
+	const ATVisibleLabels = labels.filter(label =>
+		axe.commons.dom.isVisible(label, true)
+	);
+	// more than 1 AT visible label will fail IOS/Safari/VO even with aria-labelledby
+	if (ATVisibleLabels.length > 1) {
+		return undefined;
+	}
+	// make sure the ONE AT visible label is in the list of idRefs of aria-labelledby
+	const labelledby = axe.commons.dom.idrefs(node, 'aria-labelledby');
+	return !labelledby.includes(ATVisibleLabels[0]) ? undefined : false;
+}
+
+// only 1 CSS visible label
+return false;

data/node_modules/axe-core/lib/checks/label/multiple-label.json

@@ -5,7 +5,7 @@
 		"impact": "moderate",
 		"messages": {
 			"pass": "Form field does not have multiple label elements",
-			"fail": "Multiple label elements is not widely supported in assistive technologies"
+			"incomplete": "Multiple label elements is not widely supported in assistive technologies. Ensure the first label contains all necessary information."
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/landmarks/landmark-is-unique-after.js

@@ -0,0 +1,23 @@
+var uniqueLandmarks = [];
+
+// filter out landmark elements that share the same role and accessible text
+// so every non-unique landmark isn't reported as a failure (just the first)
+return results.filter(currentResult => {
+	var findMatch = someResult => {
+		return (
+			currentResult.data.role === someResult.data.role &&
+			currentResult.data.accessibleText === someResult.data.accessibleText
+		);
+	};
+
+	var matchedResult = uniqueLandmarks.find(findMatch);
+	if (matchedResult) {
+		matchedResult.result = false;
+		matchedResult.relatedNodes.push(currentResult.relatedNodes[0]);
+		return false;
+	}
+
+	uniqueLandmarks.push(currentResult);
+	currentResult.relatedNodes = [];
+	return true;
+});

data/node_modules/axe-core/lib/checks/landmarks/landmark-is-unique.js

@@ -0,0 +1,7 @@
+var role = axe.commons.aria.getRole(node);
+var accessibleText = axe.commons.text.accessibleTextVirtual(virtualNode);
+accessibleText = accessibleText ? accessibleText.toLowerCase() : null;
+this.data({ role: role, accessibleText: accessibleText });
+this.relatedNodes([node]);
+
+return true;

data/node_modules/axe-core/lib/checks/landmarks/landmark-is-unique.json

@@ -0,0 +1,12 @@
+{
+	"id": "landmark-is-unique",
+	"evaluate": "landmark-is-unique.js",
+	"after": "landmark-is-unique-after.js",
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"pass": "Landmarks must have a unique role or role/label/title (i.e. accessible name) combination",
+			"fail": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/lists/listitem.js

@@ -12,6 +12,7 @@ if (parentRole === 'list') {
 }
 
 if (parentRole && axe.commons.aria.isValidRole(parentRole)) {
+	this.data('roleNotValid');
 	return false;
 }
 

data/node_modules/axe-core/lib/checks/lists/listitem.json

@@ -5,7 +5,7 @@
 		"impact": "serious",
 		"messages": {
 			"pass": "List item has a <ul>, <ol> or role=\"list\" parent element",
-			"fail": "List item does not have a <ul>, <ol> or role=\"list\" parent element"
+			"fail": "List item does not have a <ul>, <ol>{{? it.data === 'roleNotValid'}} without a role, or a role=\"list\"{{?}} parent element"
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/lists/only-listitems.js

@@ -16,10 +16,6 @@ let base = {
 };
 
 let out = virtualNode.children.reduce((out, { actualNode }) => {
-	/*eslint 
-		max-statements: ["error", 20]
-		complexity: ["error", 12]
-		*/
 	const tagName = actualNode.nodeName.toUpperCase();
 
 	if (actualNode.nodeType === 1 && dom.isVisible(actualNode, true, false)) {

data/node_modules/axe-core/lib/checks/mobile/css-orientation-lock.js

@@ -61,8 +61,8 @@ Object.keys(rulesGroupByDocumentFragment).forEach(key => {
 		// eg: screen and (max-width: 767px) and (min-width: 320px) and (orientation: landscape)
 		const cssText = r.cssText;
 		return (
-			/orientation:\s+landscape/i.test(cssText) ||
-			/orientation:\s+portrait/i.test(cssText)
+			/orientation:\s*landscape/i.test(cssText) ||
+			/orientation:\s*portrait/i.test(cssText)
 		);
 	});
 	if (!orientationRules || !orientationRules.length) {
@@ -78,8 +78,6 @@ Object.keys(rulesGroupByDocumentFragment).forEach(key => {
 		// a media query has framents of css styles applied to various selectors
 		// iteration through cssRules and see if orientation lock has been applied
 		Array.from(r.cssRules).forEach(cssRule => {
-			/* eslint max-statements: ["error", 20], complexity: ["error", 15] */
-
 			// ensure selectorText exists
 			if (!cssRule.selectorText) {
 				return;
@@ -89,8 +87,12 @@ Object.keys(rulesGroupByDocumentFragment).forEach(key => {
 				return;
 			}
 
-			// check if transform style exists
-			const transformStyleValue = cssRule.style.transform || false;
+			// check if transform style exists (don't forget vendor prefixes)
+			const transformStyleValue =
+				cssRule.style.transform ||
+				cssRule.style.webkitTransform ||
+				cssRule.style.msTransform ||
+				false;
 			// transformStyleValue -> is the value applied to property
 			// eg: "rotate(-90deg)"
 			if (!transformStyleValue) {

data/node_modules/axe-core/lib/checks/navigation/region.js

@@ -1,17 +1,4 @@
 const { dom, aria } = axe.commons;
-
-// Return the skplink, if any
-function getSkiplink(virtualNode) {
-	const firstLink = axe.utils.querySelectorAll(virtualNode, 'a[href]')[0];
-	if (
-		firstLink &&
-		axe.commons.dom.getElementByReference(firstLink.actualNode, 'href')
-	) {
-		return firstLink.actualNode;
-	}
-}
-
-const skipLink = getSkiplink(virtualNode);
 const landmarkRoles = aria.getRolesByType('landmark');
 
 // Create a list of nodeNames that have a landmark as an implicit role
@@ -19,11 +6,6 @@ const implicitLandmarks = landmarkRoles
 	.reduce((arr, role) => arr.concat(aria.implicitNodes(role)), [])
 	.filter(r => r !== null);
 
-// Check if the current element is the skiplink
-function isSkipLink(vNode) {
-	return skipLink && skipLink === vNode.actualNode;
-}
-
 // Check if the current element is a landmark
 function isRegion(virtualNode) {
 	const node = virtualNode.actualNode;
@@ -61,7 +43,8 @@ function findRegionlessElms(virtualNode) {
 	// End recursion if the element is a landmark, skiplink, or hidden content
 	if (
 		isRegion(virtualNode) ||
-		isSkipLink(virtualNode) ||
+		(dom.isSkipLink(virtualNode.actualNode) &&
+			dom.getElementByReference(virtualNode.actualNode, 'href')) ||
 		!dom.isVisible(node, true)
 	) {
 		return [];

data/node_modules/axe-core/lib/checks/shared/avoid-inline-spacing.js

@@ -0,0 +1,18 @@
+const inlineSpacingCssProperties = [
+	'line-height',
+	'letter-spacing',
+	'word-spacing'
+];
+
+const overriddenProperties = inlineSpacingCssProperties.filter(property => {
+	if (node.style.getPropertyPriority(property) === `important`) {
+		return property;
+	}
+});
+
+if (overriddenProperties.length > 0) {
+	this.data(overriddenProperties);
+	return false;
+}
+
+return true;

data/node_modules/axe-core/lib/checks/shared/avoid-inline-spacing.json

@@ -0,0 +1,11 @@
+{
+	"id": "avoid-inline-spacing",
+	"evaluate": "avoid-inline-spacing.js",
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "No inline styles with '!important' that affect text spacing has been specified",
+			"fail": "Remove '!important' from inline style{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}}, as overriding this is not supported by most browsers"
+		}
+	}
+}

data/node_modules/axe-core/lib/checks/shared/exists.js

@@ -1 +1 @@
-return true;
+return undefined;

data/node_modules/axe-core/lib/checks/shared/exists.json

@@ -5,7 +5,7 @@
 		"impact": "minor",
 		"messages": {
 			"pass": "Element does not exist",
-			"fail": "Element exists"
+			"incomplete": "Element exists"
 		}
 	}
 }