govuk_publishing_components 21.22.0 → 21.22.1

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

@@ -4,7 +4,7 @@
 | area-alt                            | Ensures <area> elements of image maps have alternate text                                                            | Critical           | cat.text-alternatives, wcag2a, wcag111, section508, section508.22.a              | true               | true     | false        |
 | aria-allowed-attr                   | Ensures ARIA attributes are allowed for an element's role                                                             | Critical           | cat.aria, wcag2a, wcag412                                                        | true               | true     | false        |
 | aria-allowed-role                   | Ensures role attribute has an appropriate value for the element                                                            | Minor              | cat.aria, best-practice                                                          | true               | true     | true         |
-| aria-dpub-role-fallback             | Ensures unsupported DPUB roles are only used on elements with implicit fallback roles                                      | Moderate           | cat.aria, wcag2a, wcag131                                                        | true               | true     | false        |
+| aria-dpub-role-fallback             | Ensures unsupported DPUB roles are only used on elements with implicit fallback roles                                      | Moderate           | cat.aria, wcag2a, wcag131, deprecated                                            | false              | true     | false        |
 | aria-hidden-body                    | Ensures aria-hidden='true' is not present on the document body.                                                  | Critical           | cat.aria, wcag2a, wcag412                                                        | true               | true     | false        |
 | aria-hidden-focus                   | Ensures aria-hidden elements do not contain focusable elements                                                             | Serious            | cat.name-role-value, wcag2a, wcag412, wcag131                                    | true               | true     | false        |
 | aria-input-field-name               | Ensures every ARIA input field has an accessible name                                                                      | Moderate, Serious  | wcag2a, wcag412                                                                  | true               | true     | true         |
@@ -57,7 +57,7 @@
 | landmark-no-duplicate-contentinfo   | Ensures the document has at most one contentinfo landmark                                                                  | Moderate           | cat.semantics, best-practice                                                     | true               | true     | false        |
 | landmark-one-main                   | Ensures the document has only one main landmark and each iframe in the page has at most one main landmark                  | Moderate           | cat.semantics, best-practice                                                     | true               | true     | false        |
 | landmark-unique                     | Landmarks must have a unique role or role/label/title (i.e. accessible name) combination                                   | Moderate           | cat.semantics, best-practice                                                     | true               | true     | false        |
-| layout-table                        | Ensures presentational <table> elements do not use <th>, <caption> elements or the summary attribute     | Serious            | cat.semantics, wcag2a, wcag131                                                   | true               | true     | false        |
+| layout-table                        | Ensures presentational <table> elements do not use <th>, <caption> elements or the summary attribute     | Serious            | cat.semantics, wcag2a, wcag131, deprecated                                       | false              | true     | false        |
 | link-in-text-block                  | Links can be distinguished without relying on color                                                                        | Serious            | cat.color, experimental, wcag2a, wcag141                                         | true               | true     | true         |
 | link-name                           | Ensures links have discernible text                                                                                        | Serious            | cat.name-role-value, wcag2a, wcag412, wcag244, section508, section508.22.a       | true               | true     | false        |
 | list                                | Ensures that lists are structured correctly                                                                                | Serious            | cat.structure, wcag2a, wcag131                                                   | true               | true     | false        |

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

@@ -5,7 +5,10 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "ARIA attributes are used correctly for the defined role",
-			"fail": "ARIA attribute{{=it.data && it.data.length > 1 ? 's are' : ' is'}} not allowed:{{~it.data:value}} {{=value}}{{~}}"
+			"fail": {
+				"singular": "ARIA attribute is not allowed: ${data.values}",
+				"plural": "ARIA attributes are not allowed: ${data.values}"
+			}
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/aria/aria-allowed-role.json

