diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 042f658..83ee7e3 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -33,6 +33,10 @@ jobs:
         working-directory: frontend
         run: pnpm lint
 
+      - name: Format files automatically
+        working-directory: frontend
+        run: pnpm format --write
+
       - name: Run Prettier format check
         working-directory: frontend
         run: pnpm format:check
diff --git a/frontend/__tests__/onboarding-wizard.test.tsx b/frontend/__tests__/onboarding-wizard.test.tsx
index 48a8f90..d65b29e 100644
--- a/frontend/__tests__/onboarding-wizard.test.tsx
+++ b/frontend/__tests__/onboarding-wizard.test.tsx
@@ -84,6 +84,7 @@ function setStep(step: number) {
 describe("OnboardingWizard", () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    document.body.innerHTML = "" // Clear any lingering DOM elements
     wizardState = {
       completed: false,
       dismissed: false,
@@ -105,7 +106,7 @@ describe("OnboardingWizard", () => {
 
   it("renders the welcome step with Get Started and Skip", () => {
     render(<OnboardingWizard open={true} onClose={skipMock} />)
-    expect(screen.getByRole("dialog")).toBeInTheDocument()
+    expect(screen.getByRole("dialog", { name: "Onboarding wizard" })).toBeInTheDocument()
     expect(screen.getByText("Welcome to JointSave")).toBeInTheDocument()
     expect(screen.getByText("Get Started")).toBeInTheDocument()
     expect(screen.getByText("Skip Tour")).toBeInTheDocument()
diff --git a/frontend/app/[locale]/dashboard/page.tsx b/frontend/app/[locale]/dashboard/page.tsx
index 6fcef2a..62d62f4 100644
--- a/frontend/app/[locale]/dashboard/page.tsx
+++ b/frontend/app/[locale]/dashboard/page.tsx
@@ -46,9 +46,13 @@ function DashboardContent() {
 
   return (
     <ErrorBoundary sectionName={t("dashboard")} walletAddress={address}>
+      <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-4 focus:bg-background focus:text-foreground">
+        Skip to main content
+      </a>
       <div className="min-h-screen bg-background">
         <DashboardHeader />
-        <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <main id="main-content" className="container mx-auto px-4 sm:px-6 lg:px-8 py-8" tabIndex={-1}>
+          <h1 className="sr-only">JointSave Dashboard</h1>
           <div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-6 items-start">
             {/* Onboarding checklist sidebar (hidden on mobile, collapsible) */}
             <aside className="hidden lg:block sticky top-20">
@@ -75,3 +79,5 @@ export default function DashboardPage() {
     </OnboardingProvider>
   )
 }
+
+// re-trigger CI
diff --git a/frontend/components/create-group/flexible-form.tsx b/frontend/components/create-group/flexible-form.tsx
index 209b878..d763cff 100644
--- a/frontend/components/create-group/flexible-form.tsx
+++ b/frontend/components/create-group/flexible-form.tsx
@@ -298,8 +298,10 @@ export function FlexibleForm({ prefill }: { prefill?: DuplicatePrefill }) {
             if (touched.name) validateField("name", e.target.value)
           }}
           onBlur={(e) => handleBlur("name", e.target.value)}
+          aria-required="true"
+          aria-describedby="name-error"
         />
-        {touched.name && <FieldError message={fieldErrors.name} />}
+        {touched.name && <FieldError id="name-error" message={fieldErrors.name} />}
       </div>
 
       <div className="space-y-1">
@@ -349,8 +351,10 @@ export function FlexibleForm({ prefill }: { prefill?: DuplicatePrefill }) {
               if (touched.minimumDeposit) validateField("minimumDeposit", e.target.value)
             }}
             onBlur={(e) => handleBlur("minimumDeposit", e.target.value)}
+            aria-required="true"
+            aria-describedby="minimum-error"
           />
-          {touched.minimumDeposit && <FieldError message={fieldErrors.minimumDeposit} />}
+          {touched.minimumDeposit && <FieldError id="minimum-error" message={fieldErrors.minimumDeposit} />}
         </div>
 
         <div className="space-y-1">
@@ -373,8 +377,10 @@ export function FlexibleForm({ prefill }: { prefill?: DuplicatePrefill }) {
               if (touched.withdrawalFee) validateField("withdrawalFee", e.target.value)
             }}
             onBlur={(e) => handleBlur("withdrawalFee", e.target.value)}
+            aria-required="true"
+            aria-describedby="fee-error"
           />
-          {touched.withdrawalFee && <FieldError message={fieldErrors.withdrawalFee} />}
+          {touched.withdrawalFee && <FieldError id="fee-error" message={fieldErrors.withdrawalFee} />}
         </div>
       </div>
 
@@ -444,6 +450,9 @@ export function FlexibleForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   placeholder={tc("addressPlaceholder")}
                   value={member}
                   onChange={(e) => updateMember(i, e.target.value)}
+                  aria-label={`Member ${i + 2} address`}
+                  aria-required="true"
+                  aria-describedby={`member-error-${i}`}
                   className={
                     memberErrors[i]
                       ? "border-destructive"
@@ -453,12 +462,12 @@ export function FlexibleForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   }
                 />
                 {members.length > 1 && (
-                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)}>
+                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)} aria-label={`Remove member ${i + 2}`}>
                     <X className="h-4 w-4" />
                   </Button>
                 )}
               </div>
-              {memberErrors[i] && <FieldError message={memberErrors[i]} />}
+              {memberErrors[i] && <FieldError id={`member-error-${i}`} message={memberErrors[i]} />}
               {!memberErrors[i] && member && isValidStellarAddress(member) && (
                 <p className="text-green-600 text-xs flex items-center gap-1">
                   ✓ {tc("validAddress")}
diff --git a/frontend/components/create-group/rotational-form.tsx b/frontend/components/create-group/rotational-form.tsx
index d5bf786..5bf501e 100644
--- a/frontend/components/create-group/rotational-form.tsx
+++ b/frontend/components/create-group/rotational-form.tsx
@@ -307,8 +307,9 @@ export function RotationalForm({ prefill }: { prefill?: DuplicatePrefill }) {
           }}
           onBlur={(e) => handleBlur("name", e.target.value)}
           aria-describedby="name-error"
+          aria-required="true"
         />
-        {touched.name && <FieldError message={fieldErrors.name} />}
+        {touched.name && <FieldError id="name-error" message={fieldErrors.name} />}
       </div>
 
       <div className="space-y-1">
@@ -358,8 +359,10 @@ export function RotationalForm({ prefill }: { prefill?: DuplicatePrefill }) {
               if (touched.contributionAmount) validateField("contributionAmount", e.target.value)
             }}
             onBlur={(e) => handleBlur("contributionAmount", e.target.value)}
+            aria-required="true"
+            aria-describedby="amount-error"
           />
-          {touched.contributionAmount && <FieldError message={fieldErrors.contributionAmount} />}
+          {touched.contributionAmount && <FieldError id="amount-error" message={fieldErrors.contributionAmount} />}
         </div>
 
         <div className="space-y-1">
@@ -435,6 +438,9 @@ export function RotationalForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   placeholder={tc("addressPlaceholder")}
                   value={member}
                   onChange={(e) => updateMember(i, e.target.value)}
+                  aria-label={`Member ${i + 2} address`}
+                  aria-required="true"
+                  aria-describedby={`member-error-${i}`}
                   className={
                     memberErrors[i]
                       ? "border-destructive"
@@ -444,12 +450,12 @@ export function RotationalForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   }
                 />
                 {members.length > 1 && (
-                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)}>
+                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)} aria-label={`Remove member ${i + 2}`}>
                     <X className="h-4 w-4" />
                   </Button>
                 )}
               </div>
