docs: Added/activated a11y addon to storybook (#4265)

* added a11y addon to storybook

* Create popular-files-destroy.md

.changeset/popular-files-destroy.md

@@ -0,0 +1,5 @@
+---
+"@marigold/storybook-config": patch
+---
+
+docs: Added/activated a11y addon to storybook. In all components is now a panel called Accessibility which shows how accessible our components are and if there are some violations or incomplete issues.

config/storybook/.storybook/main.ts

@@ -16,6 +16,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

config/storybook/.storybook/preview.tsx

@@ -11,6 +11,8 @@ import '@marigold/theme-b2b/styles.css';
 import core from '@marigold/theme-core';
 import '@marigold/theme-core/styles.css';
 
+// Helpers
+
 // Helpers
 // ---------------
 const THEME = {
@@ -26,7 +28,7 @@ type ThemeNames = keyof typeof THEME;
 export const parameters: Preview['parameters'] = {
   layout: 'fullscreen',
   a11y: {
-    element: '#root',
+    element: '#storybook-root',
   },
   options: {
     storySort: {

config/storybook/package.json

@@ -22,7 +22,7 @@
     "@marigold/theme-b2b": "workspace:*",
     "@marigold/theme-core": "workspace:*",
     "@mdx-js/react": "3.0.1",
-    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/source-loader": "^8.1.11",