fix(aria-required-children): allow comboboxes with more popup roles

dequelabs · Dec 18, 2019 · 06b94c2 · 06b94c2
1 parent a2ddba3
commit 06b94c2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/lib/checks/aria/required-children.js b/lib/checks/aria/required-children.js
@@ -78,11 +78,22 @@ function missingRequiredChildren(node, childRoles, all, role) {
 			missing.splice(textboxIndex, 1);
 		}
 
-		// remove 'listbox' from missing roles if combobox is collapsed
-		var listboxIndex = missing.indexOf('listbox');
-		var expanded = node.getAttribute('aria-expanded');
-		if (listboxIndex >= 0 && (!expanded || expanded === 'false')) {
-			missing.splice(listboxIndex, 1);
+		const expandedChildRoles = ['listbox', 'tree', 'grid', 'dialog'];
+		const expandedValue = node.getAttribute('aria-expanded');
+		const expanded = expandedValue && expandedValue !== 'false';
+		const popupRole = node.getAttribute('aria-haspopup') || 'listbox';
+
+		for (const expandedChildRole of expandedChildRoles) {
+			// keep the specified popup type required if expanded
+			if (expanded && expandedChildRole === popupRole) {
+				continue;
+			}
+
+			// remove 'listbox' and company from missing roles if combobox is collapsed
+			const missingIndex = missing.indexOf(expandedChildRole);
+			if (missingIndex >= 0) {
+				missing.splice(missingIndex, 1);
+			}
 		}
 	}
 

diff --git a/lib/commons/aria/index.js b/lib/commons/aria/index.js
@@ -433,7 +433,7 @@ lookupTable.role = {
 			required: ['aria-expanded']
 		},
 		owned: {
-			all: ['listbox', 'textbox']
+			all: ['listbox', 'tree', 'grid', 'dialog', 'textbox']
 		},
 		nameFrom: ['author'],
 		context: null,

diff --git a/test/checks/aria/required-children.js b/test/checks/aria/required-children.js
@@ -206,6 +206,26 @@ describe('aria-required-children', function() {
 		);
 	});
 
+	it('should pass an expanded combobox when the required popup role matches', function() {
+		var params = checkSetup(
+			'<div role="combobox" aria-haspopup="grid" aria-expanded="true" id="target"><p role="textbox">Textbox</p><div role="grid"></div></div>'
+		);
+		assert.isTrue(
+			checks['aria-required-children'].evaluate.apply(checkContext, params)
+		);
+	});
+
+	it('should fail an expanded combobox when the required role is missing on children', function() {
+		var params = checkSetup(
+			'<div role="combobox" aria-haspopup="grid" aria-expanded="true" id="target"><p role="textbox">Textbox</p><div role="listbox"></div></div>'
+		);
+		assert.isFalse(
+			checks['aria-required-children'].evaluate.apply(checkContext, params)
+		);
+
+		assert.deepEqual(checkContext._data, ['grid']);
+	});
+
 	it('should pass one indirectly aria-owned child when one required', function() {
 		var params = checkSetup(
 			'<div role="grid" id="target" aria-owns="r"></div><div id="r"><div role="row">Nothing here.</div></div>'