fix(region): allow content in roles with implicit aria-live (#2002)

lib/checks/navigation/region.js

@@ -1,5 +1,6 @@
 const { dom, aria } = axe.commons;
 const landmarkRoles = aria.getRolesByType('landmark');
+const implicitAriaLiveRoles = ['alert', 'log', 'status'];
 
 // Create a list of nodeNames that have a landmark as an implicit role
 const implicitLandmarks = landmarkRoles
@@ -13,7 +14,10 @@ function isRegion(virtualNode) {
 	const ariaLive = (node.getAttribute('aria-live') || '').toLowerCase().trim();
 
 	// Ignore content inside of aria-live
-	if (['assertive', 'polite'].includes(ariaLive)) {
+	if (
+		['assertive', 'polite'].includes(ariaLive) ||
+		implicitAriaLiveRoles.includes(explicitRole)
+	) {
 		return true;
 	}
 

test/checks/navigation/region.js

@@ -255,6 +255,27 @@ describe('region', function() {
 		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
 	});
 
+	it('allows content in implicit aria-live role alert', function() {
+		var checkArgs = checkSetup(
+			'<div role="alert" id="target"><p>This is random content.</p></div>'
+		);
+		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
+	});
+
+	it('allows content in implicit aria-live role log', function() {
+		var checkArgs = checkSetup(
+			'<div role="log" id="target"><p>This is random content.</p></div>'
+		);
+		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
+	});
+
+	it('allows content in implicit aria-live role status', function() {
+		var checkArgs = checkSetup(
+			'<div 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>'