[CLOSING > See: #1081] feat(rule): css-orientation-lock new wcag21 rule

build/tasks/test-webdriver.js

@@ -46,6 +46,11 @@ module.exports = function(grunt) {
 			.timeouts()
 			.setScriptTimeout(!isMobile ? 60000 * 5 : 60000 * 10);
 
+		driver
+			.manage()
+			.timeouts()
+			.implicitlyWait(60000);
+
 		return (
 			driver
 				.get(url)
@@ -87,6 +92,9 @@ module.exports = function(grunt) {
 						return Promise.resolve(errors);
 					}
 				})
+				.catch(function(err) {
+					console.error('Selenium Webdriver Error: ', err);
+				})
 		);
 	}
 

doc/rule-descriptions.md

@@ -19,6 +19,7 @@
 | bypass | Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content | Serious | cat.keyboard, wcag2a, wcag241, section508, section508.22.o | true |
 | checkboxgroup | Ensures related <input type="checkbox"> elements have a group and that the group designation is consistent | Critical | cat.forms, best-practice | true |
 | color-contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds | Serious | cat.color, wcag2aa, wcag143 | true |
+| css-orientation-lock | Ensures content is not locked to any specific display orientation, and the content is operable in all display orientations | Serious | cat.structure, wcag262, wcag21aa, experimental | true |
 | definition-list | Ensures <dl> elements are structured correctly | Serious | cat.structure, wcag2a, wcag131 | true |
 | dlitem | Ensures <dt> and <dd> elements are contained by a <dl> | Serious | cat.structure, wcag2a, wcag131 | true |
 | document-title | Ensures each HTML document contains a non-empty <title> element | Serious | cat.text-alternatives, wcag2a, wcag242 | true |

lib/checks/mobile/css-orientation-lock.js

@@ -0,0 +1,129 @@
+/* global context */
+
+// extract asset of type `cssom` from context
+const { cssom = undefined } = context || {};
+const checkPass = true;
+const checkFail = false;
+const checkIncomplete = undefined;
+
+// if there is no cssom <- return incomplete
+if (!cssom || !cssom.length) {
+	return checkIncomplete;
+}
+
+// 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
+		const key = shadowId ? shadowId : 'topDocument';
+		// init property if does not exist
+		if (!out[key]) {
+			out[key] = {
+				root,
+				rules: []
+			};
+		}
+		// check if sheet and rules exist
+		if (!sheet || !sheet.rules) {
+			//return
+			return out;
+		}
+		const rules = Array.from(sheet.rules);
+		// 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.
+
+// extract styles for each orientation rule to verify transform is applied
+let isLocked = false;
+let relatedElements = [];
+
+Object.keys(rulesGroupByDocumentFragment).forEach(key => {
+	const { root, rules } = rulesGroupByDocumentFragment[key];
+
+	// 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;
+	});
+
+	// 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)
+		);
+	});
+
+	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 => {
+			/* eslint max-statements: ["error", 20], complexity: ["error", 15] */
+
+			// ensure selectorText exists
+			if (!cssRule.selectorText) {
+				return;
+			}
+			// ensure the given selector has styles declared (non empty selector)
+			if (cssRule.styleMap && cssRule.styleMap.size <= 0) {
+				return;
+			}
+
+			// check if transform style exists
+			const transformStyleValue = cssRule.style.transform || false;
+			// transformStyleValue -> is the value applied to property
+			// eg: "rotate(-90deg)"
+			if (!transformStyleValue) {
+				return;
+			}
+
+			const rotate = transformStyleValue.match(/rotate\(([^)]+)deg\)/);
+			const deg = parseInt((rotate && rotate[1]) || 0);
+			const locked = deg % 90 === 0 && deg % 180 !== 0;
+
+			// 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);
+				}
+			}
+
+			// set locked boolean
+			isLocked = locked;
+		});
+	});
+});
+
+if (!isLocked) {
+	// return
+	return checkPass;
+}
+
+// set relatedNodes
+if (relatedElements.length) {
+	this.relatedNodes(relatedElements);
+}
+
+// return
+return checkFail;

lib/checks/mobile/css-orientation-lock.json

@@ -0,0 +1,11 @@
+{
+	"id": "css-orientation-lock",
+	"evaluate": "css-orientation-lock.js",
+	"metadata": {
+		"impact": "serious",
+		"messages": {
+			"pass": "Display is operable, and orientation lock does not exist",
+			"fail": "CSS Orientation lock is applied, and makes display inoperable"
+		}
+	}
+}

lib/core/utils/preload-cssom.js

@@ -28,7 +28,8 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 				const sheet = convertTextToStylesheetFn({
 					data,
 					isExternal: true,
-					shadowId
+					shadowId,
+					root
 				});
 				resolve(sheet);
 			})
@@ -60,7 +61,8 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 					resolve({
 						sheet,
 						isExternal: false,
-						shadowId
+						shadowId,
+						root
 					})
 				);
 				return;
@@ -89,6 +91,7 @@ function loadCssom({ root, shadowId }, timeout, convertTextToStylesheetFn) {
 					convertTextToStylesheetFn({
 						data: inlineRulesCssText,
 						shadowId,
+						root,
 						isExternal: false
 					})
 				)
@@ -166,15 +169,16 @@ axe.utils.preloadCssom = function preloadCssom({
 	 * @property {Object} param.doc implementation document to create style elements
 	 * @property {String} param.shadowId (Optional) shadowId if shadowDOM
 	 */
-	function convertTextToStylesheet({ data, isExternal, shadowId }) {
+	function convertTextToStylesheet({ data, isExternal, shadowId, root }) {
 		const style = dynamicDoc.createElement('style');
 		style.type = 'text/css';
 		style.appendChild(dynamicDoc.createTextNode(data));
 		dynamicDoc.head.appendChild(style);
 		return {
 			sheet: style.sheet,
 			isExternal,
-			shadowId
+			shadowId,
+			root
 		};
 	}
 

lib/rules/css-orientation-lock.json

@@ -0,0 +1,20 @@
+{
+	"id": "css-orientation-lock",
+	"selector": "html",
+	"tags": [
+		"cat.structure",
+		"wcag262",
+		"wcag21aa",
+		"experimental"
+	],
+	"metadata": {
+		"description": "Ensures content is not locked to any specific display orientation, and the content is operable in all display orientations",
+		"help": "CSS Media queries are not used to lock display orientation"
+	},
+	"all": [
+		"css-orientation-lock"
+	],
+	"any": [],
+	"none": [],
+	"preload": true
+}