Merge pull request #19114 from storybookjs/norbert/sb-574-addon-a11y

Addon-a11y: Move stories into addon

code/addons/a11y/src/a11yRunner.ts

@@ -69,9 +69,7 @@ const getParams = async (storyId: string): Promise<A11yParameters> => {
   return (
     parameters.a11y || {
       config: {},
-      options: {
-        restoreScroll: true,
-      },
+      options: {},
     }
   );
 };

code/addons/a11y/template/stories/parameters.stories.ts

@@ -0,0 +1,63 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Html,
+  args: {
+    contents: '<button>Click Me!</button>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Options = {
+  args: {
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
+  },
+  parameters: {
+    a11y: {
+      config: {},
+      options: {
+        checks: {
+          'color-contrast': { enabled: false },
+        },
+      },
+    },
+  },
+};
+
+export const Config = {
+  args: {
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'avoid-inline-spacing', options: {} }],
+        disableOtherRules: true,
+      },
+      options: {},
+    },
+  },
+};
+
+export const Targetted = {
+  args: {
+    contents: '<button class="custom-target">Click Me!</button>',
+  },
+  parameters: {
+    a11y: {
+      element: '.custom-target',
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    a11y: {
+      disable: true,
+    },
+  },
+};

code/addons/a11y/template/stories/tests.stories.ts

@@ -0,0 +1,65 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Html,
+  args: {
+    contents: '',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Violations = {
+  args: {
+    contents: `
+      <div>
+        <p>empty heading</p>
+        <h1></h1>
+      </div>
+      <div>
+        <p>empty button</p>
+        <button></button>
+      </div>
+      <div>
+        <p>low contrast</p>
+        <button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>
+      </div>
+      <div>
+        <p>missing label</p>
+        <label><input /></label>
+      </div>
+      <div>
+        <p>missing alt</p>
+        <img src="https://storybook.js.org/images/placeholders/350x150.png" />
+      </div>
+    `,
+  },
+};
+
+export const Passes = {
+  args: {
+    contents: `
+      <div>
+        <p>heading</p>
+        <h1>heading 1</h1>
+      </div>
+      <div>
+        <p>button</p>
+        <button>Click me!</button>
+      </div>
+      <div>
+        <p>contrast</p>
+        <button style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">Click me!</button>
+      </div>
+      <div>
+        <p>label</p>
+        <label><span>label</span><input /></label>
+      </div>
+      <div>
+        <p>alt</p>
+        <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="placeholder" />
+      </div>
+    `,
+  },
+};

code/cypress/integration/navigation.spec.ts

@@ -28,13 +28,13 @@ describe('Routing', () => {
   it('should navigate to story addons-a11y-basebutton--default', () => {
     visit('official-storybook');
 
-    cy.get('#addons-a11y-basebutton--label').click({ force: true });
-    cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
+    cy.get('#addons-controls--basic').click({ force: true });
+    cy.url().should('include', 'path=/story/addons-controls--basic');
   });
 
   it('should directly visit a certain story and render correctly', () => {
-    visit('official-storybook/?path=/story/addons-a11y-basebutton--label');
+    visit('official-storybook/?path=/story/basics-actionbar--single-item');
 
-    cy.getStoryElement().should('contain.text', 'Testing the a11y addon');
+    cy.getStoryElement().should('contain.text', 'Clear');
   });
 });

code/examples/html-kitchen-sink/.storybook/preview.js

@@ -1,11 +1,4 @@
 export const parameters = {
-  a11y: {
-    config: {},
-    options: {
-      checks: { 'color-contrast': { options: { noScroll: true } } },
-      restoreScroll: true,
-    },
-  },
   docs: {
     iframeHeight: '200px',
   },

code/examples/official-storybook/preview.js

@@ -173,13 +173,6 @@ export const decorators = [
 
 export const parameters = {
   exportedParameter: 'exportedParameter',
-  a11y: {
-    config: {},
-    options: {
-      checks: { 'color-contrast': { options: { noScroll: true } } },
-      restoreScroll: true,
-    },
-  },
   actions: { argTypesRegex: '^on.*' },
   options: {
     storySort: (a, b) =>