@@ -9,8 +9,14 @@
 		"impact": "minor",
 		"messages": {
 			"pass": "ARIA role is allowed for given element",
-			"fail": "ARIA role{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} {{=it.data && it.data.length > 1 ? 'are' : ' is'}} not allowed for given element",
-			"incomplete": "ARIA role{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} must be removed when the element is made visible, as {{=it.data && it.data.length > 1 ? 'they are' : 'it is'}} not allowed for the element"
+			"fail": {
+				"singular": "ARIA role ${data.values} is not allowed for given element",
+				"plural": "ARIA roles ${data.values} are not allowed for given element"
+			},
+			"incomplete": {
+				"singular": "ARIA role ${data.values} must be removed when the element is made visible, as it is not allowed for the element",
+				"plural": "ARIA roles ${data.values} must be removed when the element is made visible, as they are not allowed for the element"
+			}
 		}
 	}
 }

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

@@ -5,7 +5,10 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Uses a supported aria-errormessage technique",
-			"fail": "aria-errormessage value{{=it.data && it.data.length > 1 ? 's' : ''}} {{~it.data:value}} `{{=value}}{{~}}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
+			"fail": {
+				"singular": "aria-errormessage value `${data.values}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)",
+				"plural": "aria-errormessage values `${data.values}` must use a technique to announce the message (e.g., aria-live, aria-describedby, role=alert, etc.)"
+			}
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/aria/implicit-role-fallback.json

@@ -1,6 +1,7 @@
 {
 	"id": "implicit-role-fallback",
 	"evaluate": "implicit-role-fallback.js",
+	"deprecated": true,
 	"metadata": {
 		"impact": "moderate",
 		"messages": {

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

@@ -5,7 +5,7 @@
 		"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"
+			"incomplete": "Check that the <label> does not need be part of the ARIA ${data} field's name"
 		}
 	}
 }

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

@@ -5,7 +5,10 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "All required ARIA attributes are present",
-			"fail": "Required ARIA attribute{{=it.data && it.data.length > 1 ? 's' : ''}} not present:{{~it.data:value}} {{=value}}{{~}}"
+			"fail": {
+				"singular": "Required ARIA attribute not present: ${data.values}",
+				"plural": "Required ARIA attributes not present: ${data.values}"
+			}
 		}
 	}
 }

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

@@ -19,8 +19,14 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Required ARIA children are present",
-			"fail": "Required ARIA {{=it.data && it.data.length > 1 ? 'children' : 'child'}} role not present:{{~it.data:value}} {{=value}}{{~}}",
-			"incomplete": "Expecting ARIA {{=it.data && it.data.length > 1 ? 'children' : 'child'}} role to be added:{{~it.data:value}} {{=value}}{{~}}"
+			"fail": {
+				"singular": "Required ARIA child role not present: ${data.values}",
+				"plural": "Required ARIA children role not present: ${data.values}"
+			},
+			"incomplete": {
+				"singular": "Expecting ARIA child role to be added: ${data.values}",
+				"plural": "Expecting ARIA children role to be added: ${data.values}"
+			}
 		}
 	}
 }

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

@@ -5,7 +5,10 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Required ARIA parent role present",
-			"fail": "Required ARIA parent{{=it.data && it.data.length > 1 ? 's' : ''}} role not present:{{~it.data:value}} {{=value}}{{~}}"
+			"fail": {
+				"singular": "Required ARIA parent role not present: ${data.values}",
+				"plural": "Required ARIA parents role not present: ${data.values}"
+			}
 		}
 	}
 }

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

@@ -5,7 +5,7 @@
 		"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}}{{~}}"
+			"fail": "ARIA attribute is not widely supported in screen readers and assistive technologies: ${data.values}"
 		}
 	}
 }

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

@@ -5,7 +5,7 @@
 		"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}}{{~}}"
+			"fail": "The role used is not widely supported in screen readers and assistive technologies: ${data.values}"
 		}
 	}
 }

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

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

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

@@ -5,8 +5,11 @@
 	"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}}{{~}}"
+			"pass": "ARIA attribute name is valid",
+			"fail": {
+				"singular": "Invalid ARIA attribute name: ${data.values}",
+				"plural": "Invalid ARIA attribute names: ${data.values}"
+			}
 		}
 	}
 }

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

@@ -44,7 +44,7 @@ const data = {
 	contrastRatio: cr ? truncatedResult : undefined,
 	fontSize: `${((fontSize * 72) / 96).toFixed(1)}pt (${fontSize}px)`,
 	fontWeight: bold ? 'bold' : 'normal',
-	missingData: missing,
+	messageKey: missing,
 	expectedContrastRatio: cr.expectedContrastRatio + ':1'
 };
 

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

