fix: resolve 3 a11y test failures — contrast, mobile nav label, token input label

- Fix color contrast on /invoice/new: tab buttons used text-indigo-300/text-gray-400 (dark-only colors) on white light-mode background; add dark: variants so they meet 4.5:1 WCAG AA in both modes
- Fix Stepper step labels: text-gray-200 fails contrast on white; change to text-gray-700 dark:text-gray-200
- Fix Navbar hamburger aria-label from "Open navigation menu" to "Open menu" so getByRole('button', { name: /open menu/i }) finds it
- Add aria-label="Token address" directly on token input so getByLabel test is reliable regardless of i18n context
- Move serverExternalPackages to experimental.serverComponentsExternalPackages (correct Next.js 14 location; removes config warning)

Author: Kingsman-99

next.config.js

@@ -5,7 +5,9 @@ const { withSentryConfig } = require("@sentry/nextjs");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  serverExternalPackages: ["@stellar/stellar-sdk", "@vercel/blob"],
+  experimental: {
+    serverComponentsExternalPackages: ["@stellar/stellar-sdk", "@vercel/blob"],
+  },
   images: {
     // Recipient avatars fall back to Gravatar; served unoptimized so no image
     // requests are proxied through the Next.js optimizer.

src/app/invoice/new/page.tsx

@@ -748,6 +748,7 @@ function NewInvoiceForm() {
         >
           <input
             type="text"
+            aria-label="Token address"
             value={token}
             onChange={(e) => setToken(e.target.value)}
             onFocus={() => setFocusedField("token-address")}
@@ -1216,8 +1217,8 @@ function NewInvoiceForm() {
             onClick={() => setFormMode("create")}
             className={`px-4 py-2 text-sm font-medium transition-colors rounded-t-lg -mb-px border-b-2 ${
               formMode === "create"
-                ? "border-indigo-500 text-indigo-300"
-                : "border-transparent text-gray-400 hover:text-gray-200"
+                ? "border-indigo-500 text-indigo-600 dark:text-indigo-300"
+                : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"
             }`}
           >
             Create New

src/components/Navbar.tsx

@@ -89,7 +89,7 @@ export default function Navbar() {
             <button
               ref={hamburgerRef}
               className="lg:hidden ml-1 flex items-center justify-center h-9 w-9 rounded-md text-slate-400 hover:text-white hover:bg-white/[0.06] transition-colors"
-              aria-label="Open navigation menu"
+              aria-label="Open menu"
               aria-expanded={sidebarOpen}
               aria-controls="mobile-sidebar"
               onClick={() => setSidebarOpen(true)}

src/components/ui/Stepper.tsx

@@ -41,7 +41,7 @@ export default function Stepper({ steps, onStepClick, className = "" }: StepperP
       className={className}
     >
       {/* Mobile: collapsed summary */}
-      <p className="md:hidden text-sm font-medium text-gray-300">
+      <p className="md:hidden text-sm font-medium text-gray-700 dark:text-gray-300">
         Step {activeIndex + 1} of {steps.length} — {activeStep.label}
       </p>
 
@@ -92,11 +92,13 @@ function StepMarker({
     step.status === "complete"
       ? "bg-indigo-600 border-indigo-500 text-white"
       : step.status === "current"
-      ? "border-indigo-400 text-indigo-300"
+      ? "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300"
       : "border-gray-700 text-gray-500";
 
   const labelClass =
-    step.status === "upcoming" ? "text-gray-500" : "text-gray-200";
+    step.status === "upcoming"
+      ? "text-gray-500 dark:text-gray-500"
+      : "text-gray-700 dark:text-gray-200";
 
   const content = (
     <>