fix: add shadow dom coverage to all checks

Closes #690

Author: Marcy Sutton

lib/checks/navigation/header-present.js

@@ -1 +1 @@
-return !!node.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+return !!axe.utils.querySelectorAll(virtualNode, 'h1, h2, h3, h4, h5, h6, [role="heading"]')[0];

lib/checks/navigation/internal-link-present.js

@@ -1 +1,2 @@
-return !!node.querySelector('a[href^="#"]');
+const links = axe.utils.querySelectorAll(virtualNode, 'a[href]');
+return links.some(vLink => vLink.actualNode.getAttribute('href')[0] === '#');

test/checks/aria/errormessage.js

@@ -2,7 +2,8 @@ describe('aria-errormessage', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
-
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 	var checkContext = axe.testUtils.MockCheckContext();
 
 	afterEach(function () {
@@ -46,4 +47,23 @@ describe('aria-errormessage', function () {
 		target.setAttribute('aria-describedby', 'plain');
 		assert.isTrue(checks['aria-errormessage'].evaluate.call(checkContext, target));
 	});
+
+	(shadowSupported ? it : xit)
+	('should return false if aria-errormessage value crosses shadow boundary', function () {
+		var params = shadowCheckSetup(
+			'<div id="target" aria-errormessage="live"></div>',
+			'<div id="live" aria-live="assertive"></div>'
+		);
+		assert.isFalse(checks['aria-errormessage'].evaluate.apply(checkContext, params));
+	});
+
+	(shadowSupported ? it : xit)
+	('should return true if aria-errormessage and value are inside shadow dom', function () {
+		var params = shadowCheckSetup(
+			'<div></div>',
+			'<div id="target" aria-errormessage="live"</div>' +
+			'<div id="live" aria-live="assertive"></div>'
+		);
+		assert.isTrue(checks['aria-errormessage'].evaluate.apply(checkContext, params));
+	});
 });

test/checks/keyboard/has-at-least-one-main.js

@@ -4,10 +4,13 @@ describe('has-at-least-one-main', function () {
 	var fixture = document.getElementById('fixture');
 	var checkContext = new axe.testUtils.MockCheckContext();
 	var checkSetup = axe.testUtils.checkSetup;
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
 		checkContext.reset();
+		axe._tree = undefined;
 	});
 
 	it('should return false if no div has role property', function() {
@@ -44,6 +47,10 @@ describe('has-at-least-one-main', function () {
 		assert.isTrue(mainIsFound);
 		assert.equal(checkContext._data, mainIsFound);
 	});
+
+	(shadowSupported ? it : xit)
+	('should return true if main is inside of shadow dom', function() {
+		var params = shadowCheckSetup('<div id="target"></div>', '<main>main landmark</main>');
 		var mainIsFound = checks['has-at-least-one-main'].evaluate.apply(checkContext, params);
 		assert.isTrue(mainIsFound);
 		assert.equal(checkContext._data, mainIsFound);

test/checks/navigation/header-present.js

@@ -3,7 +3,9 @@ describe('header-present', function () {
 
 	var fixture = document.getElementById('fixture');
 	var checkSetup = axe.testUtils.checkSetup;
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
 	var checkContext = axe.testUtils.MockCheckContext();
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
@@ -41,4 +43,12 @@ describe('header-present', function () {
 		assert.isFalse(checks['header-present'].evaluate.apply(checkContext, params));
 	});
 
+	(shadowSupported ? it : xit)
+	('should return true if heading is in shadow dom', function () {
+		var params = shadowCheckSetup(
+			'<div id="target"><div>',
+			'<h1></h1>'
+		);
+		assert.isTrue(checks['header-present'].evaluate.apply(checkContext, params));
+	});
 });

test/checks/navigation/internal-link-present.js

@@ -2,8 +2,10 @@ describe('internal-link-present', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
 	var checkContext = axe.testUtils.MockCheckContext();
 	var checkSetup = axe.testUtils.checkSetup;
+	var shadowCheckSetup = axe.testUtils.shadowCheckSetup;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
@@ -21,4 +23,12 @@ describe('internal-link-present', function () {
 		assert.isFalse(checks['internal-link-present'].evaluate.apply(checkContext, params));
 	});
 
+	(shadowSupported ? it : xit)
+	('should return true when internal link is found in shadow dom', function () {
+		var params = shadowCheckSetup(
+			'<div id="target"></div>',
+			'<a href="#haha">hi</a>'
+		);
+		assert.isTrue(checks['internal-link-present'].evaluate.apply(checkContext, params));
+	});
 });

test/checks/navigation/p-as-heading.js

@@ -172,4 +172,20 @@ describe('p-as-heading', function () {
 			assert.isTrue(checks['p-as-heading'].evaluate.apply(checkContext, params));
 		});
 	});
+
+	(shadowSupported ? it : xit)
+	('returns undefined instead of false if the element is inside a blockquote in light dom', function () {
+		var params = shadowCheckSetup('<blockquote></blockquote>',
+			'<p style="font-weight:bold" id="target">elm 1</p> <p>elm 2</p>',
+			testOptions);
+		assert.isUndefined(checks['p-as-heading'].evaluate.apply(checkContext, params));
+	});
+
+	(shadowSupported ? it : xit)
+	('returns true over undefined from within a blockquote in light dom', function () {
+		var params = shadowCheckSetup('<blockquote></blockquote>',
+			'<p id="target">elm 1</p> <p>elm 2</p>',
+			testOptions);
+		assert.isTrue(checks['p-as-heading'].evaluate.apply(checkContext, params));
+	});
 });

test/testutils.js

@@ -102,25 +102,32 @@ testUtils.checkSetup = function (content, options, target) {
  *
  * @param Node|String 	Stuff to go into the fixture (html string or DOM Node)
  * @param Node|String 	Stuff to go into the shadow boundary (html or node)
- * @param String  			Target selector for the check, can be inside or outside of Shadow DOM (default: '#target')
  * @param Object  			Options argument for the check (optional, default: {})
+ * @param String  			Target selector for the check, can be inside or outside of Shadow DOM (optional, default: '#target')
  * @return Array
  */
-testUtils.shadowCheckSetup = function (content, shadowContent, targetSelector, options) {
+testUtils.shadowCheckSetup = function (content, shadowContent, options, targetSelector) {
 	'use strict';
 
-	// Normalize the params
+	// Normalize target, allow it to be the provided string or use '#target' to query composed tree
+	if (typeof targetSelector !== 'string') {
+		targetSelector = '#target';
+	}
+
+	// Normalize the object params
 	if (typeof options !== 'object') {
 		options = {};
 	}
-	// Normalize target, allow it to be the provided string or use '#target' to query composed tree
-	targetSelector = targetSelector || '#target';
 
 	var fixture = testUtils.fixtureSetup(content);
 	var targetCandidate = fixture.querySelector(targetSelector);
 	var container = targetCandidate;
 	if (!targetCandidate) {
-		container = fixture.firstChild;
+		// check if content specifies a shadow container
+		container = fixture.querySelector('#shadow');
+		if (!container) {
+			container = fixture.firstChild;
+		}
 	}
 	// attach a shadowRoot with the content provided
 	var shadowRoot = container.attachShadow({ mode: 'open' });