feat: allow options in aria-allowed-attr, aria-required-attr (#673)

* chore: rename lut in tests

* feat: allow options in aria-allowed-attr

* chore: rename options integ. tests for clarity

* feat: add required-attr options, integration tests

* chore: PR feedback for aria-allowed-attr

* feat: use object for ARIA check options

e.g. {separator: ['aria-valuenow', 'aria-valuemin', aria-valuemax']}

* chore: remove duplicate to-array util

The exact same code existed in axe.utils and axe.commons (as axe.utils.toArray)

* chore: simplify ARIA options usage

lib/checks/aria/allowed-attr.js

@@ -1,3 +1,5 @@
+options = options || {};
+
 var invalid = [];
 
 var attr, attrName, allowed,
@@ -7,12 +9,18 @@ var attr, attrName, allowed,
 if (!role) {
 	role = axe.commons.aria.implicitRole(node);
 }
+
 allowed = axe.commons.aria.allowedAttr(role);
+
+if (Array.isArray(options[role])) {
+  allowed = axe.utils.uniqueArray(options[role].concat(allowed));
+}
+
 if (role && allowed) {
 	for (var i = 0, l = attrs.length; i < l; i++) {
 		attr = attrs[i];
 		attrName = attr.name;
-		if (axe.commons.aria.validateAttr(attrName) && allowed.indexOf(attrName) === -1) {
+		if (axe.commons.aria.validateAttr(attrName) && !allowed.includes(attrName)) {
 			invalid.push(attrName + '="' + attr.nodeValue + '"');
 		}
 	}

lib/checks/aria/required-attr.js

@@ -1,10 +1,15 @@
+options = options || {};
+
 var missing = [];
 
 if (node.hasAttributes()) {
 	var attr,
 		role = node.getAttribute('role'),
 		required = axe.commons.aria.requiredAttr(role);
 
+	if (Array.isArray(options[role])) {
+	  required = axe.utils.uniqueArray(options[role], required);
+	}
 	if (role && required) {
 		for (var i = 0, l = required.length; i < l; i++) {
 			attr = required[i];

lib/core/utils/to-array.js

@@ -7,4 +7,17 @@
 axe.utils.toArray = function (thing) {
 	'use strict';
 	return Array.prototype.slice.call(thing);
-};
+};
+
+
+/**
+ * Creates an array without duplicate values from 2 array inputs
+ * @param  {Array} arr1 First array
+ * @param  {Array} arr2 Second array
+ * @return {Array}
+ */
+axe.utils.uniqueArray = (arr1, arr2) => {
+  return arr1.concat(arr2).filter((elem, pos, arr) => {
+    return arr.indexOf(elem) === pos;
+  });
+};

test/checks/aria/allowed-attr.js

@@ -119,4 +119,51 @@ describe('aria-allowed-attr', function () {
 		assert.isNull(checkContext._data);
 	});
 
+	describe('options', function () {
+		it('should allow provided attribute names for a role', function () {
+			axe.commons.aria.lookupTable.role.mcheddarton = {
+				type: 'widget',
+				attributes: {
+					allowed: ['aria-checked']
+				},
+				owned: null,
+				nameFrom: ['author'],
+				context: null
+			};
+			fixture.innerHTML = '<div role="mccheddarton" id="target" aria-checked="true" aria-snuggles="true"></div>';
+			var target = fixture.children[0];
+			assert.isTrue(checks['aria-allowed-attr'].evaluate.call(checkContext, target, {'mccheddarton': ['aria-checked', 'aria-snuggles']}));
+			delete axe.commons.aria.lookupTable.role.mccheddarton;
+		});
+
+		it('should handle multiple roles provided in options', function () {
+			axe.commons.aria.lookupTable.role.mcheddarton = {
+				type: 'widget',
+				attributes: {
+					allowed: ['aria-checked']
+				},
+				owned: null,
+				nameFrom: ['author'],
+				context: null
+			};
+			axe.commons.aria.lookupTable.role.bagley = {
+				type: 'widget',
+				attributes: {
+					allowed: ['aria-checked']
+				},
+				owned: null,
+				nameFrom: ['author'],
+				context: null
+			};
+			fixture.innerHTML = '<div role="bagley" id="target" aria-snuggles2="true"></div>';
+			var target = fixture.children[0];
+			var options = {
+				'mccheddarton': ['aria-snuggles'],
+				'bagley': ['aria-snuggles2']
+			};
+			assert.isTrue(checks['aria-allowed-attr'].evaluate.call(checkContext, target, options));
+			delete axe.commons.aria.lookupTable.role.mccheddarton;
+			delete axe.commons.aria.lookupTable.role.bagley;
+		});
+	});
 });

test/checks/aria/required-attr.js

@@ -57,4 +57,25 @@ describe('aria-required-attr', function () {
 		axe.commons.aria.requiredAttr = orig;
 	});
 
+	describe('options', function () {
+		it('should require provided attribute names for a role', function () {
+			axe.commons.aria.lookupTable.role.mccheddarton = {
+				type: 'widget',
+				attributes: {
+					required: ['aria-valuemax']
+				},
+				owned: null,
+				nameFrom: ['author'],
+				context: null
+			};
+			fixture.innerHTML = '<div role="mccheddarton" id="target"></div>';
+			var target = fixture.children[0];
+			var options = {
+				'mccheddarton': ['aria-snuggles']
+			};
+			assert.isFalse(checks['aria-required-attr'].evaluate.call(checkContext, target, options));
+			assert.deepEqual(checkContext._data, ['aria-snuggles', 'aria-valuemax']);
+			delete axe.commons.aria.lookupTable.role.mccheddarton;
+		});
+	});
 });

test/commons/aria/roles.js

@@ -12,7 +12,7 @@ describe('aria.isValidRole', function () {
 
 	});
 
-	it('should return false if role is not found in the lut', function () {
+	it('should return false if role is not found in the lookup table', function () {
 		assert.isFalse(axe.commons.aria.isValidRole('cats'));
 
 	});
@@ -57,7 +57,7 @@ describe('aria.getRolesByType', function () {
 
 	});
 
-	it('should return empty array if role is not found in the lut', function () {
+	it('should return empty array if role is not found in the lookup table', function () {
 		assert.deepEqual(axe.commons.aria.getRolesByType('blahblahblah'), []);
 	});
 });
@@ -77,7 +77,7 @@ describe('aria.getRoleType', function () {
 
 	});
 
-	it('should return null if role is not found in the lut', function () {
+	it('should return null if role is not found in the lookup table', function () {
 		assert.isNull(axe.commons.aria.getRoleType('cats'));
 	});
 });

test/core/utils/to-array.js

@@ -1,6 +1,5 @@
 describe('axe.utils.toArray', function () {
 	'use strict';
-
 	it('should call Array.prototype.slice', function () {
 		var orig = Array.prototype.slice,
 			called = false,
@@ -24,4 +23,18 @@ describe('axe.utils.toArray', function () {
 		var result = axe.utils.toArray(arrayLike);
 		assert.isArray(result);
 	});
+
+});
+
+describe('axe.utils.uniqueArray', function () {
+	'use strict';
+
+	it('should filter duplicate values', function () {
+		var array1 = [1, 2, 3, 4, 5];
+		var array2 = [1, 3, 7];
+
+		var result = axe.utils.uniqueArray(array1, array2);
+		assert.isArray(result);
+		assert.includeMembers(result, [1, 2, 3, 4, 5, 7]);
+	});
 });

test/integration/full/configure-options/configure-options.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en" id="main">
+<head>
+	<title></title>
+	<meta charset="utf8">
+	<link rel="stylesheet" type="text/css" href="/node_modules/mocha/mocha.css" />
+	<script src="/node_modules/mocha/mocha.js"></script>
+	<script src="/node_modules/chai/chai.js"></script>
+	<script src="/axe.js"></script>
+	<script>
+		mocha.setup({
+			timeout: 50000,
+			ui: 'bdd'
+		});
+		var assert = chai.assert;
+	</script>
+</head>
+<body>
+	<div id="target"></div>
+
+	<div id="mocha"></div>
+	<script src="configure-options.js"></script>
+	<script src="/test/integration/adapter.js"></script>
+</body>
+</html>

test/integration/full/configure-options/configure-options.js

@@ -0,0 +1,50 @@
+describe('Check Configure Options', function() {
+	'use strict';
+
+	var target = document.querySelector('#target');
+
+	describe('aria-allowed-attr', function() {
+		it('should allow an attribute supplied in options', function(done) {
+			target.setAttribute('role', 'separator');
+			target.setAttribute('aria-valuenow', '0');
+
+			axe.configure({
+				checks: [{
+					id: 'aria-allowed-attr',
+					options: {'separator': ['aria-valuenow']}
+				}]
+			});
+			axe.run(target, {
+				runOnly: {
+			    type: 'rule',
+			    values: [ 'aria-allowed-attr' ]
+			  }
+			}, function(error, results) {
+				assert.lengthOf(results.violations, 0, 'violations');
+				done();
+			});
+		});
+	});
+
+	describe('aria-required-attr', function() {
+		it('should report unique attributes when supplied from options', function(done) {
+			target.setAttribute('role', 'slider');
+			axe.configure({
+				checks: [{
+					id: 'aria-required-attr',
+					options: {slider: ['aria-snuggles']}
+				}]
+			});
+			axe.run('#target',  {
+				runOnly: {
+			    type: 'rule',
+			    values: [ 'aria-required-attr' ]
+			  }
+			}, function(error, results) {
+				assert.lengthOf(results.violations, 1, 'violations');
+				assert.sameMembers(results.violations[0].nodes[0].any[0].data, ['aria-valuemax', 'aria-valuemin', 'aria-snuggles']);
+				done();
+			});
+		});
+	});
+});

test/integration/full/options/options.html → test/integration/full/options-parameter/options-parameter.html

@@ -38,7 +38,7 @@
 	</div>
 
 	<div id="mocha"></div>
-	<script src="options.js"></script>
+	<script src="options-parameter.js"></script>
 	<script src="/test/integration/adapter.js"></script>
 </body>
 </html>

test/integration/full/options/options.js → test/integration/full/options-parameter/options-parameter.js

@@ -1,4 +1,4 @@
-describe('Options', function() {
+describe('Options parameter', function() {
 	'use strict';
 
 	before(function (done) {