Fix wcag github action mapbox issues (#337)

paired with the changes in this [PR](yext/slapshot-reusable-workflows#22) in WCAG workflow, this PR updates the WCAG github action in the repo to pass in the mapbox key. Also updated the wcag test to exclude checking elements coming from mapbox canvas container as any potential violations coming from there is outside of our repo's control.

WCAG github action also run on pull request to feature branch now.

J=SLAP-2458
TEST=auto

see that WCAG github action now passes

.github/workflows/wcag_test.yml

@@ -2,12 +2,13 @@ name: WCAG tests
 
 on:
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, feature/*]
 
 jobs:
   call_wcag_test:
     uses: yext/slapshot-reusable-workflows/.github/workflows/wcag_test.yml@v1
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
     with:
       build_script: ./tests/scripts/start-storybook.sh

.storybook/test-runner.ts

@@ -1,28 +1,36 @@
 import { injectAxe, checkA11y } from 'axe-playwright';
 import { Page } from 'playwright-core';
 import { runOnly } from './wcagConfig';
+import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
  */
-const renderFunctions = {
+const renderFunctions: TestRunnerConfig = {
   async preRender(page: Page) {
     await injectAxe(page);
   },
-  async postRender(page: Page, context) {
-    await checkA11y(page, '#root', {
-      axeOptions: {
-        runOnly,
-        rules: {
-          'color-contrast': { enabled: context.name !== 'Loading' }
-        },
-      },
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
+  async postRender(page: Page, context: TestContext) {
+    await checkA11y(
+      page,
+      {
+        include: ['#root'],
+        exclude: ['#root .mapboxgl-canvas-container'],
       },
-    });
+      {
+        axeOptions: {
+          runOnly,
+          rules: {
+            'color-contrast': { enabled: context.name !== 'Loading' },
+          },
+        },
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      }
+    );
   },
 };