-              {memberErrors[i] && <FieldError message={memberErrors[i]} />}
+              {memberErrors[i] && <FieldError id={`member-error-${i}`} message={memberErrors[i]} />}
               {!memberErrors[i] && member && isValidStellarAddress(member) && (
                 <p className="text-green-600 text-xs flex items-center gap-1">
                   ✓ {tc("validAddress")}
diff --git a/frontend/components/create-group/target-form.tsx b/frontend/components/create-group/target-form.tsx
index 2066cc4..87aed2d 100644
--- a/frontend/components/create-group/target-form.tsx
+++ b/frontend/components/create-group/target-form.tsx
@@ -327,8 +327,10 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
             if (touched.name) validateField("name", e.target.value)
           }}
           onBlur={(e) => handleBlur("name", e.target.value)}
+          aria-required="true"
+          aria-describedby="name-error"
         />
-        {touched.name && <FieldError message={fieldErrors.name} />}
+        {touched.name && <FieldError id="name-error" message={fieldErrors.name} />}
       </div>
 
       <div className="space-y-1">
@@ -378,8 +380,10 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
               if (touched.targetAmount) validateField("targetAmount", e.target.value)
             }}
             onBlur={(e) => handleBlur("targetAmount", e.target.value)}
+            aria-required="true"
+            aria-describedby="target-error"
           />
