Merge pull request #2684 from modernweb-dev/fix/storybook-builder-addon-a11y

fix(storybook-builder): support @storybook/addon-a11y

Author: bashmish

.changeset/tame-forks-complain.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+support @storybook/addon-a11y

package-lock.json

@@ -65,7 +65,7 @@
     "glob-promise": "^6.0.3",
     "lodash-es": "^4.17.21",
     "path-browserify": "^1.0.1",
-    "rollup": "^4.4.0",
+    "rollup": "^4.4.1",
     "rollup-plugin-external-globals": "^0.9.0",
     "slash": "^5.1.0"
   },

packages/storybook-builder/package.json

@@ -93,6 +93,9 @@ export const CANDIDATES = [
   'react',
   'react-dom',
   'tocbot',
+
+  /* for @storybook/addon-a11y */
+  'axe-core',
 ];
 
 function getReactDomShimAlias() {

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.22.2",
+    "@storybook/addon-a11y": "^7.0.0",
     "@storybook/addon-essentials": "^7.0.0",
     "@storybook/addon-interactions": "^7.0.0",
     "@storybook/addon-links": "^7.0.0",

packages/storybook-framework-web-components/package.json

@@ -43,6 +43,10 @@ test.describe('all in one', () => {
     await expect(manager.toolbarItemByTitle('Apply outlines to the preview')).toBeVisible();
   });
 
+  test('renders @storybook/addon-a11y toolbar', async () => {
+    await expect(manager.toolbarItemByTitle('Vision simulator')).toBeVisible();
+  });
+
   test('renders @storybook/addon-controls panel', async () => {
     const panelButton = manager.panelButtonByText('Controls');
     await panelButton.click();
@@ -60,4 +64,10 @@ test.describe('all in one', () => {
     await panelButton.click();
     await expect(panelButton).toHaveClass(/tabbutton-active/);
   });
+
+  test('renders @storybook/addon-a11y panel', async () => {
+    const panelButton = manager.panelButtonByText('Accessibility');
+    await panelButton.click();
+    await expect(panelButton).toHaveClass(/tabbutton-active/);
+  });
 });

packages/storybook-framework-web-components/tests/all-in-one.spec.js

@@ -5,6 +5,7 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
   ],
   framework: {
     name: '@web/storybook-framework-web-components',