@@ -4,9 +4,10 @@
 	"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}}",
+			"pass": "Element has sufficient color contrast of ${data.contrastRatio}",
+			"fail": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
 			"incomplete": {
+				"default": "Unable to determine contrast ratio",
 				"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",
@@ -16,8 +17,7 @@
 				"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"
+				"shortTextContent": "Element content is too short to determine if it is actual text content"
 			}
 		}
 	}

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

@@ -50,7 +50,7 @@ if (color.elementIsDistinct(node, parentBlock)) {
 	} else if (contrast >= 3.0) {
 		axe.commons.color.incompleteData.set('fgColor', 'bgContrast');
 		this.data({
-			missingData: axe.commons.color.incompleteData.get('fgColor')
+			messageKey: axe.commons.color.incompleteData.get('fgColor')
 		});
 		axe.commons.color.incompleteData.clear();
 		// User needs to check whether there is a hover and a focus style
@@ -74,7 +74,7 @@ if (color.elementIsDistinct(node, parentBlock)) {
 		}
 		axe.commons.color.incompleteData.set('fgColor', reason);
 		this.data({
-			missingData: axe.commons.color.incompleteData.get('fgColor')
+			messageKey: axe.commons.color.incompleteData.get('fgColor')
 		});
 		axe.commons.color.incompleteData.clear();
 		return undefined;

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

@@ -7,12 +7,12 @@
 			"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": {
+				"default": "Unable to determine contrast ratio",
 				"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"
+				"bgOverlap": "Element's contrast ratio could not be determined because of element overlap"
 			}
 		}
 	}

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

@@ -102,7 +102,7 @@ var data = {
 
 var result = runCheck(virtualNode);
 if (!result) {
-	data.failureCode = failureCode;
+	data.messageKey = failureCode;
 }
 this.data(data);
 

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

@@ -7,7 +7,14 @@
 		"impact": "critical",
 		"messages": {
 			"pass": "Element is contained in a fieldset",
-			"fail": "{{var code = it.data && it.data.failureCode;}}{{? code === 'no-legend'}}Fieldset does not have a legend as its first child{{?? code === 'empty-legend'}}Legend does not have text that is visible to screen readers{{?? code === 'mixed-inputs'}}Fieldset contains unrelated inputs{{?? code === 'no-group-label'}}ARIA group does not have aria-label or aria-labelledby{{?? code === 'group-mixed-inputs'}}ARIA group contains unrelated inputs{{??}}Element does not have a containing fieldset or ARIA group{{?}}"
+			"fail": {
+				"default": "Element does not have a containing fieldset or ARIA group",
+				"no-legend": "Fieldset does not have a legend as its first child",
+				"empty-legend": "Legend does not have text that is visible to screen readers",
+				"mixed-inputs": "Fieldset contains unrelated inputs",
+				"no-group-label": "ARIA group does not have aria-label or aria-labelledby",
+				"group-mixed-inputs": "ARIA group contains unrelated inputs"
+			}
 		}
 	}
 }

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

@@ -57,9 +57,9 @@ if (uniqueLabels.length > 0 && sharedLabels.length > 0) {
 }
 
 if (uniqueLabels.length > 0 && sharedLabels.length === 0) {
-	data.failureCode = 'no-shared-label';
+	data.messageKey = 'no-shared-label';
 } else if (uniqueLabels.length === 0 && sharedLabels.length > 0) {
-	data.failureCode = 'no-unique-label';
+	data.messageKey = 'no-unique-label';
 }
 
 this.data(data);

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

