govuk_publishing_components 21.22.1 → 21.22.2

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

@@ -11,8 +11,8 @@
 				"plural": "Invalid ARIA attribute values: ${data.values}"
 			},
 			"incomplete": {
-				"singular": "ARIA attribute element ID does not exist on the page: ${data.values}",
-				"plural": "ARIA attributes element ID does not exist on the page: ${data.values}"
+				"noId": "ARIA attribute element ID does not exist on the page: ${data.needsReview}",
+				"ariaCurrent": "ARIA attribute value is invalid and will be treated as \"aria-current=true\": ${data.needsReview}"
 			}
 		}
 	}

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

@@ -4,6 +4,23 @@ if (!dom.isVisible(node, false)) {
 	return true;
 }
 
+const visibleText = text.visibleVirtual(virtualNode, false, true);
+const ignoreUnicode = !!(options || {}).ignoreUnicode;
+const textContainsOnlyUnicode =
+	text.hasUnicode(visibleText, {
+		nonBmp: true
+	}) &&
+	text.sanitize(
+		text.removeUnicode(visibleText, {
+			nonBmp: true
+		})
+	) === '';
+
+if (textContainsOnlyUnicode && ignoreUnicode) {
+	this.data({ messageKey: 'nonBmp' });
+	return undefined;
+}
+
 const noScroll = !!(options || {}).noScroll;
 const bgNodes = [];
 const bgColor = color.getBackgroundColor(node, bgNodes, noScroll);
@@ -11,9 +28,8 @@ const fgColor = color.getForegroundColor(node, noScroll, bgColor);
 
 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 fontWeight = parseFloat(nodeStyle.getPropertyValue('font-weight'));
+const bold = !isNaN(fontWeight) && fontWeight >= 700;
 
 const cr = color.hasValidContrastRatio(bgColor, fgColor, fontSize, bold);
 
@@ -28,11 +44,11 @@ if (bgColor === null) {
 }
 
 const equalRatio = truncatedResult === 1;
-const shortTextContent =
-	text.visibleVirtual(virtualNode, false, true).length === 1;
+const shortTextContent = visibleText.length === 1;
+const ignoreLength = !!(options || {}).ignoreLength;
 if (equalRatio) {
 	missing = color.incompleteData.set('bgColor', 'equalRatio');
-} else if (shortTextContent) {
+} else if (shortTextContent && !ignoreLength) {
 	// Check that the text content is a single character long
 	missing = 'shortTextContent';
 }
@@ -55,7 +71,7 @@ if (
 	fgColor === null ||
 	bgColor === null ||
 	equalRatio ||
-	(shortTextContent && !cr.isValid)
+	(shortTextContent && !ignoreLength && !cr.isValid)
 ) {
 	missing = null;
 	color.incompleteData.clear();

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

@@ -1,6 +1,11 @@
 {
 	"id": "color-contrast",
 	"evaluate": "color-contrast.js",
+	"options": {
+		"noScroll": false,
+		"ignoreUnicode": true,
+		"ignoreLength": false
+	},
 	"metadata": {
 		"impact": "serious",
 		"messages": {
@@ -17,7 +22,8 @@
 				"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"
+				"shortTextContent": "Element content is too short to determine if it is actual text content",
+				"nonBmp": "Element content contains only non-text characters"
 			}
 		}
 	}

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

@@ -20,6 +20,11 @@ const relatedNodes = tabbableElements.reduce((out, { actualNode: el }) => {
 	}
 	return out;
 }, []);
+
 this.relatedNodes(relatedNodes);
 
+if (relatedNodes.length && axe.commons.dom.isModalOpen()) {
+	return true;
+}
+
 return relatedNodes.length === 0;

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

@@ -0,0 +1,14 @@
+const tabbableElements = virtualNode.tabbableElements.map(
+	({ actualNode }) => actualNode
+);
+
+if (!tabbableElements || !tabbableElements.length) {
+	return true;
+}
+
+if (axe.commons.dom.isModalOpen()) {
+	this.relatedNodes(tabbableElements);
+	return undefined;
+}
+
+return true;

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

