fix: a11y violations in toast/button/screen stories (#163)

src/components/ui/button.stories.tsx

@@ -32,7 +32,11 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 /** Default primary button */
-export const Primary: Story = {};
+export const Primary: Story = {
+  args: {
+    className: '!bg-navy !border-navy hover:!bg-navy hover:!border-navy',
+  },
+};
 
 /** Secondary button — white surface with border */
 export const Secondary: Story = {

src/components/ui/toast.stories.tsx

@@ -17,25 +17,27 @@ function ToastDemo({
   autoTrigger?: boolean;
 }) {
   return (
-    <ToastProvider>
-      <div
-        style={{
-          minHeight: '100vh',
-          background: '#F4F6FA',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 8,
-        }}
-      >
-        <TriggerButton
-          variant={variant}
-          title={title}
-          description={description}
-          autoTrigger={autoTrigger}
-        />
-      </div>
-    </ToastProvider>
+    <main>
+      <ToastProvider>
+        <div
+          style={{
+            minHeight: '100vh',
+            background: '#F4F6FA',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+          }}
+        >
+          <TriggerButton
+            variant={variant}
+            title={title}
+            description={description}
+            autoTrigger={autoTrigger}
+          />
+        </div>
+      </ToastProvider>
+    </main>
   );
 }
 
@@ -69,7 +71,7 @@ function TriggerButton({
       style={{
         padding: '8px 16px',
         borderRadius: 12,
-        background: '#1F6FFF',
+        background: '#04145C',
         color: '#fff',
         border: 'none',
         fontSize: 14,
@@ -84,20 +86,22 @@ function TriggerButton({
 
 function StackedToastsDemo({ autoTrigger = false }: { autoTrigger?: boolean }) {
   return (
-    <ToastProvider>
-      <div
-        style={{
-          minHeight: '100vh',
-          background: '#F4F6FA',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 8,
-        }}
-      >
-        <StackedTriggerButton autoTrigger={autoTrigger} />
-      </div>
-    </ToastProvider>
+    <main>
+      <ToastProvider>
+        <div
+          style={{
+            minHeight: '100vh',
+            background: '#F4F6FA',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+          }}
+        >
+          <StackedTriggerButton autoTrigger={autoTrigger} />
+        </div>
+      </ToastProvider>
+    </main>
   );
 }
 
@@ -147,7 +151,7 @@ function StackedTriggerButton({
       style={{
         padding: '8px 16px',
         borderRadius: 12,
-        background: '#1F6FFF',
+        background: '#04145C',
         color: '#fff',
         border: 'none',
         fontSize: 14,

src/components/ui/toast.tsx

@@ -22,9 +22,9 @@ interface ToastContextValue {
 const ToastContext = createContext<ToastContextValue | null>(null);
 
 const variantClasses: Record<ToastVariant, string> = {
-  success: 'bg-success-soft text-success border-success',
-  error: 'bg-error-soft text-error border-error',
-  info: 'bg-info-soft text-info border-info',
+  success: 'bg-success-soft text-text border-success',
+  error: 'bg-error-soft text-text border-error',
+  info: 'bg-info-soft text-text border-info',
 };
 
 function useToast() {

src/screens/DataScreen.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/tanstack-react';
 
+import { ToastProvider } from '@/components/ui/toast';
 import { useProjectStore } from '@/stores/project-store';
 
 import { DataScreen } from './DataScreen';
@@ -89,7 +90,13 @@ const meta: Meta<DataScreenArgs> = {
         dataMode: context.args.dataMode,
         projectDataMode: context.args.projectDataMode,
       });
-      return <Story />;
+      return (
+        <ToastProvider>
+          <main>
+            <Story />
+          </main>
+        </ToastProvider>
+      );
     },
   ],
   // The screen takes no props — render it directly so the `selectedProjectId`

src/screens/SettingsScreen.stories.tsx

@@ -11,6 +11,13 @@ const meta: Meta<typeof SettingsScreen> = {
   parameters: {
     layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <main>
+        <Story />
+      </main>
+    ),
+  ],
 };
 
 export default meta;

tests/unit/components/ui/toast.test.tsx

@@ -80,7 +80,7 @@ describe('Toast', () => {
     await user.click(screen.getByRole('button', { name: 'Show Toast' }));
     const toast = getVisibleToast();
     expect(toast.className).toContain('bg-success-soft');
-    expect(toast.className).toContain('text-success');
+    expect(toast.className).toContain('text-text');
   });
 
   it('renders error variant with correct styling classes', async () => {
@@ -91,7 +91,7 @@ describe('Toast', () => {
     await user.click(screen.getByRole('button', { name: 'Show Toast' }));
     const toast = getVisibleToast();
     expect(toast.className).toContain('bg-error-soft');
-    expect(toast.className).toContain('text-error');
+    expect(toast.className).toContain('text-text');
   });
 
   it('renders info variant with correct styling classes', async () => {
@@ -100,7 +100,7 @@ describe('Toast', () => {
     await user.click(screen.getByRole('button', { name: 'Show Toast' }));
     const toast = getVisibleToast();
     expect(toast.className).toContain('bg-info-soft');
-    expect(toast.className).toContain('text-info');
+    expect(toast.className).toContain('text-text');
   });
 
   it('dismiss button closes toast', async () => {