feat: rule aria-hidden-focus

doc/rule-descriptions.md

@@ -6,6 +6,7 @@
 | aria-allowed-role | Ensures role attribute has an appropriate value for the element | Minor | cat.aria, best-practice | true |
 | aria-dpub-role-fallback | Ensures unsupported DPUB roles are only used on elements with implicit fallback roles | Moderate | cat.aria, wcag2a, wcag131 | true |
 | aria-hidden-body | Ensures aria-hidden='true' is not present on the document body. | Critical | cat.aria, wcag2a, wcag412 | true |
+| aria-hidden-focus | Ensures aria-hidden elements do not contain focusable elements | Serious | cat.name-role-value, wcag2a, wcag412 | true |
 | aria-required-attr | Ensures elements with ARIA roles have all required ARIA attributes | Critical | cat.aria, wcag2a, wcag412 | true |
 | aria-required-children | Ensures elements with an ARIA role that require child roles contain them | Critical | cat.aria, wcag2a, wcag131 | true |
 | aria-required-parent | Ensures elements with an ARIA role that require parent roles are contained by them | Critical | cat.aria, wcag2a, wcag131 | true |

lib/checks/aria/aria-hidden-focus.js

@@ -0,0 +1,36 @@
+function getElmsIncludingShadowDOM(node, elms = []) {
+	// Note: can be moved to a utility fn, when the need arises
+	const nodes = node.querySelectorAll('*');
+
+	if (!nodes || (!nodes.length && axe.utils.isShadowRoot(node))) {
+		getElmsIncludingShadowDOM(node.shadowRoot, elms);
+	}
+
+	for (let i = 0, el; (el = nodes[i]); ++i) {
+		elms.push(el);
+		if (axe.utils.isShadowRoot(el)) {
+			getElmsIncludingShadowDOM(el.shadowRoot, elms);
+		}
+	}
+
+	return elms;
+}
+
+const children = getElmsIncludingShadowDOM(node);
+const elements = [node].concat(children);
+const result = elements.every(el => {
+	const isElFocusable = axe.commons.dom.isFocusable(el);
+	let tabIndex = el.getAttribute('tabindex');
+	tabIndex =
+		tabIndex && !isNaN(parseInt(tabIndex, 10)) ? parseInt(tabIndex) : null;
+	if (isElFocusable && (tabIndex && tabIndex < 0)) {
+		return true;
+	}
+	return isElFocusable === false;
+});
+
+if (!result) {
+	this.relatedNodes(children);
+}
+
+return result;

lib/checks/aria/aria-hidden-focus.json

@@ -0,0 +1,11 @@
+{
+  "id": "aria-hidden-focus",
+  "evaluate": "aria-hidden-focus.js",
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "No focusable elements under aria-hidden element",
+      "fail": "aria-hidden=true element must not contain focusable elements"
+    }
+  }
+}

lib/rules/aria-hidden-focus.json

@@ -0,0 +1,19 @@
+{
+  "id": "aria-hidden-focus",
+  "selector": "[aria-hidden=\"true\"]",
+  "excludeHidden": false,
+  "tags": [
+    "cat.name-role-value",
+    "wcag2a",
+    "wcag412"
+  ],
+  "metadata": {
+    "description": "Ensures aria-hidden elements do not contain focusable elements",
+    "help": "ARIA hidden element must not contain focusable elements"
+  },
+  "all": [],
+  "any": [
+    "aria-hidden-focus"
+  ],
+  "none": []
+}

test/checks/aria/aria-hidden-focus.js

