Storybook 8.5: Enable accessibility testing

.storybook/preview.tsx

@@ -1,4 +1,4 @@
 import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {Decorator} from "@storybook/react";
 import {color} from "@khanacademy/wonder-blocks-tokens";
@@ -145,7 +145,7 @@
         },
     },
 
-    tags: ["autodocs"],
+    tags: ["autodocs", "a11y-test"],
 };
 
 export default preview;

.storybook/vitest.setup.ts

@@ -1,9 +1,13 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/react';
-import * as projectAnnotations from './preview';
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import {beforeAll} from "vitest";
+import {setProjectAnnotations} from "@storybook/react";
+import * as previewAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
+const annotations = setProjectAnnotations([
+    previewAnnotations,
+    a11yAddonAnnotations,
+]);
 
-beforeAll(project.beforeAll);
+beforeAll(annotations.beforeAll);

vitest.config.ts

@@ -17,7 +17,7 @@ export default mergeConfig(viteConfig, {
             provider: "playwright",
         },
         // Make sure to adjust this pattern to match your stories files.
-        include: ["./__docs__/**/*.stories.@(ts|tsx)"],
+        stories: ["./__docs__/**/*.stories.@(ts|tsx)"],
         setupFiles: [".storybook/vitest.setup.ts"],
     },
 });