From b96dd2b64654f9d9a80664faf093983312121fcf Mon Sep 17 00:00:00 2001
From: Steven Lambert <2433219+straker@users.noreply.github.com>
Date: Tue, 28 Jan 2025 15:14:35 -0700
Subject: [PATCH] fix(no-autoplay-audio): don't timeout for preload=none media
 elements

---
 .../media/no-autoplay-audio-evaluate.js       |  14 +-
 lib/core/utils/preload-media.js               |  21 ++
 test/checks/media/no-autoplay-audio.js        | 183 +++++++++---------
 test/core/utils/preload-media.js              |  95 +++++----
 .../no-autoplay-audio/no-autoplay-audio.html  |  38 +++-
 .../no-autoplay-audio/no-autoplay-audio.js    |  12 +-
 6 files changed, 226 insertions(+), 137 deletions(-)

diff --git a/lib/checks/media/no-autoplay-audio-evaluate.js b/lib/checks/media/no-autoplay-audio-evaluate.js
index dc378bb864..c2a4ebf245 100644
--- a/lib/checks/media/no-autoplay-audio-evaluate.js
+++ b/lib/checks/media/no-autoplay-audio-evaluate.js
@@ -1,4 +1,14 @@
 function noAutoplayAudioEvaluate(node, options) {
+  const hasControls = node.hasAttribute('controls');
+
+  /**
+   * if the media loops then we only need to know if it has controls, regardless
+   * of the duration
+   */
+  if (node.hasAttribute('loop')) {
+    return hasControls;
+  }
+
   /**
    * if duration cannot be read, this means `preloadMedia` has failed
    */
@@ -12,7 +22,7 @@ function noAutoplayAudioEvaluate(node, options) {
    */
   const { allowedDuration = 3 } = options;
   const playableDuration = getPlayableDuration(node);
-  if (playableDuration <= allowedDuration && !node.hasAttribute('loop')) {
+  if (playableDuration <= allowedDuration) {
     return true;
   }
 
@@ -20,7 +30,7 @@ function noAutoplayAudioEvaluate(node, options) {
    * if media element does not provide controls mechanism
    * -> fail
    */
-  if (!node.hasAttribute('controls')) {
+  if (!hasControls) {
     return false;
   }
 
diff --git a/lib/core/utils/preload-media.js b/lib/core/utils/preload-media.js
index 72c8a9e9f2..199ded0caf 100644
--- a/lib/core/utils/preload-media.js
+++ b/lib/core/utils/preload-media.js
@@ -14,6 +14,27 @@ function preloadMedia({ treeRoot = axe._tree[0] }) {
     treeRoot,
     'video, audio',
     ({ actualNode }) => {
+      /**
+       * Ignore media that won't load no matter how long we wait
+       * @see https://github.com/dequelabs/axe-core/issues/4665
+       */
+      if (
+        actualNode.preload === 'none' &&
+        actualNode.networkState !== actualNode.NETWORK_LOADING
+      ) {
+        return false;
+      }
+
+      /**
+       * Ignore media nodes which are `paused` or `muted`
+       */
+      if (
+        actualNode.hasAttribute('paused') ||
+        actualNode.hasAttribute('muted')
+      ) {
+        return false;
+      }
+
       /**
        * 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
        */
diff --git a/test/checks/media/no-autoplay-audio.js b/test/checks/media/no-autoplay-audio.js
index 24277ce4da..d0b24475c2 100644
--- a/test/checks/media/no-autoplay-audio.js
+++ b/test/checks/media/no-autoplay-audio.js
@@ -1,119 +1,126 @@
-describe('no-autoplay-audio', function () {
-  'use strict';
+describe('no-autoplay-audio', () => {
+  const check = checks['no-autoplay-audio'];
+  const checkSetup = axe.testUtils.checkSetup;
+  const checkContext = axe.testUtils.MockCheckContext();
+  const preloadOptions = { preload: { assets: ['media'] } };
 
-  var check;
-  var fixture = document.getElementById('fixture');
-  var checkSetup = axe.testUtils.checkSetup;
-  var checkContext = axe.testUtils.MockCheckContext();
-  var preloadOptions = { preload: { assets: ['media'] } };
-
-  before(function () {
-    check = checks['no-autoplay-audio'];
-  });
-
-  afterEach(function () {
-    fixture.innerHTML = '';
-    axe._tree = undefined;
+  afterEach(() => {
     checkContext.reset();
   });
 
-  it('returns undefined when <audio> has no source (duration cannot be interpreted)', function (done) {
-    var checkArgs = checkSetup('<audio id="target"></audio>');
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+  it('returns undefined when <audio> has no source (duration cannot be interpreted)', async () => {
+    const checkArgs = checkSetup('<audio id="target"></audio>');
+    await axe.utils.preload(preloadOptions);
+    assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns undefined when <video> has no source (duration cannot be interpreted)', function (done) {
-    var checkArgs = checkSetup('<video id="target"><source src=""/></video>');
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+  it('returns undefined when <video> has no source (duration cannot be interpreted)', async () => {
+    const checkArgs = checkSetup('<video id="target"><source src=""/></video>');
+    await axe.utils.preload(preloadOptions);
+    assert.isUndefined(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns false when <audio> can autoplay and has no controls mechanism', function (done) {
-    var checkArgs = checkSetup(
+  it('returns false when <audio> can autoplay and has no controls mechanism', async () => {
+    const checkArgs = checkSetup(
       '<audio id="target" src="/test/assets/moon-speech.mp3" autoplay="true"></audio>'
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+    await axe.utils.preload(preloadOptions);
+    assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns false when <video> can autoplay and has no controls mechanism', function (done) {
-    var checkArgs = checkSetup(
-      '<video id="target" autoplay="true">' +
-        '<source src="/test/assets/video.webm" type="video/webm" />' +
-        '<source src="/test/assets/video.mp4" type="video/mp4" />' +
-        '</video>'
-    );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+  it('returns false when <video> can autoplay and has no controls mechanism', async () => {
+    const checkArgs = checkSetup(`
+      <video id="target" autoplay="true">
+        <source src="/test/assets/video.webm" type="video/webm" />
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
+    `);
+    await axe.utils.preload(preloadOptions);
+    assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns false when <audio> plays less than allowed dutation but loops', function (done) {
-    var checkArgs = checkSetup(
+  it('returns false when <audio> plays less than allowed dutation but loops', async () => {
+    const checkArgs = checkSetup(
       '<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" autoplay="true" loop="true"></audio>'
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+    await axe.utils.preload(preloadOptions);
+    assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns true when <video> can autoplay and duration is below allowed duration (by passing options)', function (done) {
-    var checkArgs = checkSetup(
-      '<video id="target" autoplay="true">' +
-        '<source src="/test/assets/video.webm" type="video/webm" />' +
-        '<source src="/test/assets/video.mp4" type="video/mp4" />' +
-        '</video>',
-      { allowedDuration: 15 }
+  it('returns false when <video> loops and has no controls mechanism when duration is unknown', () => {
+    const checkArgs = checkSetup(`
+      <video id="target" loop>
+        <source src="/test/assets/video.webm#t=7,9" type="video/webm" />
+        <source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
+      </video>
+    `);
+    assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
+  });
+
+  it('returns false when <audio> loops and has no controls mechanism when duration is unknown', () => {
+    const checkArgs = checkSetup(
+      '<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" loop="true"></audio>'
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+    assert.isFalse(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns true when <video> can autoplay and duration is below allowed duration (by setting playback range)', function (done) {
-    var checkArgs = checkSetup(
-      '<video id="target" autoplay="true">' +
-        '<source src="/test/assets/video.webm#t=7,9" type="video/webm" />' +
-        '<source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />' +
-        '</video>'
-      // Note: default allowed duration is 3s
+  it('returns true when <video> can autoplay and duration is below allowed duration (by passing options)', async () => {
+    const checkArgs = checkSetup(
+      `
+      <video id="target" autoplay="true">
+        <source src="/test/assets/video.webm" type="video/webm" />
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>`,
+      { allowedDuration: 15 }
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+    await axe.utils.preload(preloadOptions);
+    assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
+  });
+
+  it('returns true when <video> can autoplay and duration is below allowed duration (by setting playback range)', async () => {
+    const checkArgs = checkSetup(`
+      <video id="target" autoplay="true">
+        <source src="/test/assets/video.webm#t=7,9" type="video/webm" />
+        <source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
+      </video>`);
+    // Note: default allowed duration is 3s
+    await axe.utils.preload(preloadOptions);
+    assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns true when <audio> can autoplay but has controls mechanism', function (done) {
-    var checkArgs = checkSetup(
+  it('returns true when <audio> can autoplay but has controls mechanism', async () => {
+    const checkArgs = checkSetup(
       '<audio id="target" src="/test/assets/moon-speech.mp3" autoplay="true" controls></audio>'
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
-      done();
-    });
+    await axe.utils.preload(preloadOptions);
+    assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
+  });
+
+  it('returns true when <video> can autoplay and has controls mechanism', async () => {
+    const checkArgs = checkSetup(`
+      <video id="target" autoplay="true" controls>
+        <source src="/test/assets/video.webm" type="video/webm" />
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
+    `);
+    await axe.utils.preload(preloadOptions);
+    assert.isTrue(check.evaluate.apply(null, checkArgs));
+  });
+
+  it('returns true when <video> loops and has controls mechanism when duration is unknown', () => {
+    const checkArgs = checkSetup(`
+      <video id="target" loop controls>
+        <source src="/test/assets/video.webm#t=7,9" type="video/webm" />
+        <source src="/test/assets/video.mp4#t=7,9" type="video/mp4" />
+      </video>
+    `);
+    assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns true when <video> can autoplay and has controls mechanism', function (done) {
-    var checkArgs = checkSetup(
-      '<video id="target" autoplay="true" controls>' +
-        '<source src="/test/assets/video.webm" type="video/webm" />' +
-        '<source src="/test/assets/video.mp4" type="video/mp4" />' +
-        '</video>'
+  it('returns true when <audio> loops and has controls mechanism when duration is unknown', () => {
+    const checkArgs = checkSetup(
+      '<audio id="target" src="/test/assets/moon-speech.mp3#t=2,4" controls="true" loop="true"></audio>'
     );
-    axe.utils.preload(preloadOptions).then(function () {
-      assert.isTrue(check.evaluate.apply(null, checkArgs));
-      done();
-    });
+    assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
   });
 });
diff --git a/test/core/utils/preload-media.js b/test/core/utils/preload-media.js
index 6d092f95a3..bebfb09451 100644
--- a/test/core/utils/preload-media.js
+++ b/test/core/utils/preload-media.js
@@ -1,54 +1,68 @@
-describe('axe.utils.preloadMedia', function () {
-  'use strict';
+describe('axe.utils.preloadMedia', () => {
+  const fixtureSetup = axe.testUtils.fixtureSetup;
 
-  var fixture = document.getElementById('fixture');
-  var fixtureSetup = axe.testUtils.fixtureSetup;
-
-  afterEach(function () {
-    fixture.innerHTML = '';
-  });
-
-  it('returns empty array when there are no media nodes to be preloaded', function (done) {
+  it('returns empty array when there are no media nodes to be preloaded', async () => {
     axe._tree = axe.utils.getFlattenedTree(document);
 
-    axe.utils.preloadMedia({ treeRoot: axe._tree[0] }).then(function (result) {
-      assert.equal(result.length, 0);
-      done();
-    });
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
   });
 
-  it('returns empty array when <audio> has no source', function (done) {
+  it('returns empty array when <audio> has no source', async () => {
     fixtureSetup('<audio autoplay="true" controls></audio>');
 
-    axe.utils.preloadMedia({ treeRoot: axe._tree[0] }).then(function (result) {
-      assert.equal(result.length, 0);
-      done();
-    });
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
   });
 
-  it('returns empty array when <video> has no source', function (done) {
+  it('returns empty array when <video> has no source', async () => {
     fixtureSetup('<video id="target"><source src=""/></video>');
-    axe.utils.preloadMedia({ treeRoot: axe._tree[0] }).then(function (result) {
-      assert.equal(result.length, 0);
-      done();
-    });
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
   });
 
-  it('returns media node (audio) after their metadata has been preloaded', function (done) {
+  it('returns empty array when media node does not preload', async () => {
+    fixtureSetup(`
+      <video id="target" preload="none">
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
+    `);
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
+  });
+
+  it('returns empty array when media node is muted', async () => {
+    fixtureSetup(`
+      <video id="target" muted>
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
+    `);
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
+  });
+
+  it('returns empty array when media node is paused', async () => {
+    fixtureSetup(`
+      <video id="target" paused>
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
+    `);
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 0);
+  });
+
+  it('returns media node (audio) after their metadata has been preloaded', async () => {
     fixtureSetup(
       '<audio src="/test/assets/moon-speech.mp3" autoplay="true" controls></audio>'
     );
 
-    axe.utils.preloadMedia({ treeRoot: axe._tree[0] }).then(function (result) {
-      assert.equal(result.length, 1);
-      assert.isTrue(result[0].readyState > 0);
-      assert.equal(Math.round(result[0].duration), 27);
-
-      done();
-    });
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 1);
+    assert.isTrue(result[0].readyState > 0);
+    assert.equal(Math.round(result[0].duration), 27);
   });
 
-  it('returns media nodes (audio, video) after their metadata has been preloaded', function (done) {
+  it('returns media nodes (audio, video) after their metadata has been preloaded', async () => {
     fixtureSetup(
       // 1 audio elm
       '<audio src="/test/assets/moon-speech.mp3"></audio>' +
@@ -59,15 +73,12 @@ describe('axe.utils.preloadMedia', function () {
         '</video>'
     );
 
-    axe.utils.preloadMedia({ treeRoot: axe._tree[0] }).then(function (result) {
-      assert.equal(result.length, 2);
-      assert.isTrue(result[0].readyState > 0);
-      assert.equal(Math.round(result[0].duration), 27);
-
-      assert.isTrue(result[1].readyState > 0);
-      assert.equal(Math.round(result[1].duration), 14);
+    const result = await axe.utils.preloadMedia({ treeRoot: axe._tree[0] });
+    assert.equal(result.length, 2);
+    assert.isTrue(result[0].readyState > 0);
+    assert.equal(Math.round(result[0].duration), 27);
 
-      done();
-    });
+    assert.isTrue(result[1].readyState > 0);
+    assert.equal(Math.round(result[1].duration), 14);
   });
 });
diff --git a/test/integration/full/no-autoplay-audio/no-autoplay-audio.html b/test/integration/full/no-autoplay-audio/no-autoplay-audio.html
index e5556361a4..35fdd9632a 100644
--- a/test/integration/full/no-autoplay-audio/no-autoplay-audio.html
+++ b/test/integration/full/no-autoplay-audio/no-autoplay-audio.html
@@ -46,13 +46,25 @@
         <source src="/test/assets/video.mp4#t=8,10" type="video/mp4" />
       </video>
       <!-- pass 5  -->
-      <!-- pass 1 -->
       <audio
         id="pass5"
         src="/test/assets/moon-speech.mp3"
         autoplay
         controls
       ></audio>
+      <!-- pass 6 -->
+      <video id="pass6" autoplay="true" loop controls>
+        <source src="/test/assets/video.webm#t=8,10" type="video/webm" />
+        <source src="/test/assets/video.mp4#t=8,10" type="video/mp4" />
+      </video>
+      <!-- pass 7  -->
+      <audio
+        id="pass7"
+        src="/test/assets/moon-speech.mp3"
+        autoplay
+        loop
+        controls
+      ></audio>
 
       <!-- Incomplete  -->
       <!-- incomplete 1 -->
@@ -78,6 +90,19 @@
         autoplay="true"
         loop="true"
       ></audio>
+      <!-- inapplicable 5 -->
+      <audio
+        id="incomplete5"
+        src="/test/assets/moon-speech.mp3"
+        preload="none"
+        autoplay
+        loop
+      ></audio>
+      <!-- inapplicable 6 -->
+      <video id="incomplete6" preload="none" autoplay loop>
+        <source src="/test/assets/video.webm" type="video/webm" />
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
 
       <!-- Inapplicable  -->
       <!-- inapplicable 1 -->
@@ -96,6 +121,17 @@
         <source src="/test/assets/video.webm" type="video/webm" />
         <source src="/test/assets/video.mp4" type="video/mp4" />
       </video>
+      <!-- inapplicable 4 -->
+      <audio
+        id="inapplicable4"
+        src="/test/assets/moon-speech.mp3"
+        preload="none"
+      ></audio>
+      <!-- inapplicable 5 -->
+      <video id="inapplicable5" preload="none">
+        <source src="/test/assets/video.webm" type="video/webm" />
+        <source src="/test/assets/video.mp4" type="video/mp4" />
+      </video>
     </div>
 
     <div id="mocha"></div>
diff --git a/test/integration/full/no-autoplay-audio/no-autoplay-audio.js b/test/integration/full/no-autoplay-audio/no-autoplay-audio.js
index 87b573b9c8..af4d722ca5 100644
--- a/test/integration/full/no-autoplay-audio/no-autoplay-audio.js
+++ b/test/integration/full/no-autoplay-audio/no-autoplay-audio.js
@@ -17,16 +17,18 @@ describe('landmark-no-duplicate-main test failure', function () {
   });
 
   describe('passes', function () {
-    it('should find 5', function () {
+    it('should find 7', function () {
       assert.isDefined(results.passes);
 
       var passNodes = results.passes[0].nodes;
-      assert.lengthOf(passNodes, 5);
+      assert.lengthOf(passNodes, 7);
       assert.deepEqual(passNodes[0].target, ['#pass1']);
       assert.deepEqual(passNodes[1].target, ['#pass2']);
       assert.deepEqual(passNodes[2].target, ['#pass3']);
       assert.deepEqual(passNodes[3].target, ['#pass4']);
       assert.deepEqual(passNodes[4].target, ['#pass5']);
+      assert.deepEqual(passNodes[5].target, ['#pass6']);
+      assert.deepEqual(passNodes[6].target, ['#pass7']);
     });
   });
 
@@ -39,15 +41,17 @@ describe('landmark-no-duplicate-main test failure', function () {
   });
 
   describe('incomplete', function () {
-    it('should find 4', function () {
+    it('should find 6', function () {
       assert.isDefined(results.incomplete);
 
       var incompleteNodes = results.incomplete[0].nodes;
-      assert.lengthOf(incompleteNodes, 4);
+      assert.lengthOf(incompleteNodes, 6);
       assert.deepEqual(incompleteNodes[0].target, ['#incomplete1']);
       assert.deepEqual(incompleteNodes[1].target, ['#incomplete2']);
       assert.deepEqual(incompleteNodes[2].target, ['#incomplete3']);
       assert.deepEqual(incompleteNodes[3].target, ['#incomplete4']);
+      assert.deepEqual(incompleteNodes[4].target, ['#incomplete5']);
+      assert.deepEqual(incompleteNodes[5].target, ['#incomplete6']);
     });
   });
 });