♿ add screen reader tests to profile-components (#19)

.github/workflows/chromatic.yml

@@ -11,14 +11,17 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Install dependencies
-        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: npm i
+        run: npm ci
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true

.storybook/main.js

@@ -1,4 +1,6 @@
 import path from 'path';
+import { mergeConfig } from 'vite';
+import turbosnap from 'vite-plugin-turbosnap';
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
   stories: ['../src/github/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -18,10 +20,21 @@ const config = {
   docs: {
     autodocs: 'tag',
   },
-  async viteFinal(config, options) {
+  async viteFinal(config, { configType }) {
     // Ensures that the cache directory is inside the project directory
     config.cacheDir = path.join(__dirname, '../node_modules/.vite');
-    return config;
+
+    return mergeConfig(config, {
+      plugins:
+        configType === "PRODUCTION"
+          ? [
+              turbosnap({
+                // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
+                rootDir: config.root ?? process.cwd(),
+              }),
+            ]
+          : [],
+    });
   },
 };
 export default config;

.storybook/preview.js

@@ -2,7 +2,7 @@ import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import { globalTypesPrimer, decoratorsPrimer } from './primer-preview';
 import { viewports } from './viewports';
-import { stringify, parseify } from '../src/utils';
+import { stringinator, parseify } from '../src/utils';
 import "./storybook.css";
 
 setCustomElementsManifest(customElements);
@@ -15,7 +15,7 @@ global.attrGen = (args) => Object.entries(args)
 .map(([key, value]) => `\n  ${key}="${value}"`)
 .join(' ');
 
-global.stringify = stringify;
+global.stringinator = stringinator;
 global.parseify = parseify;
 
 /** @type { import('@storybook/web-components').Preview } */