From 4ad0d795a6d4e0b437cdeb5f04080090968f4eff Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 5 Sep 2022 15:30:49 +0200
Subject: [PATCH 1/9] move all a11y stories to be renderer agnostic into
 addons/a11y/template/stories

---
 .../template/stories/parameters.stories.ts    | 63 +++++++++++++++++++
 .../html-kitchen-sink/.storybook/preview.js   |  7 ---
 code/examples/official-storybook/preview.js   |  7 ---
 .../stories/addon-a11y/base-button.stories.js | 30 ---------
 .../stories/addon-a11y/button.stories.js      | 19 ------
 .../stories/addon-a11y/form.stories.js        | 33 ----------
 .../stories/addon-a11y/highlight.stories.js   | 56 -----------------
 .../stories/addon-a11y/image.stories.js       | 33 ----------
 .../stories/addon-a11y/parameters.stories.js  | 38 -----------
 .../stories/addon-a11y/typography.stories.js  | 48 --------------
 .../server-kitchen-sink/.storybook/preview.js |  7 ---
 .../.storybook/preview.js                     |  7 ---
 12 files changed, 63 insertions(+), 285 deletions(-)
 create mode 100644 code/addons/a11y/template/stories/parameters.stories.ts
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/base-button.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/button.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/form.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/highlight.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/image.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/parameters.stories.js
 delete mode 100644 code/examples/official-storybook/stories/addon-a11y/typography.stories.js

diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts
new file mode 100644
index 000000000000..acdf0d143c2c
--- /dev/null
+++ b/code/addons/a11y/template/stories/parameters.stories.ts
@@ -0,0 +1,63 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {};
+
+export const Violation = {
+  args: {
+    // empty on purpose to get a button with no text
+    children: '',
+  },
+};
+
+export const Checks = {
+  parameters: {
+    a11y: {
+      config: {},
+      options: {
+        checks: {
+          'color-contrast': { options: { noScroll: true } },
+        },
+        restoreScroll: true,
+      },
+    },
+  },
+};
+
+export const Targetted = {
+  parameters: {
+    a11y: {
+      element: 'button',
+    },
+  },
+};
+
+export const Blank = {
+  parameters: {
+    a11y: {
+      config: {
+        disableOtherRules: true,
+        // @ts-ignore
+        rules: [],
+      },
+      options: {},
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    a11y: {
+      disable: true,
+    },
+  },
+};
diff --git a/code/examples/html-kitchen-sink/.storybook/preview.js b/code/examples/html-kitchen-sink/.storybook/preview.js
index 8bf7046aef32..9952d3d77794 100644
--- a/code/examples/html-kitchen-sink/.storybook/preview.js
+++ b/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',
   },
