fix(rule): skip-link rule doesn't decode URI encoded href's

If href contains url encoded fragment like "<a href="#%3Ctarget%3E">Click Here</a>" it leads to false positive violation due to no target
dequelabs · Mar 12, 2018 · 818b5cd · 818b5cd
1 parent 22607b6
commit 818b5cd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/lib/commons/dom/get-element-by-reference.js b/lib/commons/dom/get-element-by-reference.js
@@ -13,7 +13,7 @@ dom.getElementByReference = function (node, attr) {
 	let fragment = node.getAttribute(attr);
 
 	if (fragment && fragment.charAt(0) === '#') {
-		fragment = fragment.substring(1);
+		fragment = decodeURIComponent(fragment.substring(1));
 
 		let candidate = document.getElementById(fragment);
 		if (candidate) {

diff --git a/test/checks/navigation/skip-link.js b/test/checks/navigation/skip-link.js
@@ -44,4 +44,10 @@ describe('skip-link', function () {
 		var node = fixture.querySelector('a');
 		assert.isUndefined(checks['skip-link'].evaluate(node));
 	});
+
+	it('should return true if the URI encoded href points to an element with an ID', function () {
+		fixture.innerHTML = '<a href="#%3Ctarget%3E">Click Here</a><h1 id="&lt;target&gt;">Introduction</h1>';
+		var node = fixture.querySelector('a');
+		assert.isTrue(checks['skip-link'].evaluate(node));
+	});
 });