Skip to content

Commit b7f1ad1

Browse files
strakerstraker
committed
fix(no-autoplay-audio): don't timeout for preload=none media elements (#4684)
Closes: #4665
1 parent 67d4e4f commit b7f1ad1

File tree

6 files changed

+248
-141
lines changed

6 files changed

+248
-141
lines changed

‎lib/checks/media/no-autoplay-audio-evaluate.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
function noAutoplayAudioEvaluate(node, options) {
2+
const hasControls = node.hasAttribute('controls');
3+
4+
/**
5+
* if the media loops then we only need to know if it has controls, regardless
6+
* of the duration
7+
*/
8+
if (node.hasAttribute('loop')) {
9+
return hasControls;
10+
}
11+
212
/**
313
* if duration cannot be read, this means `preloadMedia` has failed
414
*/
@@ -12,15 +22,15 @@ function noAutoplayAudioEvaluate(node, options) {
1222
*/
1323
const { allowedDuration = 3 } = options;
1424
const playableDuration = getPlayableDuration(node);
15-
if (playableDuration <= allowedDuration && !node.hasAttribute('loop')) {
25+
if (playableDuration <= allowedDuration) {
1626
return true;
1727
}
1828

1929
/**
2030
* if media element does not provide controls mechanism
2131
* -> fail
2232
*/
23-
if (!node.hasAttribute('controls')) {
33+
if (!hasControls) {
2434
return false;
2535
}
2636

‎lib/core/utils/preload-media.js

+41-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,49 @@ import querySelectorAllFilter from './query-selector-all-filter';
1212
function preloadMedia({ treeRoot = axe._tree[0] }) {
1313
const mediaVirtualNodes = querySelectorAllFilter(
1414
treeRoot,
15-
'video, audio',
15+
/**
16+
* Only concern ourselves with media that autoplays as the no-autoplay-audio rule
17+
* is the only rule that uses this information
18+
*/
19+
'video[autoplay], audio[autoplay]',
1620
({ actualNode }) => {
1721
/**
18-
* this is to safe-gaurd against empty `src` values which can get resolved `window.location`, thus never preloading as the URL is not a media asset
22+
* Ignore media that won't load no matter how long we wait (i.e. preload=none).
23+
*
24+
* Although the spec says that the autoplay attribute can override the preload
25+
* attribute, it depends on the browser settings (if autoplay is allowed) and
26+
* operating system (e.g. Android does not preload autoplay media even when
27+
* autoplay is allowed).
28+
*
29+
* We can identify preload=none media that won't load if the networkState is
30+
* idle and the readyState is 0. If the browser is currently loading the media
31+
* (networkState) or if the media is already loaded (readyState) that means the
32+
* preload attribute was ignored.
33+
*
34+
* @see https://github.com/dequelabs/axe-core/issues/4665
35+
* @see https://html.spec.whatwg.org/multipage/media.html#attr-media-preload
36+
*/
37+
if (
38+
actualNode.preload === 'none' &&
39+
actualNode.readyState === 0 &&
40+
actualNode.networkState !== actualNode.NETWORK_LOADING
41+
) {
42+
return false;
43+
}
44+
45+
/**
46+
* Ignore media nodes which are `paused` or `muted` as the no-autoplay-audio
47+
* rule matcher ignores them
48+
*/
49+
if (
50+
actualNode.hasAttribute('paused') ||
51+
actualNode.hasAttribute('muted')
52+
) {
53+
return false;
54+
}
55+
56+
/**
57+
* This is to safe-gaurd against empty `src` values which can get resolved `window.location`, thus never preloading as the URL is not a media asset
1958
*/
2059
if (actualNode.hasAttribute('src')) {
2160
return !!actualNode.getAttribute('src');

‎test/checks/media/no-autoplay-audio.js

+95-88
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,126 @@
1-
describe('no-autoplay-audio', function () {
2-
'use strict';
1+
describe('no-autoplay-audio', () => {
2+
const check = checks['no-autoplay-audio'];
3+
const checkSetup = axe.testUtils.checkSetup;
4+
const checkContext = axe.testUtils.MockCheckContext();
5+
const preloadOptions = { preload: { assets: ['media'] } };
36

4-
var check;
5-
var fixture = document.getElementById('fixture');
6-
var checkSetup = axe.testUtils.checkSetup;
7-
var checkContext = axe.testUtils.MockCheckContext();
8-
var preloadOptions = { preload: { assets: ['media'] } };
9-
10-
before(function () {
11-
check = checks['no-autoplay-audio'];
12-
});
13-
14-
afterEach(function () {
15-
fixture.innerHTML = '';
16-
axe._tree = undefined;
7+
afterEach(() => {
178
checkContext.reset();
189
});
1910

20-
it('returns undefined when <audio> has no source (duration cannot be interpreted)', function (done) {
21-
var checkArgs = checkSetup('<audio id="target"></audio>');
22-
axe.utils.preload(preloadOptions).then(function () {
23-
assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
24-
done();
25-
});
11+
it('returns undefined when <audio> has no source (duration cannot be interpreted)', async () => {
12+
const checkArgs = checkSetup('<audio id="target"></audio>');
13+
await axe.utils.preload(preloadOptions);
14+
assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
2615
});
2716

28-
it('returns undefined when <video> has no source (duration cannot be interpreted)', function (done) {
29-
var checkArgs = checkSetup('<video id="target"><source src=""/></video>');
30-
axe.utils.preload(preloadOptions).then(function () {
31-
assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
32-
done();
33-
});
17+
it('returns undefined when <video> has no source (duration cannot be interpreted)', async () => {
18+
const checkArgs = checkSetup('<video id="target"><source src=""/></video>');
19+
await axe.utils.preload(preloadOptions);
20+
assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
3421
});
3522

36-
it('returns false when <audio> can autoplay and has no controls mechanism', function (done) {
37-
var checkArgs = checkSetup(
23+
it('returns false when <audio> can autoplay and has no controls mechanism', async () => {
24+
const checkArgs = checkSetup(
3825
'<audio id="target" src="/test/assets/moon-speech.mp3" autoplay="true"></audio>'
3926
);
40-
axe.utils.preload(preloadOptions).then(function () {
41-
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
42-
done();
43-
});
27+
await axe.utils.preload(preloadOptions);
28+
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
4429
});
4530

46-
it('returns false when <video> can autoplay and has no controls mechanism', function (done) {
47-
var checkArgs = checkSetup(
48-
'<video id="target" autoplay="true">' +
49-
'<source src="/test/assets/video.webm" type="video/webm" />' +
50-
'<source src="/test/assets/video.mp4" type="video/mp4" />' +
51-
'</video>'
52-
);
53-
axe.utils.preload(preloadOptions).then(function () {
54-
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
55-
done();
56-
});
31+
it('returns false when <video> can autoplay and has no controls mechanism', async () => {
32+
const checkArgs = checkSetup(`
33+
<video id="target" autoplay="true">
34+
<source src="/test/assets/video.webm" type="video/webm" />
35+
<source src="/test/assets/video.mp4" type="video/mp4" />
36+
</video>
37+
`);
38+
await axe.utils.preload(preloadOptions);
39+
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
5740
});
5841

59-
it('returns false when <audio> plays less than allowed dutation but loops', function (done) {
60-
var checkArgs = checkSetup(
42+
it('returns false when <audio> plays less than allowed dutation but loops', async () => {
43+
const checkArgs = checkSetup(
6144
'<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" autoplay="true" loop="true"></audio>'
6245
);
63-
axe.utils.preload(preloadOptions).then(function () {
64-
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
65-
done();
66-
});
46+
await axe.utils.preload(preloadOptions);
47+
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
6748
});
6849

69-
it('returns true when <video> can autoplay and duration is below allowed duration (by passing options)', function (done) {
70-
var checkArgs = checkSetup(
71-
'<video id="target" autoplay="true">' +
72-
'<source src="/test/assets/video.webm" type="video/webm" />' +
73-
'<source src="/test/assets/video.mp4" type="video/mp4" />' +
74-
'</video>',
75-
{ allowedDuration: 15 }
50+
it('returns false when <video> loops and has no controls mechanism when duration is unknown', () => {
51+
const checkArgs = checkSetup(`
52+
<video id="target" loop>
53+
<source src="/test/assets/video.webm#t=7,9" type="video/webm" />
54+
<source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
55+
</video>
56+
`);
57+
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
58+
});
59+
60+
it('returns false when <audio> loops and has no controls mechanism when duration is unknown', () => {
61+
const checkArgs = checkSetup(
62+
'<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" loop="true"></audio>'
7663
);
77-
axe.utils.preload(preloadOptions).then(function () {
78-
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
79-
done();
80-
});
64+
assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
8165
});
8266

83-
it('returns true when <video> can autoplay and duration is below allowed duration (by setting playback range)', function (done) {
84-
var checkArgs = checkSetup(
85-
'<video id="target" autoplay="true">' +
86-
'<source src="/test/assets/video.webm#t=7,9" type="video/webm" />' +
87-
'<source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />' +
88-
'</video>'
89-
// Note: default allowed duration is 3s
67+
it('returns true when <video> can autoplay and duration is below allowed duration (by passing options)', async () => {
68+
const checkArgs = checkSetup(
69+
`
70+
<video id="target" autoplay="true">
71+
<source src="/test/assets/video.webm" type="video/webm" />
72+
<source src="/test/assets/video.mp4" type="video/mp4" />
73+
</video>`,
74+
{ allowedDuration: 15 }
9075
);
91-
axe.utils.preload(preloadOptions).then(function () {
92-
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
93-
done();
94-
});
76+
await axe.utils.preload(preloadOptions);
77+
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
78+
});
79+
80+
it('returns true when <video> can autoplay and duration is below allowed duration (by setting playback range)', async () => {
81+
const checkArgs = checkSetup(`
82+
<video id="target" autoplay="true">
83+
<source src="/test/assets/video.webm#t=7,9" type="video/webm" />
84+
<source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
85+
</video>`);
86+
// Note: default allowed duration is 3s
87+
await axe.utils.preload(preloadOptions);
88+
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
9589
});
9690

97-
it('returns true when <audio> can autoplay but has controls mechanism', function (done) {
98-
var checkArgs = checkSetup(
91+
it('returns true when <audio> can autoplay but has controls mechanism', async () => {
92+
const checkArgs = checkSetup(
9993
'<audio id="target" src="/test/assets/moon-speech.mp3" autoplay="true" controls></audio>'
10094
);
101-
axe.utils.preload(preloadOptions).then(function () {
102-
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
103-
done();
104-
});
95+
await axe.utils.preload(preloadOptions);
96+
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
97+
});
98+
99+
it('returns true when <video> can autoplay and has controls mechanism', async () => {
100+
const checkArgs = checkSetup(`
101+
<video id="target" autoplay="true" controls>
102+
<source src="/test/assets/video.webm" type="video/webm" />
103+
<source src="/test/assets/video.mp4" type="video/mp4" />
104+
</video>
105+
`);
106+
await axe.utils.preload(preloadOptions);
107+
assert.isTrue(check.evaluate.apply(null, checkArgs));
108+
});
109+
110+
it('returns true when <video> loops and has controls mechanism when duration is unknown', () => {
111+
const checkArgs = checkSetup(`
112+
<video id="target" loop controls>
113+
<source src="/test/assets/video.webm#t=7,9" type="video/webm" />
114+
<source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
115+
</video>
116+
`);
117+
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
105118
});
106119

107-
it('returns true when <video> can autoplay and has controls mechanism', function (done) {
108-
var checkArgs = checkSetup(
109-
'<video id="target" autoplay="true" controls>' +
110-
'<source src="/test/assets/video.webm" type="video/webm" />' +
111-
'<source src="/test/assets/video.mp4" type="video/mp4" />' +
112-
'</video>'
120+
it('returns true when <audio> loops and has controls mechanism when duration is unknown', () => {
121+
const checkArgs = checkSetup(
122+
'<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" controls="true" loop="true"></audio>'
113123
);
114-
axe.utils.preload(preloadOptions).then(function () {
115-
assert.isTrue(check.evaluate.apply(null, checkArgs));
116-
done();
117-
});
124+
assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
118125
});
119126
});

0 commit comments

Comments
 (0)