chore: use @axe-core/react in dev

Related to bpmn-io/internal-docs#909

client/package.json

@@ -71,6 +71,7 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "@axe-core/react": "^4.9.1",
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",

client/src/index.js

@@ -74,6 +74,11 @@ const globals = {
 
 async function render() {
 
+  if (process.env.NODE_ENV !== 'production') {
+    const { loadA11yHelper } = await import('./util/a11y');
+    await loadA11yHelper();
+  }
+
   // load plugins
   plugins.bindHelpers(window);
 

client/src/util/a11y.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DEFAULT_TAGS = [ 'wcag2a', 'wcag21a' ];
+
+export async function loadA11yHelper() {
+
+  // TODO(@barmac): remove or replace when upgraded to React 18
+  const axe = await import('@axe-core/react');
+  axe.default(React, ReactDOM, 1000, {
+    runOnly: DEFAULT_TAGS
+  });
+}