docs(ui): add stories for Accessibility page (#2301)

Author: cylewaitforit

.storybook/main.ts

@@ -9,7 +9,7 @@ const config = {
     'storybook-i18n',
   ],
   framework: '@storybook-vue/nuxt',
-  staticDirs: ['./.public'],
+  staticDirs: ['./.public', { from: '../public', to: '/' }],
   features: {
     backgrounds: false,
   },

.storybook/preview-head.html

@@ -1,4 +1,61 @@
 <style>
+  /* Load Geist fonts to match the production app (normally handled by @nuxt/fonts,
+     which is disabled in Storybook at this time) */
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-SemiBold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Bold.ttf') format('truetype');
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
   /* Override docs story canvas background to match npmx theme */
   .docs-story {
     background-color: var(--bg, oklch(0.171 0 0)) !important;

app/pages/accessibility.stories.ts

@@ -0,0 +1,30 @@
+import Accessibility from './accessibility.vue'
+import type { Meta, StoryObj } from '@storybook-vue/nuxt'
+import AppHeader from '~/components/AppHeader.vue'
+import AppFooter from '~/components/AppFooter.vue'
+
+const meta = {
+  component: Accessibility,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    () => ({
+      components: { AppHeader, AppFooter },
+      template: `
+        <div class="min-h-screen flex flex-col bg-bg text-fg">
+          <AppHeader :show-logo="true" />
+          <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
+            <story />
+          </div>
+          <AppFooter />
+        </div>
+      `,
+    }),
+  ],
+} satisfies Meta<typeof Accessibility>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}