feat(rule): add additional elements to check for incomplete with required children (#1547)

Author: scurker

lib/checks/aria/required-children.js

@@ -39,20 +39,23 @@ function ariaOwns(nodes, role) {
 }
 
 function missingRequiredChildren(node, childRoles, all, role) {
-	var i,
-		l = childRoles.length,
+	var index,
+		length = childRoles.length,
 		missing = [],
 		ownedElements = idrefs(node, 'aria-owns');
 
-	for (i = 0; i < l; i++) {
-		var r = childRoles[i];
-		if (owns(node, virtualNode, r) || ariaOwns(ownedElements, r)) {
+	for (index = 0; index < length; index++) {
+		var childRole = childRoles[index];
+		if (
+			owns(node, virtualNode, childRole) ||
+			ariaOwns(ownedElements, childRole)
+		) {
 			if (!all) {
 				return null;
 			}
 		} else {
 			if (all) {
-				missing.push(r);
+				missing.push(childRole);
 			}
 		}
 	}
@@ -109,7 +112,12 @@ if (!missing) {
 
 this.data(missing);
 
-if (reviewEmpty.includes(role)) {
+// Only review empty nodes when a node is both empty and does not have an aria-owns relationship
+if (
+	reviewEmpty.includes(role) &&
+	node.children.length === 0 &&
+	idrefs(node, 'aria-owns').length === 0
+) {
 	return undefined;
 } else {
 	return false;

lib/checks/aria/required-children.json

@@ -2,7 +2,18 @@
 	"id": "aria-required-children",
 	"evaluate": "required-children.js",
 	"options": {
-		"reviewEmpty": ["listbox"]
+		"reviewEmpty": [
+			"doc-bibliography",
+			"doc-endnotes",
+			"grid",
+			"list",
+			"listbox",
+			"table",
+			"tablist",
+			"tree",
+			"treegrid",
+			"rowgroup"
+		]
 	},
 	"metadata": {
 		"impact": "critical",

lib/commons/aria/index.js

@@ -624,7 +624,9 @@ lookupTable.role = {
 		attributes: {
 			allowed: ['aria-expanded', 'aria-errormessage']
 		},
-		owned: null,
+		owned: {
+			one: ['doc-biblioentry']
+		},
 		nameFrom: ['author'],
 		context: null,
 		unsupported: false,
@@ -746,7 +748,9 @@ lookupTable.role = {
 		attributes: {
 			allowed: ['aria-expanded', 'aria-errormessage']
 		},
-		owned: ['doc-endnote'],
+		owned: {
+			one: ['doc-endnote']
+		},
 		namefrom: ['author'],
 		context: null,
 		unsupported: false,
@@ -1280,7 +1284,9 @@ lookupTable.role = {
 				'aria-errormessage'
 			]
 		},
-		owned: null,
+		owned: {
+			one: ['menuitem', 'menuitemradio', 'menuitemcheckbox']
+		},
 		nameFrom: ['author'],
 		context: null,
 		unsupported: false,

test/checks/aria/required-children.js

@@ -103,6 +103,35 @@ describe('aria-required-children', function() {
 		);
 	});
 
+	it('should return undefined when element is empty and is in reviewEmpty options', function() {
+		var params = checkSetup('<div role="list" id="target"></div>', {
+			reviewEmpty: ['list']
+		});
+		assert.isUndefined(
+			checks['aria-required-children'].evaluate.apply(checkContext, params)
+		);
+	});
+
+	it('should return false when children do not have correct role and is in reviewEmpty options', function() {
+		var params = checkSetup(
+			'<div role="list" id="target"><div role="menuitem"></div></div>',
+			{ reviewEmpty: ['list'] }
+		);
+		assert.isFalse(
+			checks['aria-required-children'].evaluate.apply(checkContext, params)
+		);
+	});
+
+	it('should return false when owned children do not have correct role and is in reviewEmpty options', function() {
+		var params = checkSetup(
+			'<div role="list" id="target" aria-owns="ownedchild"></div><div id="ownedchild" role="menuitem"></div>',
+			{ reviewEmpty: ['list'] }
+		);
+		assert.isFalse(
+			checks['aria-required-children'].evaluate.apply(checkContext, params)
+		);
+	});
+
 	(shadowSupported ? it : xit)(
 		'should pass all existing required children in shadow tree when all required',
 		function() {

test/integration/rules/aria-required-children/aria-required-children.html

@@ -1,10 +1,21 @@
 <div role="list" id="pass1"><div role="listitem" id="pass2">Item 1</div></div>
 <div role="list" id="pass3" aria-owns="pass4"></div>
 <div role="listitem" id="pass4"></div>
-<div role="list" id="fail1"></div>
-<div role="list" id="fail2"><div role="menuitem" id="pass5"></div></div>
-<div role="list" id="fail3" aria-owns="pass6"></div>
+<div role="list" id="fail1"><div role="menuitem" id="pass5"></div></div>
+<div role="list" id="fail2" aria-owns="pass6"></div>
+<div role="menu" id="fail3"></div>
+<div role="menubar" id="fail4"></div>
+<div role="row" id="fail5"></div>
 <div role="menuitem" id="pass6"></div>
 <div role="list" id="pass7" aria-owns="parent"></div>
 <div id="parent"><div role="listitem" id="pass8"></div></div>
-<div role="listbox" id="incomplete1"></div>
+<div role="grid" id="incomplete1"></div>
+<div role="list" id="incomplete2"></div>
+<div role="listbox" id="incomplete3"></div>
+<div role="table" id="incomplete4"></div>
+<div role="tablist" id="incomplete5"></div>
+<div role="tree" id="incomplete6"></div>
+<div role="treegrid" id="incomplete7"></div>
+<div role="rowgroup" id="incomplete8"></div>
+<div role="doc-bibliography" id="incomplete9"></div>
+<div role="doc-endnotes" id="incomplete10"></div>

test/integration/rules/aria-required-children/aria-required-children.json

@@ -1,7 +1,7 @@
 {
 	"description": "aria-required-children test",
 	"rule": "aria-required-children",
-	"violations": [["#fail1"], ["#fail2"], ["#fail3"]],
+	"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
 	"passes": [
 		["#pass1"],
 		["#pass2"],
@@ -12,5 +12,16 @@
 		["#pass7"],
 		["#pass8"]
 	],
-	"incomplete": [["#incomplete1"]]
+	"incomplete": [
+		["#incomplete1"],
+		["#incomplete2"],
+		["#incomplete3"],
+		["#incomplete4"],
+		["#incomplete5"],
+		["#incomplete6"],
+		["#incomplete7"],
+		["#incomplete8"],
+		["#incomplete9"],
+		["#incomplete10"]
+	]
 }