From eba95dba88ba5867d5b33fdbe701b532852f27d2 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Fri, 27 Mar 2026 20:30:57 -0500
Subject: [PATCH] docs(ui): add stories for Accessibility page

---
 .storybook/main.ts                 |  2 +-
 .storybook/preview-head.html       | 57 ++++++++++++++++++++++++++++++
 app/pages/accessibility.stories.ts | 30 ++++++++++++++++
 3 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/accessibility.stories.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 14b9305e21..1dd56a7a34 100644
--- a/.storybook/main.ts
+++ b/.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,
   },
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 49c5636054..f644bb7435 100644
--- a/.storybook/preview-head.html
+++ b/.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;
diff --git a/app/pages/accessibility.stories.ts b/app/pages/accessibility.stories.ts
new file mode 100644
index 0000000000..bfd0968592
--- /dev/null
+++ b/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 = {}