fix: a11y issues fixes (#189)

.storybook/main.ts

@@ -15,6 +15,7 @@ const config: StorybookConfig = {
         {name: '@storybook/addon-essentials', options: {backgrounds: false}},
         './theme-addon/register.tsx',
         '@storybook/addon-webpack5-compiler-babel',
+        '@storybook/addon-a11y',
     ],
 
     webpackFinal: (storybookBaseConfig) => {

.storybook/test-runner.ts

@@ -0,0 +1,33 @@
+import type {TestRunnerConfig} from '@storybook/test-runner';
+import {getStoryContext} from '@storybook/test-runner';
+import {checkA11y, configureAxe, injectAxe} from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+    async preVisit(page) {
+        await injectAxe(page);
+    },
+    async postVisit(page, context) {
+        // Get the entire context of a story, including parameters, args, argTypes, etc.
+        const storyContext = await getStoryContext(page, context);
+
+        // Apply story-level a11y rules
+        await configureAxe(page, {
+            rules: storyContext.parameters?.a11y?.config?.rules,
+            reporter: 'no-passes',
+        });
+
+        await checkA11y(page, '#storybook-root', {
+            verbose: false,
+            detailedReport: true,
+            detailedReportOptions: {
+                html: true,
+            },
+        });
+    },
+};
+
+export default config;