fix(region): treat iframes as regions (#2614)

dequelabs · Nov 2, 2020 · 936db81 · 936db81
1 parent 64d9b3a
commit 936db81
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/lib/checks/navigation/region.json b/lib/checks/navigation/region.json
@@ -2,7 +2,7 @@
 	"id": "region",
 	"evaluate": "region-evaluate",
 	"options": {
-		"regionMatcher": "dialog, [role=dialog], svg"
+		"regionMatcher": "dialog, [role=dialog], svg, iframe"
 	},
 	"metadata": {
 		"impact": "moderate",

diff --git a/test/checks/navigation/region.js b/test/checks/navigation/region.js
@@ -282,6 +282,14 @@ describe('region', function() {
 		assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
 	});
 
+	it('treats iframe elements as regions', function() {
+		var checkArgs = checkSetup(
+			'<iframe id="target"></iframe><div role="main">Content</div>'
+		);
+
+		assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+	});
+
 	it('returns the outermost element as the error', function() {
 		var checkArgs = checkSetup(
 			'<div id="target"><p>This is random content.</p></div><div role="main"><h1 id="mainheader" tabindex="0">Introduction</h1></div>'

diff --git a/test/integration/full/region/frames/region.html b/test/integration/full/region/frames/region.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" id="violation2">
+	<head>
+		<meta charset="utf8" />
+		<script src="/axe.js"></script>
+	</head>
+	<body>
+		<section aria-label="region">
+			<p>Region content</p>
+		</section>
+	</body>
+</html>
diff --git a/test/integration/full/region/region-pass.html b/test/integration/full/region/region-pass.html
@@ -39,7 +39,9 @@ <h1 id="hdng">Section heading</h1>
 		<section aria-label="section 2">
 			<p>Content</p>
 		</section>
+		<iframe id="region-frame" src="frames/region.html"></iframe>
 		<div id="mocha" role="complementary"></div>
+		<script src="/test/testutils.js"></script>
 		<script src="region-pass.js"></script>
 		<script src="/test/integration/adapter.js"></script>
 	</body>

diff --git a/test/integration/full/region/region-pass.js b/test/integration/full/region/region-pass.js
@@ -2,13 +2,12 @@ describe('region pass test', function() {
 	'use strict';
 	var results;
 	before(function(done) {
-		axe.run({ runOnly: { type: 'rule', values: ['region'] } }, function(
-			err,
-			r
-		) {
-			assert.isNull(err);
-			results = r;
-			done();
+		axe.testUtils.awaitNestedLoad(function() {
+			axe.run({ runOnly: ['region'] }, function(err, r) {
+				assert.isNull(err);
+				results = r;
+				done();
+			});
 		});
 	});