fix(rule): Ignore hashbang URLs for skiplinks (#827)

dequelabs · Apr 11, 2018 · e1f0c57 · e1f0c57
1 parent 5651ecc
commit e1f0c57
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git a/lib/checks/navigation/internal-link-present.js b/lib/checks/navigation/internal-link-present.js
@@ -1,2 +1,4 @@
 const links = axe.utils.querySelectorAll(virtualNode, 'a[href]');
-return links.some(vLink => vLink.actualNode.getAttribute('href')[0] === '#');
+return links.some(vLink => {
+	return /^#[^/!]/.test(vLink.actualNode.getAttribute('href'))
+});
diff --git a/lib/rules/skip-link-matches.js b/lib/rules/skip-link-matches.js
@@ -1,2 +1 @@
-const href = node.getAttribute('href');
-return (href[0] === '#' && href.length > 1);
+return /^#[^/!]/.test(node.getAttribute('href'));
diff --git a/test/checks/navigation/internal-link-present.js b/test/checks/navigation/internal-link-present.js
@@ -9,7 +9,7 @@ describe('internal-link-present', function () {
 
 	afterEach(function () {
 		fixture.innerHTML = '';
-		axe._tree = undefined;
+		axe._tree = undefined; 
 		checkContext.reset();
 	});
 
@@ -18,6 +18,21 @@ describe('internal-link-present', function () {
 		assert.isTrue(checks['internal-link-present'].evaluate.apply(checkContext, params));
 	});
 
+	it('should return false when a hashbang URL was used', function () {
+		var params = checkSetup('<div id="target"><a href="#!foo">hi</a></div>');
+		assert.isFalse(checks['internal-link-present'].evaluate.apply(checkContext, params));
+	});
+
+	it('should return false when a hash route URL was used', function () {
+		var params = checkSetup('<div id="target"><a href="#/home">hi</a></div>');
+		assert.isFalse(checks['internal-link-present'].evaluate.apply(checkContext, params));
+	});
+
+	it('should return false when a hashbang + slash route URL was used', function () {
+		var params = checkSetup('<div id="target"><a href="#!/home">hi</a></div>');
+		assert.isFalse(checks['internal-link-present'].evaluate.apply(checkContext, params));
+	});
+
 	it('should otherwise return false', function () {
 		var params = checkSetup('<div id="target"><a href="http://www.deque.com/#haha">hi</a></div>');
 		assert.isFalse(checks['internal-link-present'].evaluate.apply(checkContext, params));

diff --git a/test/integration/full/bypass/skip-link.html b/test/integration/full/bypass/skip-link.html
@@ -17,7 +17,7 @@
 <script src="/test/integration/no-ui-reporter.js"></script>
 </head>
 <body>
-	<a href="#">Skip</a>
+	<a href="#mocha">Skip</a>
 	<div>Test.</div>
 	<a href="http://www.deque.com">stuff</a>
 	<div id="mocha"></div>

diff --git a/test/rule-matches/skip-link-matches.js b/test/rule-matches/skip-link-matches.js
@@ -0,0 +1,46 @@
+describe('skip-link-matches', function () {
+	'use strict'; 
+
+	var rule, link;
+	var fixture = document.getElementById('fixture');
+
+	beforeEach(function () {
+		rule = axe._audit.rules.find(function (rule) {
+			return rule.id === 'skip-link';
+		});
+		link = document.createElement('a')
+	});
+
+	afterEach(function () {
+		fixture.innerHTML = '';
+	});
+
+	it('is a function', function () {
+		assert.isFunction(rule.matches);
+	});
+
+	it('returns false if the href attribute does not start with #', function () {
+		link.href = 'foo#bar';
+		assert.isFalse(rule.matches(link));
+	});
+
+	it('returns false if the href attribute is `#`', function () {
+		link.href = '#';
+		assert.isFalse(rule.matches(link));
+	});
+
+	it('returns true if the href attribute starts with #', function () {
+		link.href = '#foo';
+		assert.isTrue(rule.matches(link));
+	});
+
+	it('returns false if the href attribute starts with #!', function () {
+		link.href = '#!foo';
+		assert.isFalse(rule.matches(link));
+	});
+
+	it('returns false if the href attribute starts with #/', function () {
+		link.href = '#/foo';
+		assert.isFalse(rule.matches(link));
+	});
+});