fix: ignore empty, whitespace or undefined role for rule `ari… (#2077)

lib/rules/aria-roles.json

@@ -1,6 +1,7 @@
 {
 	"id": "aria-roles",
 	"selector": "[role]",
+	"matches": "no-empty-role-matches.js",
 	"tags": ["cat.aria", "wcag2a", "wcag412"],
 	"metadata": {
 		"description": "Ensures all elements with a role attribute use a valid value",

lib/rules/no-empty-role-matches.js

@@ -0,0 +1,9 @@
+if (!virtualNode.hasAttr('role')) {
+	return false;
+}
+
+if (!virtualNode.attr('role').trim()) {
+	return false;
+}
+
+return true;

test/integration/rules/aria-roles/aria-roles.html

@@ -129,3 +129,9 @@
 	<!-- fallback roles -->
 	<div role="button alert" id="fail15">fail</div>
 </div>
+
+<!-- inapplicable  -->
+<div id="inapplicable1">no role attribute</div>
+<div id="inapplicable2" role>role not defined</div>
+<div id="inapplicable3" role="">empty role</div>
+<div id="inapplicable4" role=" ">role has only whitespace</div>

test/rule-matches/no-empty-role-matches.js

@@ -0,0 +1,63 @@
+describe('no-role-empty-matches', function() {
+	'use strict';
+
+	var fixture = document.getElementById('fixture');
+	var queryFixture = axe.testUtils.queryFixture;
+	var rule;
+
+	beforeEach(function() {
+		rule = axe._audit.rules.find(function(rule) {
+			return rule.id === 'aria-roles';
+		});
+	});
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+	});
+
+	it('returns false when element does not have `role` attribute', function() {
+		var vNode = queryFixture('<div id="target">Some Content</div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when element has role attribute has no value', function() {
+		var vNode = queryFixture('<div role id="target">Some Content</div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when element has empty role attribute', function() {
+		var vNode = queryFixture('<div role="" id="target">Some Content</div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns false when element has role attribute consisting of only whitespace', function() {
+		var vNode = queryFixture('<div role=" " id="target">Some Content</div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isFalse(actual);
+	});
+
+	it('returns true when element has role attribute', function() {
+		var vNode = queryFixture(
+			'<div role="button" id="target">Some Content</div>'
+		);
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when element has multiple roles', function() {
+		var vNode = queryFixture(
+			'<div role="button link" id="target">Some Content</div>'
+		);
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isTrue(actual);
+	});
+
+	it('returns true when element has invalid role', function() {
+		var vNode = queryFixture('<div role="xyz" id="target">Some Content</div>');
+		var actual = rule.matches(vNode.actualNode, vNode);
+		assert.isTrue(actual);
+	});
+});