fix: Support skiplinks starting with "/#" (#1286)

* fix: Support skiplinks starting with "/#"

* fix: Typo in test description

lib/commons/dom/get-element-by-reference.js

@@ -11,19 +11,24 @@
  */
 dom.getElementByReference = function(node, attr) {
 	let fragment = node.getAttribute(attr);
+	if (!fragment) {
+		return null;
+	}
 
-	if (fragment && fragment.charAt(0) === '#') {
+	if (fragment.charAt(0) === '#') {
 		fragment = decodeURIComponent(fragment.substring(1));
+	} else if (fragment.substr(0, 2) === '/#') {
+		fragment = decodeURIComponent(fragment.substring(2));
+	}
 
-		let candidate = document.getElementById(fragment);
-		if (candidate) {
-			return candidate;
-		}
+	let candidate = document.getElementById(fragment);
+	if (candidate) {
+		return candidate;
+	}
 
-		candidate = document.getElementsByName(fragment);
-		if (candidate.length) {
-			return candidate[0];
-		}
+	candidate = document.getElementsByName(fragment);
+	if (candidate.length) {
+		return candidate[0];
 	}
 	return null;
 };

test/checks/navigation/region.js

@@ -66,6 +66,15 @@ describe('region', function() {
 		assert.equal(checkContext._relatedNodes.length, 0);
 	});
 
+	it('should return true when there is an Angular skiplink', function() {
+		var checkArgs = checkSetup(
+			'<div id="target"><a href="/#mainheader">Click Here</a><div role="main"><h1 id="mainheader" tabindex="0">Introduction</h1></div></div>'
+		);
+
+		assert.isTrue(checks.region.evaluate.apply(checkContext, checkArgs));
+		assert.equal(checkContext._relatedNodes.length, 0);
+	});
+
 	it('should return false when there is a non-region element', function() {
 		var checkArgs = checkSetup(
 			'<div id="target"><div>This is random content.</div><div role="main"><h1 id="mainheader">Introduction</h1></div></div>'

test/checks/navigation/skip-link.js

@@ -56,4 +56,11 @@ describe('skip-link', function() {
 		var node = fixture.querySelector('a');
 		assert.isTrue(checks['skip-link'].evaluate(node));
 	});
+
+	it('should return true if the URI is an Angular skiplink', function() {
+		fixture.innerHTML =
+			'<a href="/#target">Click Here</a><h1 id="target">Introduction</h1>';
+		var node = fixture.querySelector('a');
+		assert.isTrue(checks['skip-link'].evaluate(node));
+	});
 });

test/commons/dom/get-element-by-reference.js

@@ -68,4 +68,17 @@ describe('dom.getElementByReference', function() {
 
 		assert.equal(result, expected);
 	});
+
+	it('returns the first matching element using Angular skiplinks', function() {
+		fixture.innerHTML =
+			'<a id="link" href="/#target">Hi</a>' +
+			'<a name="target" id="target0"></a>' +
+			'<a name="target"></a>';
+
+		var node = document.getElementById('link'),
+			expected = document.getElementById('target0'),
+			result = axe.commons.dom.getElementByReference(node, 'href');
+
+		assert.equal(result, expected);
+	});
 });