@@ -6,8 +6,12 @@
 	"metadata": {
 		"impact": "critical",
 		"messages": {
-			"pass": "Elements with the name \"{{=it.data.name}}\" have both a shared label, and a unique label, referenced through aria-labelledby",
-			"fail": "{{var code = it.data && it.data.failureCode;}}Elements with the name \"{{=it.data.name}}\" do not all have {{? code === 'no-shared-label' }}a shared label{{?? code === 'no-unique-label' }}a unique label{{??}}both a shared label, and a unique label{{?}}, referenced through aria-labelledby"
+			"pass": "Elements with the name \"${data.name}\" have both a shared label, and a unique label, referenced through aria-labelledby",
+			"fail": {
+				"default": "Elements with the name \"${data.name}\" do not all have both a shared label, and a unique label referenced through aria-labelledby",
+				"no-shared-label": "Elements with the name \"${data.name}\" do not all have a shared label referenced through aria-labelledby",
+				"no-unique-label": "Elements with the name \"${data.name}\" do not all have a unique label referenced through aria-labelledby"
+			}
 		}
 	}
 }

data/node_modules/axe-core/lib/checks/keyboard/landmark-is-top-level.json

@@ -4,8 +4,8 @@
 	"metadata": {
 		"impact": "moderate",
 		"messages": {
-			"pass": "The {{=it.data.role }} landmark is at the top level.",
-			"fail": "The {{=it.data.role }} landmark is contained in another landmark."
+			"pass": "The ${data.role} landmark is at the top level.",
+			"fail": "The ${data.role} landmark is contained in another landmark."
 		}
 	}
 }

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

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

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

@@ -5,7 +5,10 @@
 		"impact": "serious",
 		"messages": {
 			"pass": "List item has 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"
+			"fail": {
+				"default": "List item does not have a <ul>, <ol> parent element",
+				"roleNotValid": "List item does not have a <ul>, <ol> parent element without a role, or a role=\"list\""
+			}
 		}
 	}
 }

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

@@ -1,134 +1,251 @@
 /* global context */
-
-// extract asset of type `cssom` from context
 const { cssom = undefined } = context || {};
-
-// if there is no cssom <- return incomplete
+const { degreeThreshold = 0 } = options || {};
 if (!cssom || !cssom.length) {
 	return undefined;
 }
 
-// combine all rules from each sheet into one array
-const rulesGroupByDocumentFragment = cssom.reduce(
-	(out, { sheet, root, shadowId }) => {
-		// construct key based on shadowId or top level document
+let isLocked = false;
+let relatedElements = [];
+const rulesGroupByDocumentFragment = groupCssomByDocument(cssom);
+
+for (const key of Object.keys(rulesGroupByDocumentFragment)) {
+	const { root, rules } = rulesGroupByDocumentFragment[key];
+	const orientationRules = rules.filter(isMediaRuleWithOrientation);
+	if (!orientationRules.length) {
+		continue;
+	}
+
+	orientationRules.forEach(({ cssRules }) => {
+		Array.from(cssRules).forEach(cssRule => {
+			const locked = getIsOrientationLocked(cssRule);
+
+			// if locked and not root HTML, preserve as relatedNodes
+			if (locked && cssRule.selectorText.toUpperCase() !== 'HTML') {
+				const elms =
+					Array.from(root.querySelectorAll(cssRule.selectorText)) || [];
+				relatedElements = relatedElements.concat(elms);
+			}
+
+			isLocked = isLocked || locked;
+		});
+	});
+}
+
+if (!isLocked) {
+	return true;
+}
+if (relatedElements.length) {
+	this.relatedNodes(relatedElements);
+}
+return false;
+
+/**
+ * Group given cssom by document/ document fragment
+ * @param {Array<Object>} allCssom cssom
+ * @return {Object}
+ */
+function groupCssomByDocument(cssObjectModel) {
+	return cssObjectModel.reduce((out, { sheet, root, shadowId }) => {
 		const key = shadowId ? shadowId : 'topDocument';
-		// init property if does not exist
+
 		if (!out[key]) {
-			out[key] = {
-				root,
-				rules: []
-			};
+			out[key] = { root, rules: [] };
 		}
-		// check if sheet and rules exist
+
 		if (!sheet || !sheet.cssRules) {
-			//return
 			return out;
 		}
+
 		const rules = Array.from(sheet.cssRules);
-		// add rules into same document fragment
 		out[key].rules = out[key].rules.concat(rules);
 
-		//return
 		return out;
-	},
-	{}
-);
+	}, {});
+}
 
