fix: flag hidden elms with disallowed role(s) for review (#1225)

Author: jeeyyy

lib/checks/aria/aria-allowed-role.js

@@ -3,6 +3,7 @@
  * https://www.w3.org/TR/html-aria/#docconformance
  * https://www.w3.org/TR/SVG2/struct.html#implicit-aria-semantics
  */
+const { dom } = axe.commons;
 const { allowImplicit = true, ignoredTags = [] } = options || {};
 const tagName = node.nodeName.toUpperCase();
 
@@ -18,6 +19,10 @@ const unallowedRoles = axe.commons.aria.getElementUnallowedRoles(
 
 if (unallowedRoles.length) {
 	this.data(unallowedRoles);
+	if (!dom.isVisible(node, true)) {
+		// flag hidden elements for review
+		return undefined;
+	}
 	return false;
 }
 return true;

lib/checks/aria/aria-allowed-role.json

@@ -9,7 +9,8 @@
 		"impact": "minor",
 		"messages": {
 			"pass": "ARIA role is allowed for given element",
-			"fail": "role{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} {{=it.data && it.data.length > 1 ? 'are' : ' is'}} not allowed for given element"
+      "fail": "ARIA role{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} {{=it.data && it.data.length > 1 ? 'are' : ' is'}} not allowed for given element",
+      "incomplete": "ARIA role{{=it.data && it.data.length > 1 ? 's' : ''}} {{=it.data.join(', ')}} must be removed when the element is made visible, as {{=it.data && it.data.length > 1 ? 'they are' : 'it is'}} not allowed for the element"
 		}
 	}
-}
+}

test/checks/aria/aria-allowed-role.js

@@ -12,6 +12,7 @@ describe('aria-allowed-role', function() {
 	it('returns true if given element is an ignoredTag in options', function() {
 		var node = document.createElement('article');
 		node.setAttribute('role', 'presentation');
+		fixture.appendChild(node);
 		var options = {
 			ignoredTags: ['article']
 		};
@@ -26,16 +27,15 @@ describe('aria-allowed-role', function() {
 	});
 
 	it('returns false with implicit role of row for TR when allowImplicit is set to false via options', function() {
-		var node = document.createElement('table');
-		node.setAttribute('role', 'grid');
-		var row = document.createElement('tr');
-		row.setAttribute('role', 'row');
+		fixture.innerHTML =
+			'<table role="grid"><tr id="target" role="row"></tr></table>';
+		var target = fixture.querySelector('#target');
 		var options = {
 			allowImplicit: false
 		};
 		var actual = checks['aria-allowed-role'].evaluate.call(
 			checkContext,
-			row,
+			target,
 			options
 		);
 		var expected = false;
@@ -51,6 +51,32 @@ describe('aria-allowed-role', function() {
 		);
 	});
 
+	it('returns undefined (needs review) when element is hidden and has unallowed role', function() {
+		fixture.innerHTML =
+			'<button id="target" type="button" aria-hidden="true"' +
+			'role="presentation"></button>';
+		var target = fixture.querySelector('#target');
+		var actual = checks['aria-allowed-role'].evaluate.call(
+			checkContext,
+			target
+		);
+		assert.isUndefined(actual);
+	});
+
+	it('returns undefined (needs review) when element is with in hidden parent and has unallowed role', function() {
+		fixture.innerHTML =
+			'<div style="display:none">' +
+			'<button id="target" class="mm-tabstart" type="button"' +
+			'role="presentation"></button>' +
+			'</div>';
+		var target = fixture.querySelector('#target');
+		var actual = checks['aria-allowed-role'].evaluate.call(
+			checkContext,
+			target
+		);
+		assert.isUndefined(actual);
+	});
+
 	it('returns true when BUTTON has type menu and role as menuitem', function() {
 		var node = document.createElement('button');
 		node.setAttribute('type', 'menu');

test/integration/rules/aria-allowed-role/aria-allowed-role.html

@@ -55,3 +55,8 @@ <h1 id='pass-h1-valid-role' role='none'></h1>
 <aside id="fail-aside-role-tab" role='tab'></aside>
 <button id='fail-button-role-gridcell' role="gridcell" title="IconCheckmark" aria-label="IconCheckmark icon"></button>
 <input id='fail-input-role-gridcell-multiple-role' role="gridcell combobox">
+<div style="display:none">
+  <button id="incomplete1" class="mm-tabstart" type="button" role="presentation"></button>
+</div>
+<button id="incomplete2" type="button" aria-hidden="true" role="presentation"></button>
+

test/integration/rules/aria-allowed-role/aria-allowed-role.json

@@ -12,7 +12,7 @@
 		["#pass-li-role-doc-biblioentry"],
 		["#pass-aside-doc-example"],
 		["#pass-div-valid-role"],
-		["#pass-ol-valid-role"], 
+		["#pass-ol-valid-role"],
 		["#pass-nav-role-doc-index"],
 		["#pass-h1-role-doc-subtitle"],
 		["#pass-video-valid-role"],
@@ -26,7 +26,7 @@
 		["#pass-section-valid-role-application"],
 		["#pass-section-valid-role-content-info"],
 		["#pass-section-valid-role-dialog"],
-		["#pass-button-valid-role-checkbox"],	
+		["#pass-button-valid-role-checkbox"],
 		["#pass-header-valid-role"],
 		["#pass-footer-valid-role"],
 		["#pass-embed-valid-role"],
@@ -51,7 +51,7 @@
 		["#fail-dd-no-role"],
 		["#fail-dt-no-role"],
 		["#fail-label-no-role"],
-		["#fail-ol-invalid-role"], 
+		["#fail-ol-invalid-role"],
 		["#fail-a-invalid-role"],
 		["#fail-section-invalid-role"],
 		["#fail-embed-invalid-role"],
@@ -61,5 +61,9 @@
 		["#fail-aside-role-tab"],
 		["#fail-button-role-gridcell"],
 		["#fail-input-role-gridcell-multiple-role"]
-	]
-}
+  ],
+  "incomplete": [
+    ["#incomplete1"],
+    ["#incomplete2"]
+  ]
+}