fix(bypass): find headings in iframes (#2310)

* fix(bypass): find headings in iframes * name tests * fix test * test * ci fail * i think i found the issue * put back pageLevel * fix test * Remove leading "./" from axe-linter excludes * Revert "Remove leading "./" from axe-linter excludes" This reverts commit be62002. Co-authored-by: Stephen Mathieson <me@stephenmathieson.com>
dequelabs · Jul 1, 2020 · 7c23dbd · 7c23dbd
1 parent e7cbc2e
commit 7c23dbd
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 1 deletion.
diff --git a/lib/checks/navigation/header-present.json b/lib/checks/navigation/header-present.json
@@ -1,6 +1,7 @@
 {
 	"id": "header-present",
 	"evaluate": "has-descendant-evaluate",
+	"after": "has-descendant-after",
 	"options": {
 		"selector": "h1:not([role]), h2:not([role]), h3:not([role]), h4:not([role]), h5:not([role]), h6:not([role]), [role=heading]"
 	},

diff --git a/lib/rules/bypass-matches.js b/lib/rules/bypass-matches.js
@@ -1,5 +1,14 @@
+import windowIsTopMatches from './window-is-top-matches';
+
 function bypassMatches(node) {
-	return !!node.querySelector('a[href]');
+	// the top level window should have an anchor
+	if (windowIsTopMatches(node)) {
+		return !!node.querySelector('a[href]');
+	}
+
+	// all iframes do not need an anchor but should be checked for bypass
+	// elements (headings, landmarks, etc.)
+	return true;
 }
 
 export default bypassMatches;
diff --git a/test/integration/full/bypass/frames/level1-fail.html b/test/integration/full/bypass/frames/level1-fail.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" id="violation2">
+	<head>
+		<meta charset="utf8" />
+		<script src="/axe.js"></script>
+	</head>
+	<body>
+		<p>No h1 here either</p>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/frames/level1.html b/test/integration/full/bypass/frames/level1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" id="pass2">
+	<head>
+		<meta charset="utf8" />
+		<script src="/axe.js"></script>
+	</head>
+	<body>
+		<p>No h1 here either</p>
+		<iframe id="frame2" src="level2-a.html"></iframe>
+		<iframe id="frame3" src="level2.html"></iframe>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/frames/level2-a.html b/test/integration/full/bypass/frames/level2-a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" id="pass3">
+	<head>
+		<meta charset="utf8" />
+		<script src="/axe.js"></script>
+	</head>
+	<body>
+		<h1>This page has an h1</h1>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/frames/level2.html b/test/integration/full/bypass/frames/level2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" id="pass4">
+	<head>
+		<meta charset="utf8" />
+		<script src="/axe.js"></script>
+	</head>
+	<body>
+		<p>No h1 content in this iframe</p>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/header-iframe-fail.html b/test/integration/full/bypass/header-iframe-fail.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" id="fail1">
+	<head>
+		<meta charset="utf8" />
+		<link
+			rel="stylesheet"
+			type="text/css"
+			href="/node_modules/mocha/mocha.css"
+		/>
+		<script src="/node_modules/mocha/mocha.js"></script>
+		<script src="/node_modules/chai/chai.js"></script>
+		<script src="/axe.js"></script>
+		<script>
+			mocha.setup({
+				timeout: 10000,
+				ui: 'bdd'
+			});
+			var assert = chai.assert;
+		</script>
+	</head>
+	<body>
+		<p>No h1 content</p>
+		<iframe id="frame1" src="frames/level1-fail.html"></iframe>
+		<a href="http://www.deque.com">stuff</a>
+		<div id="mocha"></div>
+		<script src="/test/testutils.js"></script>
+		<script src="header-iframe-fail.js"></script>
+		<script src="/test/integration/adapter.js"></script>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/header-iframe-fail.js b/test/integration/full/bypass/header-iframe-fail.js
@@ -0,0 +1,38 @@
+describe('bypass iframe test fail', function() {
+	'use strict';
+	var results;
+	before(function(done) {
+		axe.testUtils.awaitNestedLoad(function() {
+			// Stop messing with my tests Mocha!
+			var heading = document.querySelector('#mocha h1');
+			if (heading) {
+				heading.outerHTML = '<div><b>bypass iframe test fail</b></div>';
+			}
+
+			axe.run({ runOnly: { type: 'rule', values: ['bypass'] } }, function(
+				err,
+				r
+			) {
+				assert.isNull(err);
+				results = r;
+				done();
+			});
+		});
+	});
+
+	describe('violations', function() {
+		it('should find 1', function() {
+			assert.lengthOf(results.violations[0].nodes, 1);
+		});
+
+		it('should find #frame1', function() {
+			assert.deepEqual(results.violations[0].nodes[0].target, ['#fail1']);
+		});
+	});
+
+	describe('passes', function() {
+		it('should find none', function() {
+			assert.lengthOf(results.passes, 0);
+		});
+	});
+});
diff --git a/test/integration/full/bypass/header-iframe-pass.html b/test/integration/full/bypass/header-iframe-pass.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" id="pass1">
+	<head>
+		<meta charset="utf8" />
+		<link
+			rel="stylesheet"
+			type="text/css"
+			href="/node_modules/mocha/mocha.css"
+		/>
+		<script src="/node_modules/mocha/mocha.js"></script>
+		<script src="/node_modules/chai/chai.js"></script>
+		<script src="/axe.js"></script>
+		<script>
+			mocha.setup({
+				timeout: 10000,
+				ui: 'bdd'
+			});
+			var assert = chai.assert;
+		</script>
+	</head>
+	<body>
+		<p>No h1 content</p>
+		<iframe id="frame1" src="frames/level1.html"></iframe>
+		<a href="http://www.deque.com">stuff</a>
+		<div id="mocha"></div>
+		<script src="/test/testutils.js"></script>
+		<script src="header-iframe-pass.js"></script>
+		<script src="/test/integration/adapter.js"></script>
+	</body>
+</html>
diff --git a/test/integration/full/bypass/header-iframe-pass.js b/test/integration/full/bypass/header-iframe-pass.js
@@ -0,0 +1,39 @@
+describe('bypass iframe test pass', function() {
+	'use strict';
+	var results;
+	before(function(done) {
+		this.timeout = 50000;
+		axe.testUtils.awaitNestedLoad(function() {
+			// Stop messing with my tests Mocha!
+			var heading = document.querySelector('#mocha h1');
+			if (heading) {
+				heading.outerHTML = '<div><b>bypass pass test fail</b></div>';
+			}
+
+			axe.run({ runOnly: { type: 'rule', values: ['bypass'] } }, function(
+				err,
+				r
+			) {
+				assert.isNull(err);
+				results = r;
+				done();
+			});
+		});
+	});
+
+	describe('violations', function() {
+		it('should find none', function() {
+			assert.lengthOf(results.violations, 0);
+		});
+	});
+
+	describe('passes', function() {
+		it('should find 1', function() {
+			assert.lengthOf(results.passes[0].nodes, 1);
+		});
+
+		it('should find #pass1', function() {
+			assert.deepEqual(results.passes[0].nodes[0].target, ['#pass1']);
+		});
+	});
+});