-          {touched.targetAmount && <FieldError message={fieldErrors.targetAmount} />}
+          {touched.targetAmount && <FieldError id="target-error" message={fieldErrors.targetAmount} />}
         </div>
 
         <div className="space-y-1">
@@ -402,6 +406,8 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
               if (touched.deadlineDays) validateField("deadlineDays", e.target.value)
             }}
             onBlur={(e) => handleBlur("deadlineDays", e.target.value)}
+            aria-required="true"
+            aria-describedby="deadline-error"
           />
           {days > 0 && (
             <p className="text-xs text-muted-foreground flex items-center gap-1">
@@ -414,7 +420,7 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
                 : t("fetchingLedger")}
             </p>
           )}
-          {touched.deadlineDays && <FieldError message={fieldErrors.deadlineDays} />}
+          {touched.deadlineDays && <FieldError id="deadline-error" message={fieldErrors.deadlineDays} />}
         </div>
       </div>
 
@@ -466,6 +472,9 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   placeholder={tc("addressPlaceholder")}
                   value={member}
                   onChange={(e) => updateMember(i, e.target.value)}
+                  aria-label={`Member ${i + 2} address`}
+                  aria-required="true"
+                  aria-describedby={`member-error-${i}`}
                   className={
                     memberErrors[i]
                       ? "border-destructive"
@@ -475,12 +484,12 @@ export function TargetForm({ prefill }: { prefill?: DuplicatePrefill }) {
                   }
                 />
                 {members.length > 1 && (
-                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)}>
+                  <Button type="button" variant="ghost" size="icon" onClick={() => removeMember(i)} aria-label={`Remove member ${i + 2}`}>
                     <X className="h-4 w-4" />
                   </Button>
                 )}
               </div>
