use a queue of pending audits to run on idle

Author: Juliette Pretot

AuditQueue.js

@@ -0,0 +1,54 @@
+import { rIC as requestIdleCallback } from 'idlize/idle-callback-polyfills.mjs'
+
+export default class AuditQueue {
+  constructor() {
+    this._pendingAudits = []
+    this._isRunning = false
+
+    this.run = this.run.bind(this)
+    this._scheduleAudits = this._scheduleAudits.bind(this)
+  }
+  run(getAuditResult) {
+    // Returns a promise that resolves to the result of the auditCallback.
+    return new Promise((resolve, reject) => {
+      const runAudit = async () => {
+        try {
+          const result = await getAuditResult()
+          resolve(await result)
+        } catch (error) {
+          reject(error)
+        }
+      }
+
+      this._pendingAudits.push(runAudit)
+      if (!this._isRunning) this._scheduleAudits()
+    })
+  }
+  _scheduleAudits() {
+    this._isRunning = true
+    requestIdleCallback(async IdleDeadline => {
+      // Run pending audits as long as they exist & we have time.
+      while (
+        this._pendingAudits.length > 0 &&
+        IdleDeadline.timeRemaining() > 0
+      ) {
+        // Only run one audit at a time, as axe-core does not allow for
+        // concurrent runs.
+        // Ref: https://github.com/dequelabs/axe-core/issues/1041
+        const runAudit = this._pendingAudits[0]
+        await runAudit()
+
+        // Once an audit has run, remove it from the queue.
+        this._pendingAudits.shift()
+      }
+
+      if (this._pendingAudits.length > 0) {
+        // If pending audits remain, schedule them for the next idle phase.
+        this._scheduleAudits()
+      } else {
+        // The queue is empty, we're no longer running
+        this._isRunning = false
+      }
+    })
+  }
+}

AxeObserver.js

@@ -1,18 +1,5 @@
 import axeCore from 'axe-core'
-import PQueue from 'p-queue'
-
-// If requestIdleCallback is not supported, we fallback to setTimeout
-// Ref: https://developers.google.com/web/updates/2015/08/using-requestidlecallback
-const requestIdleCallback =
-  window.requestIdleCallback ||
-  function(callback) {
-    setTimeout(callback, 1)
-  }
-
-// axe-core cannot be run concurrently. There are no plans to implement this
-// functionality or a queue. Hence we use PQueue to queue calls ourselves.
-// Ref: https://github.com/storybookjs/storybook/pull/4086
-const axeQueue = new PQueue({ concurrency: 1 })
+import AuditQueue from './AuditQueue.js'
 
 // The AxeObserver class takes a violationsCallback, which is invoked with an
 // array of observed violations.
@@ -45,15 +32,18 @@ export default class AxeObserver {
 
     this.observe = this.observe.bind(this)
     this.disconnect = this.disconnect.bind(this)
-    this._scheduleAudit = this._scheduleAudit.bind(this)
+    this._auditNode = this._auditNode.bind(this)
 
     this._alreadyReportedIncidents = new Set()
     this._mutationObserver = new window.MutationObserver(mutationRecords => {
       mutationRecords.forEach(mutationRecord => {
-        this._scheduleAudit(mutationRecord.target)
+        this._auditNode(mutationRecord.target)
       })
     })
 
+    // AuditQueue sequentially runs audits when the browser is idle.
+    this._auditQueue = new AuditQueue()
+
     // Allow for registering plugins etc
     if (typeof axeInstanceCallback === 'function') {
       axeCoreInstanceCallback(axeCore)
@@ -73,27 +63,17 @@ export default class AxeObserver {
     })
 
     // run initial audit on the whole targetNode
-    this._scheduleAudit(targetNode)
+    this._auditNode(targetNode)
   }
   disconnect() {
     this.mutationObserver.disconnect()
   }
-  async _scheduleAudit(node) {
-    const response = await axeQueue.add(
-      () =>
-        new Promise(resolve => {
-          requestIdleCallback(
-            () => {
-              // Since audits are scheduled asynchronously, it can happen that
-              // the node is no longer connected. We cannot analyze it then.
-              node.isConnected ? axeCore.run(node).then(resolve) : resolve(null)
-            },
-            // Time after which an audit will be performed, even if it may
-            // negatively affect performance.
-            { timeout: 1000 }
-          )
-        })
-    )
+  async _auditNode(node) {
+    const response = await this._auditQueue.run(async () => {
+      // Since audits are scheduled asynchronously, it can happen that
+      // the node is no longer connected. We cannot analyze it then.
+      return node.isConnected ? axeCore.run(node) : null
+    })
 
     if (!response) return
 

README.MD

@@ -46,7 +46,7 @@ The `AxeObserver` constructor takes two parameters:
   - `axeCoreConfiguration` (optional). A configuration object for axe-core. Read about the object here in the [axe-core docs](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) and see the `agnostic-axe` source code for the default options used.
   - `axeCoreInstanceCallback` (optional). A function that is invoked with the instance of [axe-core](https://github.com/dequelabs/axe-core) used by module. It can be used for complex interactions with the [axe-core API](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md) such as registering plugins.
 
-The `AxeObserver.observe` method takes two parameters:
+The `AxeObserver.observe` method takes one parameter:
 
 - `targetNode` (required). The node that should be observed & analyzed.
 

package-lock.json

@@ -43,6 +43,6 @@
   },
   "dependencies": {
     "axe-core": "^3.4.0",
-    "p-queue": "^6.2.1"
+    "idlize": "^0.1.1"
   }
 }