@@ -0,0 +1,117 @@
+describe('aria-hidden-focus', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var check = undefined;
+	var checkContext = axe.testUtils.MockCheckContext();
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+
+	before(function() {
+		check = checks['aria-hidden-focus'];
+		checkContext._data = null;
+	});
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+	});
+
+	// pass
+	it('returns true when content not focusable by default', function() {
+		fixture.innerHTML = '<p id="target" aria-hidden="true">Some text</p>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when content hidden through CSS', function() {
+		fixture.innerHTML =
+			'<div id="target" aria-hidden="true"><a href="/" style="display:none">Link</a></div>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when content made unfocusable through tabindex', function() {
+		fixture.innerHTML =
+			'<div id="target" aria-hidden="true">' +
+			'<button tabindex="-1">Some button</button>' +
+			'</div>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when content made unfocusable through disabled', function() {
+		fixture.innerHTML = '<input id="target" disabled aria-hidden="true" />';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when aria-hidden=false does not negate aria-hidden true', function() {
+		// Note: aria-hidden can't be reset once you've set it to true on an ancestor
+		fixture.innerHTML =
+			'<div id="target" aria-hidden="true"><div aria-hidden="false"><button tabindex="-1">Some button</button></div></div>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isTrue(actual);
+	});
+
+	(shadowSupported ? it : xit)(
+		'returns true when content hidden through CSS inside shadowDOM',
+		function() {
+			fixture.innerHTML = '<div id="target"></div>';
+			var node = fixture.querySelector('#target');
+			var shadow = node.attachShadow({ mode: 'open' });
+			shadow.innerHTML =
+				'<div aria-hidden="true"><a href="/" style="display:none">Link</a></div>';
+			var actual = check.evaluate.call(checkContext, node);
+			assert.isTrue(actual);
+		}
+	);
+
+	// fail
+	it('returns false when focusable off screen link', function() {
+		fixture.innerHTML =
+			'<div id="target" aria-hidden="true"><a href="/" style="position:absolute; top:-999em">Link</a></div>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when focusable form field, incorrectly disabled', function() {
+		fixture.innerHTML =
+			'<div id="target" aria-hidden="true"><input type="text" aria-disabled="true"/></div>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when focusable content through tabindex', function() {
+		fixture.innerHTML =
+			'<p id="target" tabindex="0" aria-hidden="true">Some text</p>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when focusable summary element', function() {
+		fixture.innerHTML =
+			'<details id="target" aria-hidden="true"><summary>Some button</summary><p>Some details</p></details>';
+		var node = fixture.querySelector('#target');
+		var actual = check.evaluate.call(checkContext, node);
+		assert.isFalse(actual);
+	});
+
+	(shadowSupported ? it : xit)(
+		'returns false when focusable content through tabindex inside shadowDOM',
+		function() {
+			fixture.innerHTML = '<div id="target"></div>';
+			var node = fixture.querySelector('#target');
+			var shadow = node.attachShadow({ mode: 'open' });
+			shadow.innerHTML = '<p tabindex="0" aria-hidden="true">Some text</p>';
+			var actual = check.evaluate.call(checkContext, node);
+			assert.isFalse(actual);
+		}
+	);
+});

test/integration/rules/aria-hidden-focus/aria-hidden-focus.html

@@ -0,0 +1,23 @@
+<!-- Pass -->
+<p id='pass1' aria-hidden="true">Some text</p>
+<div id='pass2' aria-hidden="true"><a href="/" style="display:none">Link</a></div>
+<div id='pass3' aria-hidden="true"><button tabindex="-1">Some button</button></div>
+<input id='pass4' disabled aria-hidden="true" />
+<div id='pass5' aria-hidden="true">
+	<div aria-hidden="false">
+		<button tabindex="-1">Some button</button>
+	</div>
+</div>
+
+<!-- Fail -->
+<div id='violation1' aria-hidden="true">
+	<a href="/" style="position:absolute; top:-999em">Link</a>
+</div>
+<div id='violation2' aria-hidden="true">
+	<input aria-disabled="true" />
+</div>
+<p id='violation3' tabindex="0" aria-hidden="true">Some text</p>
+<details id='violation4' aria-hidden="true">
+	<summary>Some button</summary>
+	<p>Some details</p>
+</details>

test/integration/rules/aria-hidden-focus/aria-hidden-focus.json

@@ -0,0 +1,35 @@
+{
+  "description": "aria-hidden-focus tests",
+  "rule": "aria-hidden-focus",
+  "violations": [
+    [
+      "#violation1"
+    ],
+    [
+      "#violation2"
+    ],
+    [
+      "#violation3"
+    ],
+    [
+      "#violation4"
+    ]
+  ],
+  "passes": [
+    [
+      "#pass1"
+    ],
+    [
+      "#pass2"
+    ],
+    [
+      "#pass3"
+    ],
+    [
+      "#pass4"
+    ],
+    [
+      "#pass5"
+    ]
+  ]
+}