feat: ShadowDOM support for media checks

lib/checks/media/caption.js

@@ -1,13 +1,10 @@
-var tracks = node.querySelectorAll('track');
+var tracks = axe.utils.querySelectorAll(virtualNode, 'track');
+
 if (tracks.length) {
-	for (var i=0; i<tracks.length; i++) {
-		var kind = tracks[i].getAttribute('kind');
-		if (kind && kind === 'captions') {
-			// only return for matching track, in case there are multiple
-			return false;
-		}
-	}
-	return true;
+  // return false if any track has kind === 'caption'
+  return !tracks.some(({ actualNode }) => (
+    actualNode.getAttribute('kind').toLowerCase() === 'captions'
+  ));
 }
-// for multiple track elements, return the first one that matches
+// Undefined if there are no tracks - media may be decorative
 return undefined;

lib/checks/media/description.js

@@ -1,12 +1,12 @@
-var tracks = node.querySelectorAll('track');
+var tracks = axe.utils.querySelectorAll(virtualNode, 'track');
+
 if (tracks.length) {
-	for (var i=0; i<tracks.length; i++) {
-		var kind = tracks[i].getAttribute('kind');
-		if (kind && kind === 'descriptions') {
-			// only return for matching track, in case there are multiple
-			return false;
-		}
-	}
-	return true;
+  // return false if any track has kind === 'description'
+  var out = !tracks.some(({ actualNode }) => (
+    actualNode.getAttribute('kind').toLowerCase() === 'descriptions'
+  ));
+  axe.log(tracks.map(t => t.actualNode.getAttribute('kind')), out);
+  return out;
 }
+// Undefined if there are no tracks - media may be decorative
 return undefined;

test/checks/media/caption.js

@@ -2,29 +2,35 @@ describe('caption', function () {
 	'use strict';
 
 	var fixture = document.getElementById('fixture');
+	var shadowSupport = axe.testUtils.shadowSupport;
+	var checkSetup = axe.testUtils.checkSetup;
 
 	afterEach(function () {
 		fixture.innerHTML = '';
 	});
 
 	it('should return undefined if there is no track element', function () {
-		fixture.innerHTML = '<audio></audio>';
-		var node = fixture.querySelector('audio');
-
-		assert.isUndefined(checks.caption.evaluate(node));
+		var checkArgs = checkSetup('<audio></audio>', 'audio');
+		assert.isUndefined(checks.caption.evaluate.apply(null, checkArgs));
 	});
 
 	it('should fail if there is no kind=captions attribute', function () {
-		fixture.innerHTML = '<audio><track kind=descriptions></audio>';
-		var node = fixture.querySelector('audio');
-
-		assert.isTrue(checks.caption.evaluate(node));
+		var checkArgs = checkSetup('<audio><track kind=descriptions></audio>', 'audio');
+		assert.isTrue(checks.caption.evaluate.apply(null, checkArgs));
 	});
 
 	it('should pass if there is a kind=captions attribute', function () {
-		fixture.innerHTML = '<audio><track kind=captions></audio>';
-		var node = fixture.querySelector('audio');
+		var checkArgs = checkSetup('<audio><track kind=captions></audio>', 'audio');
+		assert.isFalse(checks.caption.evaluate.apply(null, checkArgs));
+	});
+
+	(shadowSupport.v1 ? it : xit)('should get track from composed tree', function () {
+		var node = document.createElement('div');
+		node.innerHTML = '<track kind=descriptions>';
+		var shadow = node.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<audio><slot></slot></audio>';
 
-		assert.isFalse(checks.caption.evaluate(node));
+		var checkArgs = checkSetup(node, {}, 'audio');
+		assert.isTrue(checks.caption.evaluate.apply(null, checkArgs));
 	});
 });

test/checks/media/description.js

@@ -1,30 +1,37 @@
 describe('description', function () {
 	'use strict';
 
-	var fixture = document.getElementById('fixture');
+	var shadowSupport = axe.testUtils.shadowSupport;
+	var checkSetup = axe.testUtils.checkSetup;
 
 	afterEach(function () {
-		fixture.innerHTML = '';
+		document.getElementById('fixture').innerHTML = '';
 	});
 
 	it('should return undefined if there is no track element', function () {
-		fixture.innerHTML = '<video></video>';
-		var node = fixture.querySelector('video');
-
-		assert.isUndefined(checks.description.evaluate(node));
+		var checkArgs = checkSetup('<video></video>', 'video');
+		assert.isUndefined(checks.description.evaluate.apply(null, checkArgs));
 	});
 
-	it('should fail if there is no kind=descriptions attribute', function () {
-		fixture.innerHTML = '<video><track kind=captions></video>';
-		var node = fixture.querySelector('video');
-
-		assert.isTrue(checks.description.evaluate(node));
+	it('should fail if there is no kind=captions attribute', function () {
+		var checkArgs = checkSetup('<video><track kind=captions></video>', 'video');
+		assert.isTrue(checks.description.evaluate.apply(null, checkArgs));
 	});
 
 	it('should pass if there is a kind=descriptions attribute', function () {
-		fixture.innerHTML = '<video><track kind=descriptions></video>';
-		var node = fixture.querySelector('video');
+		var checkArgs = checkSetup('<video><track kind=descriptions></video>', 'video');
+		assert.isFalse(checks.description.evaluate.apply(null, checkArgs));
+	});
 
-		assert.isFalse(checks.description.evaluate(node));
+	(shadowSupport.v1 ? it : xit)('should get track from composed tree', function () {
+		var node = document.createElement('div');
+		node.innerHTML = '<track kind=descriptions>';
+		var shadow = node.attachShadow({ mode: 'open' });
+		shadow.innerHTML = '<video><slot></slot></video>';
+
+		var checkArgs = checkSetup(node, {}, 'video');
+		axe.log(checkArgs);
+		assert.isFalse(checks.description.evaluate.apply(null, checkArgs));
 	});
+
 });