@@ -0,0 +1,11 @@
+{
+	"id": "focusable-modal-open",
+	"evaluate": "focusable-modal-open.js",
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "No focusable elements while a modal is open",
+			"incomplete": "Check that focusable elements are not tabbable in the current state"
+		}
+	}
+}

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

@@ -20,6 +20,11 @@ const relatedNodes = tabbableElements.reduce((out, { actualNode: el }) => {
 	}
 	return out;
 }, []);
+
 this.relatedNodes(relatedNodes);
 
+if (relatedNodes.length > 0 && axe.commons.dom.isModalOpen()) {
+	return true;
+}
+
 return relatedNodes.length === 0;

data/node_modules/axe-core/lib/checks/keyboard/page-has-elm.js

@@ -4,6 +4,10 @@ if (!options || !options.selector || typeof options.selector !== 'string') {
 	);
 }
 
-const matchingElms = axe.utils.querySelectorAll(virtualNode, options.selector);
+const matchingElms = axe.utils.querySelectorAllFilter(
+	virtualNode,
+	options.selector,
+	vNode => axe.commons.dom.isVisible(vNode.actualNode)
+);
 this.relatedNodes(matchingElms.map(vNode => vNode.actualNode));
 return matchingElms.length > 0;

data/node_modules/axe-core/lib/checks/keyboard/page-no-duplicate-after.js

@@ -0,0 +1,2 @@
+// ignore results
+return results.filter(checkResult => checkResult.data !== 'ignored');

data/node_modules/axe-core/lib/checks/keyboard/page-no-duplicate-banner.json

