govuk_publishing_components 21.22.1 → 21.22.2

data/node_modules/axe-core/lib/commons/dom/is-focusable.js

@@ -65,9 +65,11 @@ dom.isNativelyFocusable = function(el) {
 			return el.type !== 'hidden';
 		case 'TEXTAREA':
 		case 'SELECT':
-		case 'DETAILS':
+		case 'SUMMARY':
 		case 'BUTTON':
 			return true;
+		case 'DETAILS':
+			return !el.querySelector('summary');
 	}
 	return false;
 };

data/node_modules/axe-core/lib/commons/dom/is-hidden-with-css.js

@@ -59,8 +59,8 @@ function _isHiddenWithCSS(el, descendentVisibilityValue) {
 
 	if (
 		HIDDEN_VISIBILITY_VALUES.includes(visibilityValue) &&
-		(descendentVisibilityValue &&
-			HIDDEN_VISIBILITY_VALUES.includes(descendentVisibilityValue))
+		descendentVisibilityValue &&
+		HIDDEN_VISIBILITY_VALUES.includes(descendentVisibilityValue)
 	) {
 		return true;
 	}

data/node_modules/axe-core/lib/commons/dom/is-modal-open.js

@@ -0,0 +1,98 @@
+/* global dom, axe */
+
+/**
+ * Determines if there is a modal currently open.
+ * @method isModalOpen
+ * @memberof axe.commons.dom
+ * @instance
+ * @return {Boolean|undefined} True if we know (or our best guess) that a modal is open, undefined if we can't tell (doesn't mean there isn't one open)
+ */
+dom.isModalOpen = function isModalOpen(options) {
+	options = options || {};
+	let modalPercent = options.modalPercent || 0.75;
+
+	// there is no "definitive" way to code a modal so detecting when one is open
+	// is a bit of a guess. a modal won't always be accessible, so we can't rely
+	// on the `role` attribute, and relying on a class name as a convention is
+	// unreliable. we also cannot rely on the body/html not scrolling.
+	//
+	// because of this, we will look for two different types of modals:
+	// "definitely a modal" and "could be a modal."
+	//
+	// "definitely a modal" is any visible element that is coded to be a modal
+	// by using one of the following criteria:
+	//
+	// - has the attribute `role=dialog`
+	// - has the attribute `aria-modal=true`
+	// - is the dialog element
+	//
+	// "could be a modal" is a visible element that takes up more than 75% of
+	// the screen (though typically full width/height) and is the top-most element
+	// in the viewport. since we aren't sure if it is or is not a modal this is
+	// just our best guess of being one based on convention.
+
+	if (axe._cache.get('isModalOpen')) {
+		return axe._cache.get('isModalOpen');
+	}
+
+	const definiteModals = axe.utils.querySelectorAllFilter(
+		axe._tree[0],
+		'dialog, [role=dialog], [aria-modal=true]',
+		vNode => dom.isVisible(vNode.actualNode)
+	);
+
+	if (definiteModals.length) {
+		axe._cache.set('isModalOpen', true);
+		return true;
+	}
+
+	// to find a "could be a modal" we will take the element stack from each of
+	// four corners and one from the middle of the viewport (total of 5). if each
+	// stack contains an element whose width/height is >= 75% of the screen, we
+	// found a "could be a modal"
+	const viewport = dom.getViewportSize(window);
+	const percentWidth = viewport.width * modalPercent;
+	const percentHeight = viewport.height * modalPercent;
+	const x = (viewport.width - percentWidth) / 2;
+	const y = (viewport.height - percentHeight) / 2;
+
+	const points = [
+		// top-left corner
+		{ x, y },
+		// top-right corner
+		{ x: viewport.width - x, y },
+		// center
+		{ x: viewport.width / 2, y: viewport.height / 2 },
+		// bottom-left corner
+		{ x, y: viewport.height - y },
+		// bottom-right corner
+		{ x: viewport.width - x, y: viewport.height - y }
+	];
+
+	const stacks = points.map(point => {
+		return Array.from(document.elementsFromPoint(point.x, point.y));
+	});
+
+	for (let i = 0; i < stacks.length; i++) {
+		// a modal isn't guaranteed to be the top most element so we'll have to
+		// find the first element in the stack that meets the modal criteria
+		// and make sure it's in the other stacks
+		const modalElement = stacks[i].find(elm => {
+			const style = window.getComputedStyle(elm);
+			return (
+				parseInt(style.width, 10) >= percentWidth &&
+				parseInt(style.height, 10) >= percentHeight &&
+				style.getPropertyValue('pointer-events') !== 'none' &&
+				(style.position === 'absolute' || style.position === 'fixed')
+			);
+		});
+
+		if (modalElement && stacks.every(stack => stack.includes(modalElement))) {
+			axe._cache.set('isModalOpen', true);
+			return true;
+		}
+	}
+
+	axe._cache.set('isModalOpen', undefined);
+	return undefined;
+};

data/node_modules/axe-core/lib/commons/dom/is-visible.js

@@ -39,6 +39,50 @@ function isClipped(style) {
 	return false;
 }
 
+/**
+ * Check `AREA` element is visible
+ * - validate if it is a child of `map`
+ * - ensure `map` is referred by `img` using the `usemap` attribute
+ * @param {Element} areaEl `AREA` element
+ * @retruns {Boolean}
+ */
+function isAreaVisible(el, screenReader, recursed) {
+	/**
+	 * Note:
+	 * - Verified that `map` element cannot refer to `area` elements across different document trees
+	 * - Verified that `map` element does not get affected by altering `display` property
+	 */
+	const mapEl = dom.findUp(el, 'map');
+	if (!mapEl) {
+		return false;
+	}
+
+	const mapElName = mapEl.getAttribute('name');
+	if (!mapElName) {
+		return false;
+	}
+
+	/**
+	 * `map` element has to be in light DOM
+	 */
+	const mapElRootNode = dom.getRootNode(el);
+	if (!mapElRootNode || mapElRootNode.nodeType !== 9) {
+		return false;
+	}
+
+	const refs = axe.utils.querySelectorAll(
+		axe._tree,
+		`img[usemap="#${axe.utils.escapeSelector(mapElName)}"]`
+	);
+	if (!refs || !refs.length) {
+		return false;
+	}
+
+	return refs.some(({ actualNode }) =>
+		dom.isVisible(actualNode, screenReader, recursed)
+	);
+}
+
 /**
  * Determine whether an element is visible
  * @method isVisible
@@ -74,9 +118,13 @@ dom.isVisible = function(el, screenReader, recursed) {
 	}
 
 	const nodeName = el.nodeName.toUpperCase();
-
 	if (
-		style.getPropertyValue('display') === 'none' ||
+		/**
+		 * Note:
+		 * Firefox's user-agent always sets `AREA` element to `display:none`
+		 * hence excluding the edge case, for visibility computation
+		 */
+		(nodeName !== 'AREA' && style.getPropertyValue('display') === 'none') ||
 		['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEMPLATE'].includes(nodeName) ||
 		(!screenReader && isClipped(style)) ||
 		(!recursed &&
@@ -89,6 +137,13 @@ dom.isVisible = function(el, screenReader, recursed) {
 		return false;
 	}
 
+	/**
+	 * check visibility of `AREA`
+	 */
+	if (nodeName === 'AREA') {
+		return isAreaVisible(el, screenReader, recursed);
+	}
+
 	const parent = el.assignedSlot ? el.assignedSlot : el.parentNode;
 	let isVisible = false;
 	if (parent) {

data/node_modules/axe-core/lib/commons/dom/url-props-from-attribute.js

@@ -0,0 +1,143 @@
+/* global dom */
+
+/**
+ * Parse resource object for a given node from a specified attribute
+ * @method urlPropsFromAttribute
+ * @param {HTMLElement} node given node
+ * @param {String} attribute attribute of the node from which resource should be parsed
+ * @returns {Object}
+ */
+dom.urlPropsFromAttribute = function urlPropsFromAttribute(node, attribute) {
+	const value = node[attribute];
+	if (!value) {
+		return undefined;
+	}
+
+	const nodeName = node.nodeName.toUpperCase();
+	let parser = node;
+
+	/**
+	 * Note:
+	 * The need to create a parser, is to keep this function generic, to be able to parse resource from element like `iframe` with `src` attribute
+	 */
+	if (!['A', 'AREA'].includes(nodeName)) {
+		parser = document.createElement('a');
+		parser.href = value;
+	}
+
+	/**
+	 * Curate `https` and `ftps` to `http` and `ftp` as they will resolve to same resource
+	 */
+	const protocol = [`https:`, `ftps:`].includes(parser.protocol)
+		? parser.protocol.replace(/s:$/, ':')
+		: parser.protocol;
+
+	const { pathname, filename } = getPathnameOrFilename(parser.pathname);
+
+	return {
+		protocol,
+		hostname: parser.hostname,
+		port: getPort(parser.port),
+		pathname: /\/$/.test(pathname) ? pathname : `${pathname}/`,
+		search: getSearchPairs(parser.search),
+		hash: getHashRoute(parser.hash),
+		filename
+	};
+};
+
+/**
+ * Resolve given port excluding default port(s)
+ * @param {String} port port
+ * @returns {String}
+ */
+function getPort(port) {
+	const excludePorts = [
+		`443`, // default `https` port
+		`80`
+	];
+	return !excludePorts.includes(port) ? port : ``;
+}
+
+/**
+ * Resolve if a given pathname has filename & resolve the same as parts
+ * @method getPathnameOrFilename
+ * @param {String} pathname pathname part of a given uri
+ * @returns {Array<Object>}
+ */
+function getPathnameOrFilename(pathname) {
+	const filename = pathname.split('/').pop();
+	if (!filename || filename.indexOf('.') === -1) {
+		return {
+			pathname,
+			filename: ``
+		};
+	}
+
+	return {
+		// remove `filename` from `pathname`
+		pathname: pathname.replace(filename, ''),
+
+		// ignore filename when index.*
+		filename: /index./.test(filename) ? `` : filename
+	};
+}
+
+/**
+ * Parse a given query string to key/value pairs sorted alphabetically
+ * @param {String} searchStr search string
+ * @returns {Object}
+ */
+function getSearchPairs(searchStr) {
+	const query = {};
+
+	if (!searchStr || !searchStr.length) {
+		return query;
+	}
+
+	// `substring` to remove `?` at the beginning of search string
+	const pairs = searchStr.substring(1).split(`&`);
+	if (!pairs || !pairs.length) {
+		return query;
+	}
+
+	for (let index = 0; index < pairs.length; index++) {
+		const pair = pairs[index];
+		const [key, value = ''] = pair.split(`=`);
+		query[decodeURIComponent(key)] = decodeURIComponent(value);
+	}
+
+	return query;
+}
+
+/**
+ * Interpret a given hash
+ * if `hash`
+ * -> is `hashbang` -or- `hash` is followed by `slash`
+ * -> it resolves to a different resource
+ * @method getHashRoute
+ * @param {String} hash hash component of a parsed uri
+ * @returns {String}
+ */
+function getHashRoute(hash) {
+	if (!hash) {
+		return ``;
+	}
+
+	/**
+	 * Check for any conventionally-formatted hashbang that may be present
+	 * eg: `#, #/, #!, #!/`
+	 */
+	const hashRegex = /#!?\/?/g;
+	const hasMatch = hash.match(hashRegex);
+	if (!hasMatch) {
+		return ``;
+	}
+
+	// do not resolve inline link as hash
+	const [matchedStr] = hasMatch;
+	if (matchedStr === '#') {
+		return ``;
+	}
+
+	return hash;
+}

data/node_modules/axe-core/lib/commons/dom/visually-contains.js

@@ -1,35 +1,51 @@
 /* global dom */
 
+/**
+ * Return the ancestor node that is a scroll region.
+ * @param {VirtualNode}
+ * @return {VirtualNode|null}
+ */
+function getScrollAncestor(node) {
+	const vNode = axe.utils.getNodeFromTree(node);
+	let ancestor = vNode.parent;
+
+	while (ancestor) {
+		if (axe.utils.getScroll(ancestor.actualNode)) {
+			return ancestor.actualNode;
+		}
+
+		ancestor = ancestor.parent;
+	}
+}
+
 /**
  * Checks whether a parent element visually contains its child, either directly or via scrolling.
  * Assumes that |parent| is an ancestor of |node|.
- * @method visuallyContains
- * @memberof axe.commons.dom
- * @instance
  * @param {Element} node
  * @param {Element} parent
  * @return {boolean} True if node is visually contained within parent
  */
-dom.visuallyContains = function(node, parent) {
-	var rectBound = node.getBoundingClientRect();
-	var margin = 0.01;
-	var rect = {
+function contains(node, parent) {
+	const rectBound = node.getBoundingClientRect();
+	const margin = 0.01;
+	const rect = {
 		top: rectBound.top + margin,
 		bottom: rectBound.bottom - margin,
 		left: rectBound.left + margin,
 		right: rectBound.right - margin
 	};
-	var parentRect = parent.getBoundingClientRect();
-	var parentTop = parentRect.top;
-	var parentLeft = parentRect.left;
-	var parentScrollArea = {
+
+	const parentRect = parent.getBoundingClientRect();
+	const parentTop = parentRect.top;
+	const parentLeft = parentRect.left;
+	const parentScrollArea = {
 		top: parentTop - parent.scrollTop,
 		bottom: parentTop - parent.scrollTop + parent.scrollHeight,
 		left: parentLeft - parent.scrollLeft,
 		right: parentLeft - parent.scrollLeft + parent.scrollWidth
 	};
 
-	var style = window.getComputedStyle(parent);
+	const style = window.getComputedStyle(parent);
 
 	// if parent element is inline, scrollArea will be too unpredictable
 	if (style.getPropertyValue('display') === 'inline') {
@@ -58,4 +74,38 @@ dom.visuallyContains = function(node, parent) {
 	}
 
 	return true;
+}
+
+/**
+ * Checks whether a parent element visually contains its child, either directly or via scrolling.
+ * Assumes that |parent| is an ancestor of |node|.
+ * @method visuallyContains
+ * @memberof axe.commons.dom
+ * @instance
+ * @param {Element} node
+ * @param {Element} parent
+ * @return {boolean} True if node is visually contained within parent
+ */
+dom.visuallyContains = function visuallyContains(node, parent) {
+	const parentScrollAncestor = getScrollAncestor(parent);
+
+	// if the elements share a common scroll parent, we can check if the
+	// parent visually contains the node. otherwise we need to check each
+	// scroll parent in between the node and the parent since if the
+	// element is off screen due to the scroll, it won't be visually contained
+	// by the parent
+	do {
+		const nextScrollAncestor = getScrollAncestor(node);
+
+		if (
+			nextScrollAncestor === parentScrollAncestor ||
+			nextScrollAncestor === parent
+		) {
+			return contains(node, parent);
+		}
+
+		node = nextScrollAncestor;
+	} while (node);
+
+	return false;
 };