fix: autocomplete-appropriate node type resolution (#1318)

`Firefox` returns `node.type` as `text` for certain scenarios like - `<input autocomplete="bday-month" type="month">`, hence using `getAttribute` to resolve the value of `type` solves for this edge case.

Due to this, the number of violations returned across different browsers were different as described in the bug below.

Closes issue:
- https://dequesrc.atlassian.net/browse/WWD-1957

## Reviewer checks

**Required fields, to be filled out by PR reviewer(s)**
- [x] Follows the commit message policy, appropriate for next version
- [x] Has documentation updated, a DU ticket, or requires no documentation change
- [x] Includes new tests, or was unnecessary
- [x] Code is reviewed for security by: << Name here >>

lib/checks/forms/autocomplete-appropriate.js

@@ -45,8 +45,23 @@ if (axe.commons.text.autocomplete.stateTerms.includes(purposeTerm)) {
 }
 
 const allowedTypes = allowedTypesMap[purposeTerm];
+
+/**
+ * Note:
+ * Inconsistent response for `node.type` across browsers, hence resolving and sanitizing using getAttribute
+ * Example:
+ * Firefox returns `node.type` as `text` for `type='month'`
+ *
+ * Reference HTML Spec - https://html.spec.whatwg.org/multipage/input.html#the-input-element to filter allowed values for `type`
+ * and sanitize (https://html.spec.whatwg.org/multipage/input.html#value-sanitization-algorithm)
+ */
+let type = node.hasAttribute('type')
+	? axe.commons.text.sanitize(node.getAttribute('type')).toLowerCase()
+	: 'text';
+type = axe.utils.validInputTypes().includes(type) ? type : 'text';
+
 if (typeof allowedTypes === 'undefined') {
-	return node.type === 'text';
+	return type === 'text';
 }
 
-return allowedTypes.includes(node.type);
+return allowedTypes.includes(type);

lib/commons/utils/valid-input-type.js

@@ -0,0 +1,38 @@
+/* global axe */
+
+/**
+ * Returns array of valid input type values
+ * @method validInputTypes
+ * @memberof axe.commons.utils
+ * @instance
+ * @return {Array<Sting>}
+ */
+axe.utils.validInputTypes = function validInputTypes() {
+	'use strict';
+
+	// Reference - https://html.spec.whatwg.org/multipage/input.html#the-input-element
+	return [
+		'hidden',
+		'text',
+		'search',
+		'tel',
+		'url',
+		'email',
+		'password',
+		'date',
+		'month',
+		'week',
+		'time',
+		'datetime-local',
+		'number',
+		'range',
+		'color',
+		'checkbox',
+		'radio',
+		'file',
+		'submit',
+		'image',
+		'reset',
+		'button'
+	];
+};

test/checks/forms/autocomplete-appropriate.js

@@ -66,9 +66,27 @@ describe('autocomplete-appropriate', function() {
 		assert.isTrue(evaluate.apply(checkContext, params));
 	});
 
+	it('returns true if the input type is foobar and the term is undefined', function() {
+		var options = {};
+		var params = autocompleteCheckParams('foo', 'foobar', options);
+		assert.isTrue(evaluate.apply(checkContext, params));
+	});
+
 	it('returns false if the input type is text and the term maps to an empty array', function() {
 		var options = { foo: [] };
 		var params = autocompleteCheckParams('foo', 'text', options);
 		assert.isFalse(evaluate.apply(checkContext, params));
 	});
+
+	it('returns false if the input type is month and term is bday-month', function() {
+		var options = {};
+		var params = autocompleteCheckParams('bday-month', 'month', options);
+		assert.isFalse(evaluate.apply(checkContext, params));
+	});
+
+	it('returns false if the input type is MONTH (case-insensitive & sanitized) and term is bday-month', function() {
+		var options = {};
+		var params = autocompleteCheckParams('bday-month', '   MONTH    ', options);
+		assert.isFalse(evaluate.apply(checkContext, params));
+	});
 });

test/integration/rules/autocomplete-valid/autocomplete-valid.html

@@ -119,4 +119,8 @@
 <input autocomplete="on" id="pass65" value="" type="url">
 <input autocomplete="off" id="pass66" value="42" type="datetime-local">
 <input autocomplete="street-address" id="pass67" type="text" />
+<input autocomplete="on" id="pass68" value="" type="url     ">
+<input autocomplete="off" id="pass69" value="42" type="   DateTime-Local">
 <input autocomplete="street-address" id="fail6" type="file" />
+<input autocomplete="bday-month" type='month' id="fail7" />
+<input type="NUMBER" autocomplete="email" id="fail8" />

test/integration/rules/autocomplete-valid/autocomplete-valid.json

@@ -7,7 +7,9 @@
 		["#fail3"],
 		["#fail4"],
 		["#fail5"],
-		["#fail6"]
+		["#fail6"],
+		["#fail7"],
+		["#fail8"]
 	],
 	"passes": [
 		["#pass1"],
@@ -76,6 +78,8 @@
 		["#pass64"],
 		["#pass65"],
 		["#pass66"],
-		["#pass67"]
+		["#pass67"],
+		["#pass68"],
+		["#pass69"]
 	]
 }