install visual testing and a11y add-ons

Author: carylwyatt

.storybook/main.js

@@ -1,7 +1,13 @@
 /** @type { import('@storybook/svelte-vite').StorybookConfig } */
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-docs', '@storybook/addon-vitest'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y'
+  ],
   framework: {
     name: '@storybook/svelte-vite',
     options: {},

.storybook/preview.js

@@ -50,7 +50,7 @@ const BOOTSTRAP_VIEWPORTS = {
 const preview = {
   parameters: {
     backgrounds: {},
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    // actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -64,9 +64,9 @@ const preview = {
 
   initialGlobals: {
     backgrounds: {
-      value: 'light'
-    }
-  }
+      value: 'light',
+    },
+  },
 };
 
 export default preview;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:656a2bfa011def621f569319",
+  "zip": true
+}

package-lock.json

@@ -12,7 +12,7 @@
     "build-storybook": "storybook build",
     "build-js": "vite build",
     "build": "vite build && storybook build -o dist/storybook && node ./build-redirects.js",
-    "test-storybook": "test-storybook",
+    "test-storybook": "vitest --project=storybook",
     "chromatic": "chromatic --exit-zero-on-changes",
     "babel": "vite build --watch --minify false"
   },
@@ -27,6 +27,8 @@
   },
   "homepage": "https://github.com/hathitrust/firebird-common#readme",
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.2",
+    "@storybook/addon-a11y": "^9.1.16",
     "@storybook/addon-docs": "9.1.16",
     "@storybook/addon-links": "9.1.16",
     "@storybook/addon-vitest": "^9.1.16",