fix(aria-allowed-role): allow role combobox on input tel, search, url…

…, and email (#1850)
dequelabs · Dec 11, 2019 · 75d3c8b · 75d3c8b
1 parent 02a1d8a
commit 75d3c8b
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 10 deletions.
diff --git a/lib/commons/aria/index.js b/lib/commons/aria/index.js
@@ -442,7 +442,7 @@ lookupTable.role = {
 			{
 				nodeName: 'input',
 				properties: {
-					type: 'text'
+					type: ['text', 'search', 'tel', 'url', 'email']
 				}
 			}
 		]
@@ -2146,15 +2146,6 @@ lookupTable.elementsAllowedNoRole = [
 			]
 		}
 	},
-	{
-		nodeName: 'input',
-		attributes: {
-			list: isNull
-		},
-		properties: {
-			type: ['email', 'search', 'tel', 'url']
-		}
-	},
 	{
 		nodeName: 'link',
 		attributes: {
@@ -2342,6 +2333,11 @@ lookupTable.evaluateRoleForElement = {
 				return (
 					role === 'combobox' || role === 'searchbox' || role === 'spinbutton'
 				);
+			case 'tel':
+			case 'url':
+			case 'search':
+			case 'email':
+				return role === 'combobox';
 			default:
 				return false;
 		}

diff --git a/test/checks/aria/aria-allowed-role.js b/test/checks/aria/aria-allowed-role.js
@@ -164,6 +164,46 @@ describe('aria-allowed-role', function() {
 		);
 	});
 
+	it('returns true when INPUT type is tel with role combobox', function() {
+		var node = document.createElement('input');
+		node.setAttribute('type', 'tel');
+		node.setAttribute('role', 'combobox');
+		fixture.appendChild(node);
+		assert.isTrue(
+			checks['aria-allowed-role'].evaluate.call(checkContext, node)
+		);
+	});
+
+	it('returns true when INPUT type is url with role combobox', function() {
+		var node = document.createElement('input');
+		node.setAttribute('type', 'url');
+		node.setAttribute('role', 'combobox');
+		fixture.appendChild(node);
+		assert.isTrue(
+			checks['aria-allowed-role'].evaluate.call(checkContext, node)
+		);
+	});
+
+	it('returns true when INPUT type is search with role combobox', function() {
+		var node = document.createElement('input');
+		node.setAttribute('type', 'search');
+		node.setAttribute('role', 'combobox');
+		fixture.appendChild(node);
+		assert.isTrue(
+			checks['aria-allowed-role'].evaluate.call(checkContext, node)
+		);
+	});
+
+	it('returns true when INPUT type is email with role combobox', function() {
+		var node = document.createElement('input');
+		node.setAttribute('type', 'email');
+		node.setAttribute('role', 'combobox');
+		fixture.appendChild(node);
+		assert.isTrue(
+			checks['aria-allowed-role'].evaluate.call(checkContext, node)
+		);
+	});
+
 	it('returns true when INPUT type is text with role spinbutton', function() {
 		var node = document.createElement('input');
 		node.setAttribute('type', 'text');

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.html b/test/integration/rules/aria-allowed-role/aria-allowed-role.html
@@ -62,6 +62,42 @@ <h1 id="pass-h1-role-doc-subtitle" role="doc-subtitle"></h1>
 	aria-expanded="true"
 	id="pass-input-text-role-combobox"
 />
+<input
+	aria-autocomplete="list"
+	aria-label="some label"
+	autocomplete="off"
+	role="combobox"
+	type="search"
+	aria-expanded="true"
+	id="pass-input-search-role-combobox"
+/>
+<input
+	aria-autocomplete="list"
+	aria-label="some label"
+	autocomplete="off"
+	role="combobox"
+	type="tel"
+	aria-expanded="true"
+	id="pass-input-tel-role-combobox"
+/>
+<input
+	aria-autocomplete="list"
+	aria-label="some label"
+	autocomplete="off"
+	role="combobox"
+	type="url"
+	aria-expanded="true"
+	id="pass-input-url-role-combobox"
+/>
+<input
+	aria-autocomplete="list"
+	aria-label="some label"
+	autocomplete="off"
+	role="combobox"
+	type="email"
+	aria-expanded="true"
+	id="pass-input-email-role-combobox"
+/>
 <input
 	aria-autocomplete="list"
 	aria-label="some label"

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.json b/test/integration/rules/aria-allowed-role/aria-allowed-role.json
@@ -36,6 +36,10 @@
 		["#pass-input-multiple-valid-and-invalid-roles"],
 		["#pass-input-text-role-searchbox"],
 		["#pass-input-text-role-combobox"],
+		["#pass-input-search-role-combobox"],
+		["#pass-input-tel-role-combobox"],
+		["#pass-input-url-role-combobox"],
+		["#pass-input-email-role-combobox"],
 		["#pass-input-text-role-spinbutton"],
 		["#pass-input-image-valid-role"],
 		["#pass-input-checkbox-valid-role"],