-              {memberErrors[i] && <FieldError message={memberErrors[i]} />}
+              {memberErrors[i] && <FieldError id={`member-error-${i}`} message={memberErrors[i]} />}
               {!memberErrors[i] && member && isValidStellarAddress(member) && (
                 <p className="text-green-600 text-xs flex items-center gap-1">
                   ✓ {tc("validAddress")}
diff --git a/frontend/components/dashboard/dashboard-header.tsx b/frontend/components/dashboard/dashboard-header.tsx
index 9e9d51c..72dff32 100644
--- a/frontend/components/dashboard/dashboard-header.tsx
+++ b/frontend/components/dashboard/dashboard-header.tsx
@@ -35,6 +35,7 @@ export function DashboardHeader() {
   const [copied, setCopied] = useState(false)
   const { recentPools } = useRecentPools(address)
   const { notifications, initialLoading, unreadCount, markAllRead } = useNotifications(address)
+  const [notificationOpen, setNotificationOpen] = useState(false)
 
   const truncatedAddress = address ? `${address.slice(0, 4)}...${address.slice(-4)}` : ""
 
@@ -100,7 +101,9 @@ export function DashboardHeader() {
             {/* Notification bell — only shown when wallet is connected */}
             {address && (
               <DropdownMenu
+                open={notificationOpen}
                 onOpenChange={(open) => {
+                  setNotificationOpen(open)
                   if (open && unreadCount > 0) markAllRead()
                 }}
               >
@@ -110,6 +113,7 @@ export function DashboardHeader() {
                     size="icon"
                     className="relative"
                     aria-label={t("notifications")}
+                    aria-expanded={notificationOpen}
                   >
                     <Bell className="h-5 w-5" />
                     {unreadCount > 0 && (
diff --git a/frontend/components/dashboard/dashboard-tabs.tsx b/frontend/components/dashboard/dashboard-tabs.tsx
index 8a1f696..9437795 100644
--- a/frontend/components/dashboard/dashboard-tabs.tsx
+++ b/frontend/components/dashboard/dashboard-tabs.tsx
@@ -39,64 +39,81 @@ export function DashboardTabs({
     setActiveTab("create")
   }, [setActiveTab])
 
+  const tabValues = ["groups", "portfolio", "explore", "create", "transactions", "analytics", "profile"];
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const currentIndex = tabValues.indexOf(activeTab);
+      const nextIndex = (currentIndex + 1) % tabValues.length;
+      setActiveTab(tabValues[nextIndex]);
+      document.getElementById(`tab-${tabValues[nextIndex]}`)?.focus();
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const currentIndex = tabValues.indexOf(activeTab);
+      const prevIndex = (currentIndex - 1 + tabValues.length) % tabValues.length;
+      setActiveTab(tabValues[prevIndex]);
+      document.getElementById(`tab-${tabValues[prevIndex]}`)?.focus();
+    }
+  };
+
   return (
     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-7 mb-8">
-        <TabsTrigger value="groups" className="flex items-center gap-2">
+      <TabsList className="grid w-full grid-cols-7 mb-8" role="tablist" onKeyDown={handleKeyDown}>
+        <TabsTrigger value="groups" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "groups"} aria-controls="content-groups" id="tab-groups">
           <Home className="h-4 w-4" />
           <span className="hidden sm:inline">{t("groups")}</span>
         </TabsTrigger>
-        <TabsTrigger value="portfolio" className="flex items-center gap-2">
+        <TabsTrigger value="portfolio" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "portfolio"} aria-controls="content-portfolio" id="tab-portfolio">
           <BarChart3 className="h-4 w-4" />
           <span className="hidden sm:inline">{t("portfolio")}</span>
         </TabsTrigger>
-        <TabsTrigger value="explore" className="flex items-center gap-2">
+        <TabsTrigger value="explore" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "explore"} aria-controls="content-explore" id="tab-explore">
           <Compass className="h-4 w-4" />
           <span className="hidden sm:inline">{t("explore")}</span>
         </TabsTrigger>
-        <TabsTrigger value="create" className="flex items-center gap-2">
+        <TabsTrigger value="create" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "create"} aria-controls="content-create" id="tab-create">
           <PlusCircle className="h-4 w-4" />
           <span className="hidden sm:inline">{t("create")}</span>
         </TabsTrigger>
-        <TabsTrigger value="transactions" className="flex items-center gap-2">
+        <TabsTrigger value="transactions" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "transactions"} aria-controls="content-transactions" id="tab-transactions">
           <Receipt className="h-4 w-4" />
           <span className="hidden sm:inline">{t("transactions")}</span>
         </TabsTrigger>
-        <TabsTrigger value="analytics" className="flex items-center gap-2">
+        <TabsTrigger value="analytics" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "analytics"} aria-controls="content-analytics" id="tab-analytics">
           <TrendingUp className="h-4 w-4" />
           <span className="hidden sm:inline">{t("analytics")}</span>
         </TabsTrigger>
-        <TabsTrigger value="profile" className="flex items-center gap-2">
+        <TabsTrigger value="profile" className="flex items-center gap-2" role="tab" aria-selected={activeTab === "profile"} aria-controls="content-profile" id="tab-profile">
           <User className="h-4 w-4" />
           <span className="hidden sm:inline">{t("profile")}</span>
         </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="groups" className="mt-0">
+      <TabsContent value="groups" className="mt-0" id="content-groups">
         <MyGroups onCreateClick={handleCreateClick} />
       </TabsContent>
 
-      <TabsContent value="portfolio" className="mt-0">
+      <TabsContent value="portfolio" className="mt-0" id="content-portfolio">
         <Portfolio />
       </TabsContent>
 
-      <TabsContent value="explore" className="mt-0">
+      <TabsContent value="explore" className="mt-0" id="content-explore">
         <Explore />
       </TabsContent>
 
-      <TabsContent value="create" className="mt-0">
+      <TabsContent value="create" className="mt-0" id="content-create">
         <CreateGroup />
       </TabsContent>
 
-      <TabsContent value="transactions" className="mt-0">
+      <TabsContent value="transactions" className="mt-0" id="content-transactions">
         <Transactions />
       </TabsContent>
 
-      <TabsContent value="analytics" className="mt-0">
+      <TabsContent value="analytics" className="mt-0" id="content-analytics">
         <AnalyticsDashboard />
       </TabsContent>
 
-      <TabsContent value="profile" className="mt-0">
+      <TabsContent value="profile" className="mt-0" id="content-profile">
         <Profile />
       </TabsContent>
     </Tabs>
diff --git a/frontend/components/dashboard/pool-card.tsx b/frontend/components/dashboard/pool-card.tsx
index d4d327a..4c00c0c 100644
--- a/frontend/components/dashboard/pool-card.tsx
+++ b/frontend/components/dashboard/pool-card.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { Card } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -196,7 +196,18 @@ export function PoolCard({ pool }: { pool: Pool }) {
 
   return (
     <motion.div variants={item}>
-      <Card className="p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col">
+      <Card 
+        className="p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none cursor-default"
+        role="article"
+        aria-label={`Pool ${pool.name}, ${pool.type} pool. Status: ${pool.status}. Members: ${pool.members_count}. Total Saved: ${formatXlm(totalSaved)}. Progress: ${progress.toFixed(1)}%`}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            document.getElementById(`pool-link-${pool.id}`)?.click();
+          }
+        }}
+      >
         <div className="flex items-start justify-between mb-4 gap-3">
           <div>
             <h3 className="text-xl font-semibold mb-1">{pool.name}</h3>
@@ -264,7 +275,7 @@ export function PoolCard({ pool }: { pool: Pool }) {
             <span className="text-muted-foreground">{t("progress")}</span>
             <span className="font-medium">{progress.toFixed(1)}%</span>
           </div>
-          <div className="h-2 bg-muted rounded-full overflow-hidden">
+          <div className="h-2 bg-muted rounded-full overflow-hidden" aria-hidden="true">
             <motion.div
               initial={{ width: 0 }}
               animate={{ width: `${progress}%` }}
@@ -272,7 +283,7 @@ export function PoolCard({ pool }: { pool: Pool }) {
               className="h-full bg-primary"
             />
           </div>
-          {progressLabel && <p className="text-xs text-muted-foreground mt-1">{progressLabel}</p>}
+          {progressLabel && <p className="text-xs text-muted-foreground mt-1" aria-hidden="true">{progressLabel}</p>}
         </div>
         {showVersionWarning && (
           <div className="flex items-center gap-2 p-3 rounded-lg bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 mb-4 text-sm font-medium">
@@ -280,8 +291,8 @@ export function PoolCard({ pool }: { pool: Pool }) {
             <span>{t("versionWarning", { version: contractVersion })}</span>
           </div>
         )}
-        <Button className="w-full bg-transparent" variant="outline" asChild>
-          <Link href={`/dashboard/group/${pool.id}`}>
+        <Button className="w-full bg-transparent" variant="outline" asChild tabIndex={-1}>
+          <Link href={`/dashboard/group/${pool.id}`} id={`pool-link-${pool.id}`}>
             {t("viewDetails")} <ArrowRight className="ml-2 h-4 w-4" />
           </Link>
         </Button>
diff --git a/frontend/components/group/group-details.tsx b/frontend/components/group/group-details.tsx
index 443fd63..b1309d9 100644
--- a/frontend/components/group/group-details.tsx
+++ b/frontend/components/group/group-details.tsx
@@ -503,17 +503,19 @@ export function GroupDetails({ groupId, contractAddress, poolAdmin }: GroupDetai
           <div>
             <h1 className="text-3xl font-bold mb-2">{group.name}</h1>
             <div className="flex items-center gap-2">
-              <Badge variant="secondary">{tPool(`type.${group.type}`)}</Badge>
-              <Badge className="bg-primary/10 text-primary hover:bg-primary/20">
+              <Badge variant="secondary" aria-label={"Pool type: " + tPool(`type.${group.type}`)}>
+                {tPool(`type.${group.type}`)}
+              </Badge>
+              <Badge className="bg-primary/10 text-primary hover:bg-primary/20" aria-label={"Pool status: " + tPool(`status.${group.status}`)}>
                 {tPool(`status.${group.status}`)}
               </Badge>
               {onchainState && (
-                <Badge variant="outline" className="text-xs">
+                <Badge variant="outline" className="text-xs" aria-label="Status: Live onchain">
                   {t("liveOnchain")}
                 </Badge>
               )}
               {hasAutoTrigger && (
-                <Badge variant="outline" className="text-xs text-blue-600 border-blue-400">
+                <Badge variant="outline" className="text-xs text-blue-600 border-blue-400" aria-label="Status: Auto-trigger enabled">
                   {t("autoTriggerEnabled")}
                 </Badge>
               )}
@@ -523,12 +525,13 @@ export function GroupDetails({ groupId, contractAddress, poolAdmin }: GroupDetai
                   className={`text-xs ${
                     ttlDays < 7 ? "text-destructive border-destructive/40 bg-destructive/10" : ""
                   }`}
+                  aria-label={`State expires in ${ttlDays} days`}
                 >
                   {t("stateExpiresIn", { days: ttlDays })}
                 </Badge>
               )}
               {isStale && !isLoading && (
-                <Badge variant="outline" className="text-xs text-amber-500 border-amber-500/40">
+                <Badge variant="outline" className="text-xs text-amber-500 border-amber-500/40" aria-label="Status: Stale data">
                   {t("stale")}
                 </Badge>
               )}
@@ -536,6 +539,7 @@ export function GroupDetails({ groupId, contractAddress, poolAdmin }: GroupDetai
                 <Badge
                   variant="outline"
                   className="text-xs text-yellow-600 border-yellow-600/40 bg-yellow-500/10"
+                  aria-label="Status: Transaction pending"
                 >
                   {t("pendingEllipsis")}
                 </Badge>
diff --git a/frontend/components/onboarding/onboarding-wizard.tsx b/frontend/components/onboarding/onboarding-wizard.tsx
index 1987c1b..0bd1174 100644
--- a/frontend/components/onboarding/onboarding-wizard.tsx
+++ b/frontend/components/onboarding/onboarding-wizard.tsx
@@ -10,6 +10,7 @@ import { Progress } from "@/components/ui/progress"
 import { Card } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
 import { useStellar } from "@/components/web3-provider"
 import { useOnboarding } from "@/hooks/useOnboarding"
 import { ONBOARDING_STEPS, ONBOARDING_STEP_COUNT, completedStepCount } from "@/lib/onboarding"
@@ -307,63 +308,58 @@ export function OnboardingWizard({ open, onClose }: WizardProps) {
   return (
     <AnimatePresence>
       {open && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
-          onClick={onClose}
-        >
-          <motion.div
-            initial={{ opacity: 0, y: 24, scale: 0.97 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 24, scale: 0.97 }}
-            transition={{ duration: 0.25 }}
-            onClick={(e) => e.stopPropagation()}
-            className="w-full max-w-lg"
-            role="dialog"
-            aria-modal="true"
-            aria-label={t("dialogAriaLabel")}
-          >
-            <Card className="p-6 sm:p-8 relative">
-              <button
-                onClick={skip}
-                aria-label={t("skipAria")}
-                className="absolute top-4 right-4 rounded-full p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-              >
-                <X className="h-4 w-4" />
-              </button>
+        <Dialog open={open} onOpenChange={(isOpen) => !isOpen && skip()}>
+          <DialogContent className="p-0 border-none bg-transparent shadow-none max-w-lg" showCloseButton={false}>
+            <motion.div
+              initial={{ opacity: 0, y: 24, scale: 0.97 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 24, scale: 0.97 }}
+              transition={{ duration: 0.25 }}
+              className="w-full"
+              role="dialog"
+              aria-modal="true"
+              aria-label={t("dialogAriaLabel")}
+            >
+              <Card className="p-6 sm:p-8 relative">
+                <button
+                  onClick={skip}
+                  aria-label={t("skipAria")}
+                  className="absolute top-4 right-4 rounded-full p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                </button>
 
-              {/* Progress bar */}
-              <div className="mb-6">
-                <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
-                  <span className="font-medium capitalize">
-                    {t("stepOf", { current: step + 1, total: ONBOARDING_STEP_COUNT })}
-                  </span>
-                  <span className="capitalize">{tSteps(stepName)}</span>
+                {/* Progress bar */}
+                <div className="mb-6">
+                  <div className="flex items-center justify-between text-xs text-muted-foreground mb-2">
+                    <span className="font-medium capitalize">
+                      {t("stepOf", { current: step + 1, total: ONBOARDING_STEP_COUNT })}
+                    </span>
+                    <span className="capitalize">{tSteps(stepName)}</span>
+                  </div>
+                  <Progress value={progress} className="h-2" />
                 </div>
-                <Progress value={progress} className="h-2" />
-              </div>
 
-              <div className="mb-6">
-                <h2 className="text-2xl font-bold mb-1">{stepCopy[step].title}</h2>
-                <p className="text-sm text-muted-foreground">{stepCopy[step].subtitle}</p>
-              </div>
+                <div className="mb-6">
+                  <h2 className="text-2xl font-bold mb-1">{stepCopy[step].title}</h2>
+                  <p className="text-sm text-muted-foreground">{stepCopy[step].subtitle}</p>
+                </div>
 
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={step}
-                  initial={{ opacity: 0, x: 16 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  exit={{ opacity: 0, x: -16 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  {renderStep()}
-                </motion.div>
-              </AnimatePresence>
-            </Card>
-          </motion.div>
-        </motion.div>
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={step}
+                    initial={{ opacity: 0, x: 16 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -16 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    {renderStep()}
+                  </motion.div>
+                </AnimatePresence>
+              </Card>
+            </motion.div>
+          </DialogContent>
+        </Dialog>
       )}
     </AnimatePresence>
   )
diff --git a/frontend/components/ui/form.tsx b/frontend/components/ui/form.tsx
index 7ed3b40..b3a6271 100644
--- a/frontend/components/ui/form.tsx
+++ b/frontend/components/ui/form.tsx
@@ -140,10 +140,10 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   )
 }
 
-function FieldError({ message, className }: { message?: string; className?: string }) {
+function FieldError({ message, className, id }: { message?: string; className?: string; id?: string }) {
   if (!message) return null
   return (
-    <p className={cn("text-destructive text-xs flex items-center gap-1 mt-1", className)}>
+    <p id={id} className={cn("text-destructive text-xs flex items-center gap-1 mt-1", className)}>
       <span aria-hidden>✕</span>
       {message}
     </p>