-// Note:
-// Some of these functions can be extracted to utils, but best to do it when other cssom rules are authored.
+/**
+ * Filter CSS Rules that target Orientation CSS Media Features
+ * @param {Array<Object>} cssRules
+ * @returns {Array<Object>}
+ */
+function isMediaRuleWithOrientation({ type, cssText }) {
+	/**
+	 * Filter:
+	 * CSSRule.MEDIA_Rule
+	 * -> https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+	 */
+	if (type !== 4) {
+		return false;
+	}
 
-// extract styles for each orientation rule to verify transform is applied
-let isLocked = false;
-let relatedElements = [];
+	/**
+	 * Filter:
+	 * CSSRule with conditionText of `orientation`
+	 */
+	return (
+		/orientation:\s*landscape/i.test(cssText) ||
+		/orientation:\s*portrait/i.test(cssText)
+	);
+}
 
-Object.keys(rulesGroupByDocumentFragment).forEach(key => {
-	const { root, rules } = rulesGroupByDocumentFragment[key];
+/**
+ * Interpolate a given CSS Rule to ascertain if orientation is locked by use of any transformation functions that affect rotation along the Z Axis
+ * @param {Object} cssRule given CSS Rule
+ * @property {String} cssRule.selectorText selector text targetted by given cssRule
+ * @property {Object} cssRule.style style
+ * @return {Boolean}
+ */
+function getIsOrientationLocked({ selectorText, style }) {
+	if (!selectorText || style.length <= 0) {
+		return false;
+	}
 
-	// filter media rules from all rules
-	const mediaRules = rules.filter(r => {
-		// doc: https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
-		// type value of 4 (CSSRule.MEDIA_RULE) pertains to media rules
-		return r.type === 4;
-	});
-	if (!mediaRules || !mediaRules.length) {
-		return;
+	const transformStyle =
+		style.transform || style.webkitTransform || style.msTransform || false;
+	if (!transformStyle) {
+		return false;
 	}
 
-	// narrow down to media rules with `orientation` as a keyword
-	const orientationRules = mediaRules.filter(r => {
-		// conditionText exists on media rules, which contains only the @media condition
-		// 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)
-		);
-	});
-	if (!orientationRules || !orientationRules.length) {
-		return;
+	/**
+	 * get last match/occurence of a transformation function that can affect rotation along Z axis
+	 */
+	const matches = transformStyle.match(
+		/(rotate|rotateZ|rotate3d|matrix|matrix3d)\(([^)]+)\)(?!.*(rotate|rotateZ|rotate3d|matrix|matrix3d))/
+	);
+	if (!matches) {
+		return false;
 	}
 
-	orientationRules.forEach(r => {
-		// r.cssRules is a RULEList and not an array
-		if (!r.cssRules.length) {
-			return;
-		}
-		// cssRules ia a list of rules
-		// 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 => {
-			// ensure selectorText exists
-			if (!cssRule.selectorText) {
-				return;
-			}
-			// ensure the given selector has styles declared (non empty selector)
-			if (cssRule.style.length <= 0) {
-				return;
-			}
+	const [, transformFn, transformFnValue] = matches;
+	let degrees = getRotationInDegrees(transformFn, transformFnValue);
+	if (!degrees) {
+		return false;
+	}
+	degrees = Math.abs(degrees);
+
+	/**
+	 * When degree is a multiple of 180, it is not considered an orientation lock
+	 */
+	if (Math.abs(degrees - 180) % 180 <= degreeThreshold) {
+		return false;
+	}
+
+	return Math.abs(degrees - 90) % 90 <= degreeThreshold;
+}
 
-			// 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) {
+/**
+ * Interpolate rotation along the z axis from a given value to a transform function
+ * @param {String} transformFunction CSS transformation function
+ * @param {String} transformFnValue value applied to a transform function (contains a unit)
+ * @returns {Number}
+ */
+function getRotationInDegrees(transformFunction, transformFnValue) {
+	switch (transformFunction) {
+		case 'rotate':
+		case 'rotateZ':
+			return getAngleInDegrees(transformFnValue);
+		case 'rotate3d':
+			const [, , z, angleWithUnit] = transformFnValue
+				.split(',')
+				.map(value => value.trim());
+			if (parseInt(z) === 0) {
+				// no transform is applied along z axis -> ignore
 				return;
 			}
+			return getAngleInDegrees(angleWithUnit);
+		case 'matrix':
+		case 'matrix3d':
+			return getAngleInDegreesFromMatrixTransform(transformFnValue);
+		default:
+			return;
+	}
+}
 
-			const rotate = transformStyleValue.match(/rotate\(([^)]+)deg\)/);
-			const deg = parseInt((rotate && rotate[1]) || 0);
-			const locked = deg % 90 === 0 && deg % 180 !== 0;
+/**
+ * Get angle in degrees from a transform value by interpolating the unit of measure
+ * @param {String} angleWithUnit value applied to a transform function (Eg: 1turn)
+ * @returns{Number|undefined}
+ */
+function getAngleInDegrees(angleWithUnit) {
+	const [unit] = angleWithUnit.match(/(deg|grad|rad|turn)/) || [];
+	if (!unit) {
+		return;
+	}
 
-			// if locked
-			// and not root HTML
-			// preserve as relatedNodes
-			if (locked && cssRule.selectorText.toUpperCase() !== 'HTML') {
-				const selector = cssRule.selectorText;
-				const elms = Array.from(root.querySelectorAll(selector));
-				if (elms && elms.length) {
-					relatedElements = relatedElements.concat(elms);
-				}
-			}
+	const angle = parseFloat(angleWithUnit.replace(unit, ``));
+	switch (unit) {
+		case 'rad':
+			return convertRadToDeg(angle);
+		case 'grad':
+			return convertGradToDeg(angle);
+		case 'turn':
+			return convertTurnToDeg(angle);
+		case 'deg':
+		default:
+			return parseInt(angle);
+	}
+}
 
-			// set locked boolean
-			isLocked = locked;
-		});
-	});
-});
+/**
+ * Get angle in degrees from a transform value applied to `matrix` or `matrix3d` transform functions
+ * @param {String} transformFnValue value applied to a transform function (contains a unit)
+ * @returns {Number}
+ */
+function getAngleInDegreesFromMatrixTransform(transformFnValue) {
+	const values = transformFnValue.split(',');
+
+	/**
+	 * Matrix 2D
+	 * Notes: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
+	 */
+	if (values.length <= 6) {
+		const [a, b] = values;
+		const radians = Math.atan2(parseFloat(b), parseFloat(a));
+		return convertRadToDeg(radians);
+	}
 
-if (!isLocked) {
-	// return
-	return true;
+	/**
+	 * Matrix 3D
+	 * Notes: https://drafts.csswg.org/css-transforms-2/#decomposing-a-3d-matrix
+	 */
+	const sinB = parseFloat(values[8]);
+	const b = Math.asin(sinB);
+	const cosB = Math.cos(b);
+	const rotateZRadians = Math.acos(parseFloat(values[0]) / cosB);
+	return convertRadToDeg(rotateZRadians);
 }
 
-// set relatedNodes
-if (relatedElements.length) {
-	this.relatedNodes(relatedElements);
+/**
+ * Convert angle specified in unit radians to degrees
+ * See - https://drafts.csswg.org/css-values-3/#rad
+ * @param {Number} radians radians
+ * @return {Number}
+ */
+function convertRadToDeg(radians) {
+	return Math.round(radians * (180 / Math.PI));
 }
 
-// return fail
-return false;
+/**
+ * Convert angle specified in unit grad to degrees
+ * See - https://drafts.csswg.org/css-values-3/#grad
+ * @param {Number} grad grad
+ * @return {Number}
+ */
+function convertGradToDeg(grad) {
+	grad = grad % 400;
+	if (grad < 0) {
+		grad += 400;
+	}
+	return Math.round((grad / 400) * 360);
+}
+
+/**
+ * Convert angle specifed in unit turn to degrees
+ * See - https://drafts.csswg.org/css-values-3/#turn
+ * @param {Number} turn
+ * @returns {Number}
+ */
+function convertTurnToDeg(turn) {
+	return Math.round(360 / (1 / turn));
+}