Add handling for known axe-core conflicts

Author: booc0mtaco

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [fix] Add handling for known axe-core conflicts [#103](https://github.com/chanzuckerberg/axe-storybook-testing/pull/103)
+
 ## 8.2.1 (2024-10-21)
 
 - [fix] Simplify the promise queue implementation [#102](https://github.com/chanzuckerberg/axe-storybook-testing/pull/102)

src/browser/AxePage.ts

@@ -59,6 +59,10 @@ export function analyze(
   });
 }
 
+/**
+ * (In Browser Context)
+ *
+ */
 function runAxe({
   config,
   context,
@@ -83,6 +87,7 @@ function runAxe({
       window.axe.configure(config);
     }
 
+    // API: https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axerun
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore This function executes in a browser context.
     return window.axe.run(context || document, options);
@@ -106,6 +111,8 @@ export function getRunOptions(
 }
 
 /**
+ * (In Browser Context)
+ *
  * Add a promise queue so we can ensure only one promise runs at a time.
  *
  * Used to prevent concurrent runs of `axe.run`, which breaks (see https://github.com/dequelabs/axe-core/issues/1041).

src/browser/StorybookPage.ts

@@ -116,7 +116,7 @@ async function fetchStoriesFromWindow(): Promise<StorybookStory[]> {
 
 /**
  * Abuse Storybook's internal APIs to render a story without requiring a page reload (which would
- * be slow).
+ * be slow). Also set up globals for any values needed for the running tests.
  *
  * Doing so is brittle, and updates to Storybook could break this. The trade off is that we don't
  * have to figure out how to process stories with Webpack - Storybook handles that for us.
@@ -134,10 +134,19 @@ function emitSetCurrentStory(id: string) {
     );
   }
 
-  return new Promise((resolve) => {
-    // @ts-expect-error Access the protected "channel", so we can send stuff through it.
-    const channel = storybookPreview.channel;
+  // @ts-expect-error Access the protected "channel", so we can send stuff through it.
+  const channel = storybookPreview.channel;
 
+  // update global to disable known addons containing `axe-core`
+  channel.emit('updateGlobals', {
+    globals: {
+      a11y: {
+        manual: true,
+      },
+    },
+  });
+
+  return new Promise((resolve) => {
     channel.emit('setCurrentStory', {
       storyId: id,
       viewMode: 'story',