fix(region-rule): allow live regions with explicit roles (#1999)

lib/checks/navigation/region.js

@@ -12,14 +12,15 @@ function isRegion(virtualNode) {
 	const explicitRole = axe.commons.aria.getRole(node, { noImplicit: true });
 	const ariaLive = (node.getAttribute('aria-live') || '').toLowerCase().trim();
 
-	if (explicitRole) {
-		return explicitRole === 'dialog' || landmarkRoles.includes(explicitRole);
-	}
 	// Ignore content inside of aria-live
 	if (['assertive', 'polite'].includes(ariaLive)) {
 		return true;
 	}
 
+	if (explicitRole) {
+		return explicitRole === 'dialog' || landmarkRoles.includes(explicitRole);
+	}
+
 	// Check if the node matches any of the CSS selectors of implicit landmarks
 	return implicitLandmarks.some(implicitSelector => {
 		let matches = axe.utils.matchesSelector(node, implicitSelector);

test/checks/navigation/region.js

@@ -241,6 +241,20 @@ describe('region', function() {
 		assert.isFalse(checks.region.evaluate.apply(checkContext, checkArgs));
 	});
 
+	it('allows content in aria-live=assertive with explicit role set', function() {
+		var checkArgs = checkSetup(
+			'<div aria-live="assertive" role="alert" id="target"><p>This is random content.</p></div>'
+		);
+		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
+	});
+
+	it('allows content in aria-live=polite with explicit role set', function() {
+		var checkArgs = checkSetup(
+			'<div aria-live="polite" role="status" id="target"><p>This is random content.</p></div>'
+		);
+		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
+	});
+
 	it('treats role=dialog elements as regions', function() {
 		var checkArgs = checkSetup(
 			'<div role="dialog" id="target"><p>This is random content.</p></div>'