diff --git a/code/examples/official-storybook/preview.js b/code/examples/official-storybook/preview.js
index e4e0ef7fa7d9..d9a9ffa5ed45 100644
--- a/code/examples/official-storybook/preview.js
+++ b/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) =>
diff --git a/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js
deleted file mode 100644
index 94d91b5b9ed5..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/base-button.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import BaseButton from '../../components/BaseButton';
-import DelayedRender from '../../components/DelayedRender';
-
-const text = 'Testing the a11y addon';
-
-export default {
-  title: 'Addons/A11y/BaseButton',
-  component: BaseButton,
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const Default = () => <BaseButton label="" />;
-export const Label = () => <BaseButton label={text} />;
-export const Disabled = () => <BaseButton disabled label={text} />;
-
-export const InvalidContrast = () => (
-  // FIXME: has no effect on score
-  <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
-);
-InvalidContrast.storyName = 'Invalid contrast';
-
-export const DelayedRenderStory = () => (
-  <DelayedRender>
-    <BaseButton label="This button has a delayed render of 1s" />
-  </DelayedRender>
-);
-DelayedRenderStory.storyName = 'delayed render';
diff --git a/code/examples/official-storybook/stories/addon-a11y/button.stories.js b/code/examples/official-storybook/stories/addon-a11y/button.stories.js
deleted file mode 100644
index ba4521b71929..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/button.stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Button from '../../components/addon-a11y/Button';
-
-const text = 'Testing the a11y addon';
-
-export default {
-  title: 'Addons/A11y/Button',
-  component: Button,
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const Default = () => <Button />;
-export const Content = () => <Button content={text} />;
-export const Label = () => <Button label={text} />;
-export const Disabled = () => <Button disabled content={text} />;
-export const InvalidContrast = () => <Button contrast="wrong" content={text} />;
-InvalidContrast.storyName = 'Invalid contrast';
diff --git a/code/examples/official-storybook/stories/addon-a11y/form.stories.js b/code/examples/official-storybook/stories/addon-a11y/form.stories.js
deleted file mode 100644
index 97cdb4b5f9ed..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/form.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import { Form } from '@storybook/components';
-
-const text = 'Testing the a11y addon';
-
-export default {
-  title: 'Addons/A11y/Form',
-  component: Form,
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const WithoutLabel = () => (
-  <Form.Field label="">
-    <Form.Input />
-  </Form.Field>
-);
-
-export const WithLabel = () => (
-  <Form.Field label={text}>
-    <Form.Input id="1" />
-  </Form.Field>
-);
-WithLabel.storyName = 'With label';
-
-export const WithPlaceholder = () => (
-  <Form.Field label="">
-    <Form.Input id="1" placeholder={text} />
-  </Form.Field>
-);
-WithPlaceholder.storyName = 'With placeholder';
diff --git a/code/examples/official-storybook/stories/addon-a11y/highlight.stories.js b/code/examples/official-storybook/stories/addon-a11y/highlight.stories.js
deleted file mode 100644
index 30182f654a5c..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/highlight.stories.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect } from 'react';
-import { useChannel } from '@storybook/addons';
-import { HIGHLIGHT } from '@storybook/addon-highlight';
-import { themes, convert } from '@storybook/theming';
-
-import Button from '../../components/addon-a11y/Button';
-
-const text = 'Testing the a11y highlight';
-
-export default {
-  title: 'Addons/A11y/Highlight',
-  component: Button,
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-  decorators: [(storyFn) => <div style={{ padding: 10 }}>{storyFn()}</div>],
-};
-
-export const Passes = () => {
-  const emit = useChannel({});
-
-  useEffect(() => {
-    emit(HIGHLIGHT, {
-      elements: ['p'],
-      color: convert(themes.light).color.positive,
-    });
-  }, []);
-
-  return <p>{text}</p>;
-};
-
-export const Incomplete = () => {
-  const emit = useChannel({});
-
-  useEffect(() => {
-    emit(HIGHLIGHT, {
-      elements: ['p'],
-      color: convert(themes.light).color.warning,
-    });
-  }, []);
-
-  return <p>{text}</p>;
-};
-
-export const Violations = () => {
-  const emit = useChannel({});
-
-  useEffect(() => {
-    emit(HIGHLIGHT, {
-      elements: ['p'],
-      color: convert(themes.light).color.negative,
-    });
-  }, []);
-
-  return <p>{text}</p>;
-};
diff --git a/code/examples/official-storybook/stories/addon-a11y/image.stories.js b/code/examples/official-storybook/stories/addon-a11y/image.stories.js
deleted file mode 100644
index 7623c9f780fe..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/image.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-
-const text = 'Testing the a11y addon';
-const image = 'https://storybook.js.org/images/placeholders/350x150.png';
-
-export default {
-  title: 'Addons/A11y/Image',
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const WithoutAlt = () => <img src={image} />;
-WithoutAlt.storyName = 'Without alt';
-
-export const WithoutAltButUnchecked = () => <img src={image} />;
-WithoutAltButUnchecked.storyName = 'Without alt but unchecked';
-
-WithoutAltButUnchecked.parameters = {
-  a11y: {
-    config: {
-      disableOtherRules: true,
-      rules: [],
-    },
-    options: {},
-  },
-};
-
-export const WithAlt = () => <img src={image} alt={text} />;
-WithAlt.storyName = 'With alt';
-
-export const Presentation = () => <img role="presentation" src={image} />;
diff --git a/code/examples/official-storybook/stories/addon-a11y/parameters.stories.js b/code/examples/official-storybook/stories/addon-a11y/parameters.stories.js
deleted file mode 100644
index 77c2a22f57b6..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/parameters.stories.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import BaseButton from '../../components/BaseButton';
-
-export default {
-  title: 'Addons/A11y/Parameters',
-  component: BaseButton,
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const ElementId = () => (
-  <>
-    <p>
-      The <code>a11y.element</code> parameter is set to the <strong>Insufficient contrast</strong>{' '}
-      section.{' '}
-    </p>
-
-    <div id="no-text" style={{ border: '1px solid gray', padding: '1rem', marginBottom: '1rem' }}>
-      <strong>No discernable button text</strong>
-      <p>This a11y violation should not be reported, as this section is not scanned.</p>
-      <BaseButton label="" />
-    </div>
-    <div id="insufficient-contrast" style={{ border: '1px solid gray', padding: '1rem' }}>
-      <strong>Insufficient contrast</strong>
-      <p>This a11y issue (incomplete) should be reported.</p>
-      <BaseButton
-        style={{ color: 'black', backgroundColor: 'black' }}
-        label="Insufficient contrast"
-      />
-    </div>
-  </>
-);
-ElementId.parameters = {
-  a11y: {
-    element: '#insufficient-contrast',
-  },
-};
diff --git a/code/examples/official-storybook/stories/addon-a11y/typography.stories.js b/code/examples/official-storybook/stories/addon-a11y/typography.stories.js
deleted file mode 100644
index 1acf3b81bf23..000000000000
--- a/code/examples/official-storybook/stories/addon-a11y/typography.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* eslint-disable */
-import React, { Fragment } from 'react';
-
-const text = 'Testing the a11y addon';
-const href = 'http://example.com';
-
-export default {
-  title: 'Addons/A11y/Typography',
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const Correct = () => (
-  <Fragment>
-    <h1>{text}</h1>
-    <p>{text}</p>
-    <a href={href}>{`${text}...`}</a>
-  </Fragment>
-);
-
-export const EmptyHeading = () => <h1 />;
-
-EmptyHeading.storyName = 'Empty Heading';
-
-export const EmptyParagraph = () => <p />;
-
-EmptyParagraph.storyName = 'Empty Paragraph';
-
-export const EmptyLink = () => <a href={href} />;
-
-EmptyLink.storyName = 'Empty Link';
-
-export const LinkWithoutHref = () => <a>{`${text}...`}</a>;
-
-LinkWithoutHref.storyName = 'Link without href';
-
-export const Manual = () => <p>I'm a manual run</p>;
-Manual.parameters = {
-  a11y: {
-    manual: true,
-    config: {
-      disableOtherRules: true,
-      rules: [],
-    },
-    options: {},
-  },
-};
diff --git a/code/examples/server-kitchen-sink/.storybook/preview.js b/code/examples/server-kitchen-sink/.storybook/preview.js
index 3d99fec16dff..84aae82f8887 100644
--- a/code/examples/server-kitchen-sink/.storybook/preview.js
+++ b/code/examples/server-kitchen-sink/.storybook/preview.js
@@ -5,13 +5,6 @@ export const decorators = [withLinks];
 const port = process.env.SERVER_PORT || 1337;
 
 export const parameters = {
-  a11y: {
-    config: {},
-    options: {
-      checks: { 'color-contrast': { options: { noScroll: true } } },
-      restoreScroll: true,
-    },
-  },
   docs: {
     iframeHeight: '200px',
   },
diff --git a/code/examples/web-components-kitchen-sink/.storybook/preview.js b/code/examples/web-components-kitchen-sink/.storybook/preview.js
index 51678d787320..5dfa2b0c87bc 100644
--- a/code/examples/web-components-kitchen-sink/.storybook/preview.js
+++ b/code/examples/web-components-kitchen-sink/.storybook/preview.js
@@ -9,13 +9,6 @@ setCustomElementsManifest(customElementsManifest);
 // setCustomElements(customElements);
 
 export const parameters = {
-  a11y: {
-    config: {},
-    options: {
-      checks: { 'color-contrast': { options: { noScroll: true } } },
-      restoreScroll: true,
-    },
-  },
   docs: {
     iframeHeight: '200px',
   },

From 3c7b4eeec96bc0ae9d25efc27bc0539c2109c356 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 5 Sep 2022 15:52:12 +0200
Subject: [PATCH 2/9] fix cypress e2e test on official storybook

As a11y stories are no longer present, I had to target something else for the same purpose.
---
 code/cypress/integration/navigation.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/cypress/integration/navigation.spec.ts b/code/cypress/integration/navigation.spec.ts
index 120d4e978918..cb8e1d13768f 100644
--- a/code/cypress/integration/navigation.spec.ts
+++ b/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');
   });
 });

From 982db837e348049dcfdff54eb601f30543208f79 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 6 Sep 2022 17:54:17 +0200
Subject: [PATCH 3/9] add a Html component for testing any html content

---
 code/renderers/react/template/components/Html.jsx | 8 ++++++++
 code/renderers/react/template/components/index.js | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 code/renderers/react/template/components/Html.jsx

diff --git a/code/renderers/react/template/components/Html.jsx b/code/renderers/react/template/components/Html.jsx
new file mode 100644
index 000000000000..c7fa14f3e584
--- /dev/null
+++ b/code/renderers/react/template/components/Html.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Html = ({ contents }) => <div dangerouslySetInnerHTML={{ __html: contents }} />;
+
+Html.propTypes = {
+  contents: PropTypes.string.isRequired,
+};
diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js
index 7087de92dbef..49b33ac7cdc2 100644
--- a/code/renderers/react/template/components/index.js
+++ b/code/renderers/react/template/components/index.js
@@ -1,5 +1,6 @@
 import globalThis from 'global';
 
 import { Button } from './Button.jsx';
+import { Html } from './Html.jsx';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html };

From fb15a572244810e3e348758e9f3c61cb16c72378 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 7 Sep 2022 09:14:01 +0200
Subject: [PATCH 4/9] add stories to test axe through the a11y addon

---
 .../a11y/template/stories/tests.stories.ts    | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 code/addons/a11y/template/stories/tests.stories.ts

diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts
new file mode 100644
index 000000000000..03346296518a
--- /dev/null
+++ b/code/addons/a11y/template/stories/tests.stories.ts
@@ -0,0 +1,65 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Html,
+  args: {
+    content: '',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Violations = {
+  args: {
+    content: `
+      <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: {
+    content: `
+      <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>
+    `,
+  },
+};

From d1cff3af861ae0a1e3a2326461bd5ed44eb3e484 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 7 Sep 2022 12:14:27 +0200
Subject: [PATCH 5/9] cleanup

---
 .../ember-cli/stories/addon-a11y.stories.js   | 17 --------
 .../addon-a11y.stories.storyshot              | 27 ------------
 .../stories/addon-a11y.stories.js             | 27 ------------
 .../stories/addons/a11y.stories.json          | 42 -------------------
 .../stories/addons/a11y/addon-a11y.stories.ts | 26 ------------
 5 files changed, 139 deletions(-)
 delete mode 100644 code/examples/ember-cli/stories/addon-a11y.stories.js
 delete mode 100644 code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
 delete mode 100644 code/examples/html-kitchen-sink/stories/addon-a11y.stories.js
 delete mode 100644 code/examples/server-kitchen-sink/stories/addons/a11y.stories.json
 delete mode 100644 code/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts

diff --git a/code/examples/ember-cli/stories/addon-a11y.stories.js b/code/examples/ember-cli/stories/addon-a11y.stories.js
deleted file mode 100644
index 92cb2a614cfd..000000000000
--- a/code/examples/ember-cli/stories/addon-a11y.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-
-export default {
-  title: 'Addon/a11y',
-  parameters: {
-    options: { selectedPanel: '@storybook/a11y/panel' },
-  },
-};
-
-export const Default = () => hbs`<button></button>`;
-export const Label = () => hbs`<button>Testing the a11y addon</button>`;
-export const Disabled = () => hbs`<button disabled>Testing the a11y addon</button>`;
-
-export const InvalidContrast = () =>
-  hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
-
-InvalidContrast.storyName = 'Invalid contrast';
diff --git a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
deleted file mode 100644
index d2f9a117a089..000000000000
--- a/code/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/a11y Default 1`] = `<button />`;
-
-exports[`Storyshots Addons/a11y Delayed render 1`] = `<div />`;
-
-exports[`Storyshots Addons/a11y Disabled 1`] = `
-<button
-  disabled=""
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons/a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons/a11y Label 1`] = `
-<button>
-  Testing the a11y addon
-</button>
-`;
diff --git a/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js
deleted file mode 100644
index f9ce4af87a50..000000000000
--- a/code/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import global from 'global';
-
-const { document, setTimeout } = global;
-const text = 'Testing the a11y addon';
-
-export default {
-  title: 'Addons/a11y',
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-};
-
-export const Default = () => `<button></button>`;
-export const Label = () => `<button>${text}</button>`;
-export const Disabled = () => `<button disabled>${text}</button>`;
-export const Story4 = () =>
-  `<button style="color: black; background-color: brown;">${text}</button>`;
-Story4.storyName = 'Invalid contrast';
-
-export const Story5 = () => {
-  const div = document.createElement('div');
-  setTimeout(() => {
-    div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
-  }, 1000);
-  return div;
-};
-Story5.storyName = 'Delayed render';
diff --git a/code/examples/server-kitchen-sink/stories/addons/a11y.stories.json b/code/examples/server-kitchen-sink/stories/addons/a11y.stories.json
deleted file mode 100644
index 49afad6c39f3..000000000000
--- a/code/examples/server-kitchen-sink/stories/addons/a11y.stories.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "parameters": {
-    "options": {
-      "selectedPanel": "storybook/a11y/panel"
-    }
-  },
-  "stories": [
-    {
-      "name": "Default",
-      "parameters": {
-        "server": {
-          "id": "addons/a11y/default"
-        }
-      }
-    },
-    {
-      "name": "Label",
-      "parameters": {
-        "server": {
-          "id": "addons/a11y/label"
-        }
-      }
-    },
-    {
-      "name": "Disabled",
-      "parameters": {
-        "server": {
-          "id": "addons/a11y/disabled"
-        }
-      }
-    },
-    {
-      "id": "Contrast",
-      "name": "Invalid contrast",
-      "parameters": {
-        "server": {
-          "id": "addons/a11y/contrast"
-        }
-      }
-    }
-  ]
-}
diff --git a/code/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts b/code/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts
deleted file mode 100644
index 6490e0f36ca9..000000000000
--- a/code/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { html } from 'lit';
-import type { Meta, StoryFn } from '@storybook/web-components';
-
-const text = 'Testing the a11y addon';
-
-export default {
-  title: 'Addons / A11y',
-  parameters: {
-    options: { selectedPanel: 'storybook/a11y/panel' },
-  },
-} as Meta;
-
-export const Default: StoryFn = () => html`<button></button>`;
-export const Label: StoryFn = () => html`<button>${text}</button>`;
-export const Disabled: StoryFn = () => html`<button disabled>${text}</button>`;
-export const InvalidContrast: StoryFn = () => html`
-  <button style="color: black; background-color: brown;">${text}</button>
-`;
-
-export const DelayedRender: StoryFn = () => {
-  const div = document.createElement('div');
-  setTimeout(() => {
-    div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
-  }, 1000);
-  return div;
-};

From 1ea262fe543f854b7613077a8cf9cae7007e2aa3 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 8 Sep 2022 11:37:26 +0200
Subject: [PATCH 6/9] add a11y to sadnboxes

---
 scripts/sandbox.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index 9c044b660dcb..d5ff62a659d6 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -14,6 +14,7 @@ import prompts from 'prompts';
 import type { AbortController } from 'node-abort-controller';
 import command from 'execa';
 
+import dedent from 'ts-dedent';
 import { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';
 import { installYarn2, configureYarn2ForVerdaccio, addPackageResolutions } from './utils/yarn';
@@ -23,13 +24,13 @@ import { ConfigFile, readConfig, writeConfig } from '../code/lib/csf-tools';
 import { babelParse } from '../code/lib/csf-tools/src/babelParse';
 import TEMPLATES from '../code/lib/cli/src/repro-templates';
 import { servePackages } from './utils/serve-packages';
-import dedent from 'ts-dedent';
 
 type Template = keyof typeof TEMPLATES;
 const templates: Template[] = Object.keys(TEMPLATES) as any;
 const addons = ['a11y', 'storysource'];
 const defaultAddons = [
   'actions',
+  'a11y',
   'backgrounds',
   'controls',
   'docs',

From 385f610f237d11734eaaccbe6acfebcf85c2a8a9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 8 Sep 2022 11:53:46 +0200
Subject: [PATCH 7/9] Add a Svelte Html component

---
 code/renderers/react/template/components/Html.jsx     | 1 +
 code/renderers/svelte/template/components/Html.svelte | 8 ++++++++
 code/renderers/svelte/template/components/index.js    | 3 ++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 code/renderers/svelte/template/components/Html.svelte

diff --git a/code/renderers/react/template/components/Html.jsx b/code/renderers/react/template/components/Html.jsx
index c7fa14f3e584..974118ca5640 100644
--- a/code/renderers/react/template/components/Html.jsx
+++ b/code/renderers/react/template/components/Html.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+// eslint-disable-next-line react/no-danger
 export const Html = ({ contents }) => <div dangerouslySetInnerHTML={{ __html: contents }} />;
 
 Html.propTypes = {
diff --git a/code/renderers/svelte/template/components/Html.svelte b/code/renderers/svelte/template/components/Html.svelte
new file mode 100644
index 000000000000..b76ec4de7f1a
--- /dev/null
+++ b/code/renderers/svelte/template/components/Html.svelte
@@ -0,0 +1,8 @@
+<script>
+  /**
+   * contents
+   */
+  export let contents = '';
+</script>
+
+<div>{@html contents}></div>
diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js
index d2e5d492126f..9f7c09bcf792 100644
--- a/code/renderers/svelte/template/components/index.js
+++ b/code/renderers/svelte/template/components/index.js
@@ -1,5 +1,6 @@
 import globalThis from 'global';
 
 import Button from './Button.svelte';
+import Html from './Html.svelte';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html };

From 3c33ab04d4f509ef0ad2627373a597cff83d8be8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 8 Sep 2022 12:11:33 +0200
Subject: [PATCH 8/9] Add a Html component for vue3

---
 .../vue3/template/components/Html.vue         | 20 +++++++++++++++++++
 .../vue3/template/components/index.js         |  3 ++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 code/renderers/vue3/template/components/Html.vue

diff --git a/code/renderers/vue3/template/components/Html.vue b/code/renderers/vue3/template/components/Html.vue
new file mode 100644
index 000000000000..672c95661612
--- /dev/null
+++ b/code/renderers/vue3/template/components/Html.vue
@@ -0,0 +1,20 @@
+<template>
+  <div v-html="contents"></div>
+</template>
+
+<script>
+
+export default {
+  name: 'my-html',
+
+  props: {
+    contents: {
+      type: String,
+      required: true,
+    },
+  },
+
+
+  setup() { },
+};
+</script>
diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js
index bcf11c4fef18..3d396c684103 100644
--- a/code/renderers/vue3/template/components/index.js
+++ b/code/renderers/vue3/template/components/index.js
@@ -1,5 +1,6 @@
 import globalThis from 'global';
 
 import Button from './Button.vue';
+import Html from './Html.vue';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html };

From bc3bdee58ce22c8709b7746eb9899b1c0cb4e3a9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 12 Sep 2022 16:25:50 +0300
Subject: [PATCH 9/9] refactor a bit, to improve tests

---
 code/addons/a11y/src/a11yRunner.ts            |  4 +-
 .../template/stories/parameters.stories.ts    | 42 +++++++++----------
 .../a11y/template/stories/tests.stories.ts    |  6 +--
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts
index 1d6bd8b2f148..33440623ad17 100644
--- a/code/addons/a11y/src/a11yRunner.ts
+++ b/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: {},
     }
   );
 };
diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts
index acdf0d143c2c..159a6f07fd25 100644
--- a/code/addons/a11y/template/stories/parameters.stories.ts
+++ b/code/addons/a11y/template/stories/parameters.stories.ts
@@ -1,55 +1,55 @@
 import globalThis from 'global';
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.Components.Html,
   args: {
-    children: 'Click Me!',
+    contents: '<button>Click Me!</button>',
   },
   parameters: {
     chromatic: { disable: true },
   },
 };
 
-export const Basic = {};
-
-export const Violation = {
+export const Options = {
   args: {
-    // empty on purpose to get a button with no text
-    children: '',
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
   },
-};
-
-export const Checks = {
   parameters: {
     a11y: {
       config: {},
       options: {
         checks: {
-          'color-contrast': { options: { noScroll: true } },
+          'color-contrast': { enabled: false },
         },
-        restoreScroll: true,
       },
     },
   },
 };
 
-export const Targetted = {
+export const Config = {
+  args: {
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
+  },
   parameters: {
     a11y: {
-      element: 'button',
+      config: {
+        rules: [{ id: 'avoid-inline-spacing', options: {} }],
+        disableOtherRules: true,
+      },
+      options: {},
     },
   },
 };
 
-export const Blank = {
+export const Targetted = {
+  args: {
+    contents: '<button class="custom-target">Click Me!</button>',
+  },
   parameters: {
     a11y: {
-      config: {
-        disableOtherRules: true,
-        // @ts-ignore
-        rules: [],
-      },
-      options: {},
+      element: '.custom-target',
     },
   },
 };
diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts
index 03346296518a..6c729ad66e05 100644
--- a/code/addons/a11y/template/stories/tests.stories.ts
+++ b/code/addons/a11y/template/stories/tests.stories.ts
@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Html,
   args: {
-    content: '',
+    contents: '',
   },
   parameters: {
     chromatic: { disable: true },
@@ -12,7 +12,7 @@ export default {
 
 export const Violations = {
   args: {
-    content: `
+    contents: `
       <div>
         <p>empty heading</p>
         <h1></h1>
@@ -39,7 +39,7 @@ export const Violations = {
 
 export const Passes = {
   args: {
-    content: `
+    contents: `
       <div>
         <p>heading</p>
         <h1>heading 1</h1>