Set up react-axe to report accessibility issues automatically while developing

package-lock.json

@@ -483,6 +483,12 @@
       "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
       "dev": true
     },
+    "axe-core": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.2.2.tgz",
+      "integrity": "sha512-gAy4kMSPpuRJV3mwictJqlg5LhE84Vw2CydKdC4tvrLhR6+G3KW51zbL/vYujcLA2jvWOq3HMHrVeNuw+mrLVA==",
+      "dev": true
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -10682,6 +10688,16 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-axe": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-axe/-/react-axe-3.1.0.tgz",
+      "integrity": "sha512-aUkgYpYVFhQ9hAF3DkvUqWTN5eOIN5K+WqQItgBzSbL5MpJssnd2hN09QoloYEAo6BhBsV0k0O9S0tNquyni2w==",
+      "dev": true,
+      "requires": {
+        "axe-core": "^3.0.0",
+        "requestidlecallback": "^0.3.0"
+      }
+    },
     "react-dom": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
@@ -11194,6 +11210,12 @@
         "tough-cookie": ">=2.3.3"
       }
     },
+    "requestidlecallback": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
+      "integrity": "sha1-b7dOBzP5DfP6pIOPn2oqX5t0KsU=",
+      "dev": true
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

package.json

@@ -77,6 +77,7 @@
     "gulp-util": "~3.0.8",
     "jest": "^22.0.3",
     "npm-run-all": "^4.1.5",
+    "react-axe": "^3.1.0",
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.3.0",
     "stylelint": "^8.4.0",

wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js

@@ -1,5 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { initExplorer, Icon, Portal } from 'wagtail-client';
 
+if (process.env.NODE_ENV === 'development') {
+  // Run react-axe in development only, so it does not affect performance
+  // in production, and does not break unit tests either.
+  // eslint-disable-next-line global-require
+  const axe = require('react-axe');
+  axe(React, ReactDOM, 1000);
+}
+
 // Expose components as globals for third-party reuse.
 window.wagtail.components = {
   Icon,