@@ -1,6 +1,7 @@
 {
 	"id": "page-no-duplicate-banner",
 	"evaluate": "page-no-duplicate.js",
+	"after": "page-no-duplicate-after.js",
 	"options": {
 		"selector": "header:not([role]), [role=banner]",
 		"nativeScopeFilter": "article, aside, main, nav, section"

data/node_modules/axe-core/lib/checks/keyboard/page-no-duplicate-contentinfo.json

@@ -1,6 +1,7 @@
 {
 	"id": "page-no-duplicate-contentinfo",
 	"evaluate": "page-no-duplicate.js",
+	"after": "page-no-duplicate-after.js",
 	"options": {
 		"selector": "footer:not([role]), [role=contentinfo]",
 		"nativeScopeFilter": "article, aside, main, nav, section"

data/node_modules/axe-core/lib/checks/keyboard/page-no-duplicate-main.json

@@ -1,6 +1,7 @@
 {
 	"id": "page-no-duplicate-main",
 	"evaluate": "page-no-duplicate.js",
+	"after": "page-no-duplicate-after.js",
 	"options": {
 		"selector": "main:not([role]), [role='main']"
 	},

data/node_modules/axe-core/lib/checks/keyboard/page-no-duplicate.js

@@ -4,7 +4,19 @@ if (!options || !options.selector || typeof options.selector !== 'string') {
 	);
 }
 
-let elms = axe.utils.querySelectorAll(virtualNode, options.selector);
+// only look at the first node and it's related nodes
+const key = 'page-no-duplicate;' + options.selector;
+if (axe._cache.get(key)) {
+	this.data('ignored');
+	return;
+}
+axe._cache.set(key, true);
+
+let elms = axe.utils.querySelectorAllFilter(
+	axe._tree[0],
+	options.selector,
+	elm => elm !== virtualNode && axe.commons.dom.isVisible(elm.actualNode)
+);
 
 // Filter elements that, within certain contexts, don't map their role.
 // e.g. a <footer> inside a <main> is not a banner, but in the <body> context it is
@@ -19,4 +31,4 @@ if (typeof options.nativeScopeFilter === 'string') {
 
 this.relatedNodes(elms.map(elm => elm.actualNode));
 
-return elms.length <= 1;
+return elms.length === 0;

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

@@ -1,64 +1,58 @@
-const { dom } = axe.commons;
-const getIsListItemRole = (role, tagName) => {
-	return role === 'listitem' || (tagName === 'LI' && !role);
-};
+const { dom, aria } = axe.commons;
 
-const getHasListItem = (hasListItem, tagName, isListItemRole) => {
-	return hasListItem || (tagName === 'LI' && isListItemRole) || isListItemRole;
-};
+let hasNonEmptyTextNode = false;
+let atLeastOneListitem = false;
+let isEmpty = true;
+let badNodes = [];
+let badRoleNodes = [];
+let badRoles = [];
 
-let base = {
-	badNodes: [],
-	isEmpty: true,
-	hasNonEmptyTextNode: false,
-	hasListItem: false,
-	liItemsWithRole: 0
-};
+virtualNode.children.forEach(vNode => {
+	const { actualNode } = vNode;
 
-let out = virtualNode.children.reduce((out, { actualNode }) => {
-	const tagName = actualNode.nodeName.toUpperCase();
+	if (actualNode.nodeType === 3 && actualNode.nodeValue.trim() !== '') {
+		hasNonEmptyTextNode = true;
+		return;
+	}
 
-	if (actualNode.nodeType === 1 && dom.isVisible(actualNode, true, false)) {
-		const role = (actualNode.getAttribute('role') || '').toLowerCase();
-		const isListItemRole = getIsListItemRole(role, tagName);
+	if (actualNode.nodeType !== 1 || !dom.isVisible(actualNode, true, false)) {
+		return;
+	}
 
-		out.hasListItem = getHasListItem(out.hasListItem, tagName, isListItemRole);
+	isEmpty = false;
+	const isLi = actualNode.nodeName.toUpperCase() === 'LI';
+	const role = aria.getRole(vNode);
+	const isListItemRole = role === 'listitem';
 
-		if (isListItemRole) {
-			out.isEmpty = false;
-		}
-		if (tagName === 'LI' && !isListItemRole) {
-			out.liItemsWithRole++;
-		}
-		if (tagName !== 'LI' && !isListItemRole) {
-			out.badNodes.push(actualNode);
-		}
+	if (!isLi && !isListItemRole) {
+		badNodes.push(actualNode);
 	}
-	if (actualNode.nodeType === 3) {
-		if (actualNode.nodeValue.trim() !== '') {
-			out.hasNonEmptyTextNode = true;
+
+	if (isLi && !isListItemRole) {
+		badRoleNodes.push(actualNode);
+
+		if (!badRoles.includes(role)) {
+			badRoles.push(role);
 		}
 	}
 
-	return out;
-}, base);
-
-const virtualNodeChildrenOfTypeLi = virtualNode.children.filter(
-	({ actualNode }) => {
-		return actualNode.nodeName.toUpperCase() === 'LI';
+	if (isListItemRole) {
+		atLeastOneListitem = true;
 	}
-);
+});
 
-const allLiItemsHaveRole =
-	out.liItemsWithRole > 0 &&
-	virtualNodeChildrenOfTypeLi.length === out.liItemsWithRole;
+if (hasNonEmptyTextNode || badNodes.length) {
+	this.relatedNodes(badNodes);
+	return true;
+}
 
-if (out.badNodes.length) {
-	this.relatedNodes(out.badNodes);
+if (isEmpty || atLeastOneListitem) {
+	return false;
 }
 
-const isInvalidListItem = !(
-	out.hasListItem ||
-	(out.isEmpty && !allLiItemsHaveRole)
-);
-return isInvalidListItem || !!out.badNodes.length || out.hasNonEmptyTextNode;
+this.relatedNodes(badRoleNodes);
+this.data({
+	messageKey: 'roleNotValid',
+	roles: badRoles.join(', ')
+});
+return true;

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

@@ -5,7 +5,10 @@
 		"impact": "serious",
 		"messages": {
 			"pass": "List element only has direct children that are allowed inside <li> elements",
-			"fail": "List element has direct children that are not allowed inside <li> elements"
+			"fail": {
+				"default": "List element has direct children that are not allowed inside <li> elements",
+				"roleNotValid": "List element has direct children with a role that is not allowed: ${data.roles}"
+			}
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/media/no-autoplay-audio.js

@@ -0,0 +1,93 @@
+/**
+ * if duration cannot be read, this means `preloadMedia` has failed
+ */
+if (!node.duration) {
+	console.warn(`axe.utils.preloadMedia did not load metadata`);
+	return undefined;
+}
+
+/**
+ * Compute playable duration and verify if it within allowed duration
+ */
+const { allowedDuration = 3 } = options;
+const playableDuration = getPlayableDuration(node);
+if (playableDuration <= allowedDuration && !node.hasAttribute('loop')) {
+	return true;
+}
+
+/**
+ * if media element does not provide controls mechanism
+ * -> fail
+ */
+if (!node.hasAttribute('controls')) {
+	return false;
+}
+
+return true;
+
+/**
+ * Compute playback duration
+ * @param {HTMLMediaElement} elm media element
+ */
+function getPlayableDuration(elm) {
+	if (!elm.currentSrc) {
+		return 0;
+	}
+
+	const playbackRange = getPlaybackRange(elm.currentSrc);
+	if (!playbackRange) {
+		return Math.abs(elm.duration - (elm.currentTime || 0));
+	}
+
+	if (playbackRange.length === 1) {
+		return Math.abs(elm.duration - playbackRange[0]);
+	}
+
+	return Math.abs(playbackRange[1] - playbackRange[0]);
+}
+
+/**
+ * Get playback range from a media elements source, if specified
+ * See - https://developer.mozilla.org/de/docs/Web/HTML/Using_HTML5_audio_and_video#Specifying_playback_range
+ *
+ * Eg:
+ * src='....someMedia.mp3#t=8'
+ * 	-> should yeild [8]
+ * src='....someMedia.mp3#t=10,12'
+ *  -> should yeild [10,12]
+ * @param {String} src media src
+ * @returns {Array|undefined}
+ */
+function getPlaybackRange(src) {
+	const match = src.match(/#t=(.*)/);
+	if (!match) {
+		return;
+	}
+	const [, value] = match;
+	const ranges = value.split(',');
+
+	return ranges.map(range => {
+		// range is denoted in HH:MM:SS -> convert to seconds
+		if (/:/.test(range)) {
+			return convertHourMinSecToSeconds(range);
+		}
+		return parseFloat(range);
+	});
+}
+
+/**
+ * Add HH, MM, SS to seconds
+ * @param {String} hhMmSs time expressed in HH:MM:SS
+ */
+function convertHourMinSecToSeconds(hhMmSs) {
+	let parts = hhMmSs.split(':');
+	let secs = 0;
+	let mins = 1;
+
+	while (parts.length > 0) {
+		secs += mins * parseInt(parts.pop(), 10);
+		mins *= 60;
+	}
+
+	return parseFloat(secs);
+}

data/node_modules/axe-core/lib/checks/media/no-autoplay-audio.json

@@ -0,0 +1,15 @@
+{
+	"id": "no-autoplay-audio",
+	"evaluate": "no-autoplay-audio.js",
+	"options": {
+		"allowedDuration": 3
+	},
+	"metadata": {
+		"impact": "moderate",
+		"messages": {
+			"pass": "<video> or <audio> does not output audio for more than allowed duration or has controls mechanism",
+			"fail": "<video> or <audio> outputs audio for more than allowed duration and does not have a controls mechanism",
+			"incomplete": "Check that the <video> or <audio> does not output audio for more than allowed duration or provides a controls mechanism"
+		}
+	}
+}