chore: migrate storybook v10, fix wcag violations

.github/workflows/test-storybook.yml

@@ -8,7 +8,7 @@ jobs:
     container:
       # Make sure to grab the latest version of the Playwright image
       # https://playwright.dev/docs/docker#pull-the-image
-      image: mcr.microsoft.com/playwright:v1.54.1-noble
+      image: mcr.microsoft.com/playwright:v1.57.0-noble
     steps:
       - uses: actions/checkout@v4
 

.storybook/main.ts

@@ -4,7 +4,7 @@ import svgr from "vite-plugin-svgr";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  staticDirs: ["../node_modules/dkfds/dist"],
+  staticDirs: ["../node_modules/dkfds/dist", "../src/stories/assets"],
   previewHead: (head) => `${head}
     <link rel="stylesheet" href="./css/dkfds.css" />
     `,

.storybook/preview.tsx

@@ -4,7 +4,6 @@ import { DkfdsTranslationProvider } from "../src/contexts/translation-context";
 import { loadTranslations } from "../src/stories/translations/translations";
 
 const withSVGHeader = (Story) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const translations = loadTranslations();
 
   return (
@@ -27,12 +26,18 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
     layout: "centered",
+
     backgrounds: {
       grid: {
         opacity: 0.1,
       },
     },
+
+    a11y: {
+      test: "error",
+    },
   },
   decorators: [withSVGHeader],
   tags: ["autodocs"],

.storybook/vitest.setup.ts

@@ -1,6 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { setProjectAnnotations } from "@storybook/react-vite";
 import * as projectAnnotations 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
-setProjectAnnotations([projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);