test: add accessibility and mobile viewport E2E coverage

frontend/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],
-  framework: '@storybook/nextjs',
+  framework: '@storybook/nextjs-vite',
   staticDirs: ['../public'],
 };
 

frontend/app/sandbox/playground/page.tsx

@@ -26,8 +26,8 @@ export default function PlaygroundPage() {
   const [loading, setLoading] = useState(false);
 
   const client = new BridgeletClient({
-    baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
-    apiKey: process.env.NEXT_PUBLIC_API_KEY,
+    baseUrl: process.env[`NEXT_PUBLIC_API_BASE_URL`],
+    apiKey: process.env[`NEXT_PUBLIC_API_KEY`],
   } as BridgeletClientOptions);
 
   const handleEndpointChange = (endpoint: Endpoint) => {
@@ -49,18 +49,18 @@ export default function PlaygroundPage() {
       let result: unknown;
       switch (selected) {
         case "getClaimDetails":
-          result = await client.getClaimDetails(params.token);
+          result = await client.getClaimDetails(params[`token`] ?? "");
           break;
         case "createPaymentIntent":
           result = await client.createPaymentIntent({
-            senderPublicKey: params.senderPublicKey,
-            amountStroops: params.amountStroops,
-            assetCode: params.assetCode,
+            senderPublicKey: params[`senderPublicKey`] ?? "",
+            amountStroops: params[`amountStroops`] ?? "",
+            assetCode: params[`assetCode`] ?? "",
           });
           break;
         case "redeemClaim":
-          result = await client.redeemClaim(params.token, {
-            recipientPublicKey: params.recipientPublicKey,
+          result = await client.redeemClaim(params[`token`] ?? "", {
+            recipientPublicKey: params[`recipientPublicKey`] ?? "",
           });
           break;
       }

frontend/components/claim-status-card.stories.tsx

@@ -10,18 +10,14 @@ export default meta;
 
 type Story = StoryObj<typeof ClaimStatusCard>;
 
-export const Loading: Story = {
-  args: { status: 'loading' },
-};
-
-export const Unclaimed: Story = {
-  args: { status: 'unclaimed', amount: '100', asset: 'USDC', expiresAt: '2026-07-15T12:00:00Z' },
+export const Available: Story = {
+  args: { status: 'available', amountStroops: '1000000000', assetCode: 'USDC', expiresAt: '2026-07-15T12:00:00Z' },
 };
 
 export const Claimed: Story = {
-  args: { status: 'claimed', amount: '100', asset: 'USDC' },
+  args: { status: 'claimed' },
 };
 
 export const Expired: Story = {
-  args: { status: 'expired', amount: '50', asset: 'XLM', expiresAt: '2026-06-01T00:00:00Z' },
-};
+  args: { status: 'expired', expiresAt: '2026-06-01T00:00:00Z', supportEmail: 'support@bridgelet.com' },
+};

frontend/components/claim-status-card.tsx

@@ -142,7 +142,7 @@ function AvailablePanel({
         type="button"
         onClick={handleClaim}
         disabled={claiming}
-        className="w-full rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-green-700 disabled:opacity-60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+        className="w-full rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-green-700 disabled:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-green-600"
       >
         {claiming ? 'Claiming…' : 'Claim now'}
       </button>

frontend/e2e/accessibility.spec.ts

@@ -0,0 +1,21 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+const routes = ['/', '/send', '/claim/example-token'];
+
+test.describe('Accessibility checks', () => {
+  for (const route of routes) {
+    test(`has no WCAG 2.1 AA violations on ${route}`, async ({ page }) => {
+      await page.goto(route);
+
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag21aa'])
+        .analyze();
+
+      expect(
+        results.violations,
+        results.violations.map((violation) => `${violation.id}: ${violation.help}`).join('\n'),
+      ).toEqual([]);
+    });
+  }
+});

frontend/lib/config.ts

@@ -1,10 +1,10 @@
 /** SDK base URL. Falls back to the MSW mock server in development. */
 export const SDK_URL =
-  process.env.NEXT_PUBLIC_SDK_URL ??
-  (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:3000');
+  process.env[`NEXT_PUBLIC_SDK_URL`] ??
+  (process.env[`NODE_ENV`] === 'production' ? '' : 'http://localhost:3000');
 
 /**
  * Public API key sent as `x-api-key` on SDK requests.
  * Leave empty in development — MSW intercepts without auth.
  */
-export const API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? '';
+export const API_KEY = process.env[`NEXT_PUBLIC_API_KEY`] ?? '';

frontend/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.