Storybook 6.4 support

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [breaking] Only support Storybook 6.4 and up [#46](https://github.com/chanzuckerberg/axe-storybook-testing/pull/46)
+
 ## 4.1.3 (2021-10-29)
 
 - [fix] Fix for issue [#44](https://github.com/chanzuckerberg/axe-storybook-testing/issues/44). Prevent the command from blowing up when addon parameters cannot be serialized [#45](https://github.com/chanzuckerberg/axe-storybook-testing/pull/40)

README.md

@@ -8,7 +8,7 @@ If there are any violations, information about them will be printed, and the com
 
 ## Table of contents
 
-- [Project goals](#project-goals)
+- [Minimum requirements](#minimum-requirements)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Options](#options)
@@ -18,15 +18,11 @@ If there are any violations, information about them will be printed, and the com
 - [Developing](#developing)
 - [Inspiration](#inspiration)
 
-## Project goals
+## Minimum requirements
 
-These will be used to determine development work and direction, and triage bugs and pull requests.
-
-1. Run axe-core on Storybook stories written in [Component Story Format](https://storybook.js.org/docs/react/api/csf).
-2. Run on CI as automated accessibility tests.
-3. Also be useful for humans to run on local machines.
-3. Have reasonable performance. It doesn't have to maximize speed, but needs to be fast enough that people will actually use it.
-4. Allow people to adopt incrementally. For example, by allowing rules to be disabled.
+- Node 12
+- Storybook 6.4 (for previous versions of Storybook, use axe-storybook-testing v4.1.3)
+- axe-core 4.0
 
 ## Installation
 

demo/.storybook/main.js

@@ -1,10 +1,6 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+  "stories": ["../src"],
   "addons": [
-    "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
   ],

demo/.storybook/preview.js

@@ -1,4 +1,3 @@
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+}

demo/package.json

@@ -17,11 +17,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/addon-a11y": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/react": "^6.4.0",
     "react-is": "^17.0.2"
   }
 }

demo/src/delays.stories.jsx

@@ -16,56 +16,66 @@ function Delay({ children, delay }) {
   return show ? children : null;
 }
 
-export const ShortDelayAndPass = () => (
-  <Delay delay={10}>
-    <button id="hi">hello world</button>
-  </Delay>
-);
-ShortDelayAndPass.parameters = {
-  axe: { waitForSelector: '#hi' },
+export const ShortDelayAndPass = {
+  render: () => (
+    <Delay delay={10}>
+      <button id="hi">hello world</button>
+    </Delay>
+  ),
+  parameters: {
+    axe: { waitForSelector: '#hi' },
+  },
 };
 
-export const ShortDelayAndFail = () => (
-  <Delay delay={10}>
-    <button id="hi" role="wut-the-wut">hello world</button>
-  </Delay>
-);
-ShortDelayAndFail.parameters = {
-  axe: { waitForSelector: '#hi' },
+export const ShortDelayAndFail = {
+  render: () => (
+    <Delay delay={10}>
+      <button id="hi" role="wut-the-wut">hello world</button>
+    </Delay>
+  ),
+  parameters: {
+    axe: { waitForSelector: '#hi' },
+  },
 };
 
-export const MediumDelayAndPass = () => (
-  <Delay
-    // Should be UNDER the test timeout, which is 2000ms by default.
-    delay={500}
-  >
-    <button id="hi">hello world</button>
-  </Delay>
-);
-MediumDelayAndPass.parameters = {
-  axe: { waitForSelector: '#hi' },
+export const MediumDelayAndPass = {
+  render: () => (
+    <Delay
+      // Should be UNDER the test timeout, which is 2000ms by default.
+      delay={500}
+    >
+      <button id="hi">hello world</button>
+    </Delay>
+  ),
+  parameters: {
+    axe: { waitForSelector: '#hi' },
+  },
 };
 
-export const MediumDelayAndFail = () => (
-  <Delay
-    // Should be UNDER the test timeout, which is 2000ms by default.
-    delay={500}
-  >
-    <button id="hi" role="wut-the-wut">hello world</button>
-  </Delay>
-);
-MediumDelayAndFail.parameters = {
-  axe: { waitForSelector: '#hi' },
+export const MediumDelayAndFail = {
+  render: () => (
+    <Delay
+      // Should be UNDER the test timeout, which is 2000ms by default.
+      delay={500}
+    >
+      <button id="hi" role="wut-the-wut">hello world</button>
+    </Delay>
+  ),
+  parameters: {
+    axe: { waitForSelector: '#hi' },
+  },
 };
 
-export const LongDelayAndTimeout = () => (
-  <Delay
-    // Should be OVER the test timeout, which is 2000ms by default.
-    delay={3000}
-  >
-    <button id="hi">hello world</button>
-  </Delay>
-);
-LongDelayAndTimeout.parameters = {
-  axe: { waitForSelector: '#hi' },
+export const LongDelayAndTimeout = {
+  render: () => (
+    <Delay
+      // Should be OVER the test timeout, which is 2000ms by default.
+      delay={3000}
+    >
+      <button id="hi">hello world</button>
+    </Delay>
+  ),
+  parameters: {
+    axe: { waitForSelector: '#hi' },
+  },
 };

demo/src/simple.stories.jsx

@@ -5,32 +5,42 @@ export default {
   component: 'button',
 };
 
-export const NoFailures = () => <button>hello world</button>;
-export const FailureNoDiscernibleText = () => <button></button>;
-export const FailureColorContrast = () => <button style={{ backgroundColor: 'red', color: 'hotpink' }}>hello world</button>;
-export const FailureNoDiscernibleTextAndInvalidRole = () => <button role="wut-the-wut"></button>;
+export const NoFailures = { render: () => <button>hello world</button> };
+export const FailureNoDiscernibleText = { render: () => <button></button> };
+export const FailureColorContrast = { render: () => <button style={{ backgroundColor: 'red', color: 'hotpink' }}>hello world</button> };
+export const FailureNoDiscernibleTextAndInvalidRole = { render: () => <button role="wut-the-wut"></button> };
 
-export const FailureColorContrastSkipped = FailureColorContrast.bind(null);
-FailureColorContrastSkipped.parameters = {
-  axe: { skip: true },
+export const FailureColorContrastSkipped = {
+  ...FailureColorContrast,
+  parameters: {
+    axe: { skip: true },
+  },
 };
 
-export const FailureNoDiscernibleTextAndInvalidRoleSkipped = FailureNoDiscernibleTextAndInvalidRole.bind(null);
-FailureNoDiscernibleTextAndInvalidRoleSkipped.parameters = {
-  axe: { skip: true },
+export const FailureNoDiscernibleTextAndInvalidRoleSkipped = {
+  ...FailureNoDiscernibleTextAndInvalidRole,
+  parameters: {
+    axe: { skip: true },
+  },
 };
 
-export const FailureColorContrastDisabledRule = FailureColorContrast.bind(null);
-FailureColorContrastDisabledRule.parameters = {
-  axe: { disabledRules: ['color-contrast'] },
+export const FailureColorContrastDisabledRule = {
+  ...FailureColorContrast,
+  parameters: {
+    axe: { disabledRules: ['color-contrast'] },
+  },
 };
 
-export const FailureNoDiscernibleTextAndInvalidRoleDisabledOneRule = FailureNoDiscernibleTextAndInvalidRole.bind(null);
-FailureNoDiscernibleTextAndInvalidRoleDisabledOneRule.parameters = {
-  axe: { disabledRules: ['aria-roles'] },
+export const FailureNoDiscernibleTextAndInvalidRoleDisabledOneRule = {
+  ...FailureNoDiscernibleTextAndInvalidRole,
+  parameters: {
+    axe: { disabledRules: ['aria-roles'] },
+  },
 };
 
-export const FailureNoDiscernibleTextAndInvalidRoleDisabledRules = FailureNoDiscernibleTextAndInvalidRole.bind(null);
-FailureNoDiscernibleTextAndInvalidRoleDisabledRules.parameters = {
-  axe: { disabledRules: ['aria-roles', 'button-name'] },
+export const FailureNoDiscernibleTextAndInvalidRoleDisabledRules = {
+  ...FailureNoDiscernibleTextAndInvalidRole,
+  parameters: {
+    axe: { disabledRules: ['aria-roles', 'button-name'] },
+  },
 };