Merge main (v3.0.3) into develop

.github/workflows/run-tests.yml

@@ -34,7 +34,7 @@ jobs:
           "@swc/core-win32-x64-msvc"
         npx playwright install
         npm run build
-      node_matrix: '["18.x"]'
+      node_matrix: '["20.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
@@ -62,7 +62,7 @@ jobs:
           "@swc/core-win32-x64-msvc"
         npx playwright install
         npm run build
-      node_matrix: '["18.x"]'
+      node_matrix: '["20.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
@@ -86,6 +86,6 @@ jobs:
           "@swc/core-win32-x64-msvc"
         npx playwright install
         npm run build
-      node_matrix: '["18.x"]'
+      node_matrix: '["20.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/update_snapshots.yml

@@ -12,7 +12,7 @@ jobs:
           token: ${{ secrets.BOT_REPO_SCOPED_TOKEN }}
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
       - run: npm run build

.storybook/wcag/test-runner.ts

@@ -3,6 +3,49 @@ import { Page } from 'playwright-core';
 import { runOnly } from '../wcagConfig';
 import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
+const AXE_ALREADY_RUNNING_ERROR = 'Axe is already running';
+const MAX_AXE_RETRIES = 3;
+const AXE_RETRY_DELAY_MS = 250;
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// Retry if errors from Axe already running to decrease flakiness
+const runA11yCheck = async (page: Page, context: TestContext) => {
+  for (let attempt = 1; attempt <= MAX_AXE_RETRIES; attempt++) {
+    try {
+      await checkA11y(
+        page,
+        {
+          exclude: [
+            '#root .mapboxgl-canvas-container',
+            '.mapboxgl-marker',
+            '.mapboxgl-popup-close-button'
+          ],
+        },
+        {
+          axeOptions: {
+            runOnly,
+            rules: {
+              'color-contrast': { enabled: context.name !== 'Loading' },
+            },
+          },
+          detailedReport: true,
+          detailedReportOptions: {
+            html: true,
+          },
+        }
+      );
+      return;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (!message.includes(AXE_ALREADY_RUNNING_ERROR) || attempt === MAX_AXE_RETRIES) {
+        throw error;
+      }
+      await sleep(AXE_RETRY_DELAY_MS * attempt);
+    }
+  }
+};
+
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
@@ -12,28 +55,7 @@ const renderFunctions: TestRunnerConfig = {
     await injectAxe(page);
   },
   async postVisit(page: Page, context: TestContext) {
-    await checkA11y(
-      page,
-      {
-        exclude: [
-          '#root .mapboxgl-canvas-container',
-          '.mapboxgl-marker',
-          '.mapboxgl-popup-close-button'
-        ],
-      },
-      {
-        axeOptions: {
-          runOnly,
-          rules: {
-            'color-contrast': { enabled: context.name !== 'Loading' },
-          },
-        },
-        detailedReport: true,
-        detailedReportOptions: {
-          html: true,
-        },
-      }
-    );
+    await runA11yCheck(page, context);
   },
 };