disable some incorrect a11y tests

.github/workflows/node-ci.yml

@@ -21,7 +21,7 @@ jobs:
         run: yarn check:i18n-en-fr
       - name: Type check
         run: yarn typescript
-      - name: Build Storybook
+      - name: Run unit tests
         run: yarn unit
       - name: Build Storybook
         run: yarn build-storybook --quiet

.storybook/preview.ts

@@ -4,6 +4,7 @@ import locationFieldHandlers from "../packages/location-field/src/mocks/handlers
 import itineraryBodyHandlers from "../packages/itinerary-body/src/__mocks__/handlers";
 import geocoderHandlers from "../packages/geocoder/src/test-fixtures/handlers";
 import tileLayerHandlers from '../packages/otp2-tile-overlay/src/mocks/handlers'
+import parameters from './previewParameters'
 
 import { reactIntl } from './react-intl.ts';
 import { Preview } from "@storybook/react";
@@ -20,42 +21,7 @@ if (typeof global.process === "undefined") {
   worker.start({ onUnhandledRequest: "bypass" });
 }
 
-export const parameters = {
-  a11y: {
-    config: {
-      rules: [
-        {
-          //  moved to technical backlog
-          id: "aria-required-parent",
-          reviewOnFail: true,
-        },
-        {
-          // Appears to be a story bug
-          id: "duplicate-id",
-          reviewOnFail: true
-        },
-        {
-          // Appears to be a story bug
-          id: "duplicate-id-aria",
-          reviewOnFail: true
-        },
-        {
-          // Not really applicable to stories and causes problems with the WithMap decorator
-          id: "landmark-unique", 
-          enabled: false
-        }
-      ],
-    },
-  },
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  reactIntl
-};
+export { parameters }
 
 const preview: Preview = {
   decorators: [mockDateDecorator],

.storybook/previewParameters.ts

@@ -0,0 +1,40 @@
+import { reactIntl } from './react-intl.ts';
+
+const parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          //  moved to technical backlog
+          id: "aria-required-parent",
+          reviewOnFail: true,
+        },
+        {
+          // Appears to be a story bug
+          id: "duplicate-id",
+          reviewOnFail: true
+        },
+        {
+          // Appears to be a story bug
+          id: "duplicate-id-aria",
+          reviewOnFail: true
+        },
+        {
+          // Not really applicable to stories and causes problems with the WithMap decorator
+          id: "landmark-unique", 
+          enabled: false
+        }
+      ],
+    },
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  reactIntl
+};
+
+export default parameters;

.storybook/test-runner.ts

@@ -1,6 +1,7 @@
-import type { TestRunnerConfig } from '@storybook/test-runner';
-import { injectAxe, checkA11y } from 'axe-playwright';
+import { getStoryContext, TestContext, type TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y, configureAxe } from 'axe-playwright';
 import { Page } from 'playwright-core'
+import parameters from './previewParameters';
 
 const ONLY_RUN = process.env.ONLY_RUN
 
@@ -10,7 +11,15 @@ async function runSnapshots(page: Page) {
   expect(innerHTML).toMatchSnapshot();
 }
 
-async function runA11yTest(page: Page) {
+async function runA11yTest(page: Page, context: TestContext) {
+  // Get the entire context of a story, including parameters, args, argTypes, etc.
+  const storyContext = await getStoryContext(page, context);
+
+  const globalOverrides = parameters.a11y
+  // Apply story-level a11y rules
+  await configureAxe(page, {
+    rules: [...storyContext.parameters?.a11y?.config?.rules, ...globalOverrides.config.rules],
+  });
   await checkA11y(page, '#storybook-root', {
     detailedReport: true,
     detailedReportOptions: {
@@ -29,7 +38,7 @@ const config: TestRunnerConfig = {
       await runSnapshots(page);
     }
     if (!ONLY_RUN || ONLY_RUN === "A11Y") {
-      await runA11yTest(page);
+      await runA11yTest(page, context);
     }
   },
 };

package.json

@@ -98,7 +98,6 @@
     "yaml-sort": "^2.0.0"
   },
   "scripts": {
-    "a11y-test": "yarn build-storybook && jest --testPathIgnorePatterns packages storybook",
     "bootstrap": "lerna bootstrap --use-workspaces",
     "build:cjs": "lerna exec --parallel -- babel --extensions '.js,.ts,.tsx' --ignore **/*.story.js,**/*.story.ts,**/*.story.d.ts,**/*.story.tsx,**/*.spec.js,**/*.spec.ts,**/*.test.js,**/*.test.ts,**/__tests__/**,**/__unpublished__/** --root-mode upward --source-maps true src -d lib",
     "build:esm": "lerna exec --parallel -- cross-env BABEL_ENV=esm babel --extensions '.js,.ts,.tsx' --ignore **/*.story.js,**/*.story.ts,**/*.story.d.ts,**/*.story.tsx,**/*.spec.js,**/*.spec.ts,**/*.test.js,**/*.test.ts,**/__tests__/**,**/__unpublished__/** --root-mode upward --source-maps true src -d esm",

packages/itinerary-body/src/stories/OtpRrItineraryBody.story.tsx

@@ -94,7 +94,10 @@ function OtpRRItineraryBodyWrapper({
 export default {
   title: "ItineraryBody/otp-react-redux",
   component: ItineraryBody,
-  parameters: { date: new Date("March 10, 2021 10:00:00") }
+  parameters: {
+    date: new Date("March 10, 2021 10:00:00"),
+    a11y: { config: { rules: [{ id: "link-in-text-block", enabled: false }] } }
+  }
 } as Meta;
 
 export const WalkOnlyItinerary = (): ReactElement => (

packages/itinerary-body/src/stories/OtpUiItineraryBody.story.tsx

@@ -38,7 +38,10 @@ const a11yOverrideParameters = {
 export default {
   title: "ItineraryBody/otp-ui",
   component: ItineraryBody,
-  parameters: { date: new Date("March 10, 2021 10:00:00") }
+  parameters: {
+    date: new Date("March 10, 2021 10:00:00"),
+    a11y: { config: { rules: [{ id: "link-in-text-block", enabled: false }] } }
+  }
 } as Meta;
 
 export const WalkOnlyItinerary = (): ReactElement => (

packages/location-field/src/stories/Desktop.story.tsx

@@ -39,8 +39,12 @@ const invalidKeyGeocoderConfig = {
 const a11yOverrideParameters = {
   a11y: {
     config: {
-      // This is a story issue, not a production issue
-      rules: [{ id: "label", enabled: false }]
+      rules: [
+        // This is a story issue, not a production issue
+        { id: "label", enabled: false },
+        // The options don't appear until click
+        { id: "aria-required-children", enabled: false }
+      ]
     }
   }
 };

packages/stop-viewer-overlay/src/StopViewerOverlay.story.tsx

@@ -36,7 +36,10 @@ const WithCustomMarker = (): JSX.Element => (
 const disableA11yParameters = {
   a11y: {
     config: {
-      rules: [{ id: "aria-allowed-attr", enabled: false }]
+      rules: [
+        { id: "aria-allowed-attr", enabled: false },
+        { id: "aria-prohibited-attr", enabled: false }
+      ]
     }
   }
 };