WCAG 2.1 AA accessibility audit and remediation for the claim flow Lo…

.github/workflows/frontend-ci.yml

@@ -58,6 +58,10 @@ jobs:
         if: steps.pkg.outputs.has_test == 'true'
         run: npm test
 
+      - name: Run accessibility (axe-core) tests
+        if: steps.pkg.outputs.has_test == 'true'
+        run: npm run test:a11y:ci
+
       - name: Run unit tests with coverage
         if: steps.pkg.outputs.has_test == 'true'
         run: npm run test:coverage
@@ -124,4 +128,4 @@ jobs:
         with:
           name: playwright-report
           path: frontend/playwright-report/
-          retention-days: 7
+          retention-days: 7

frontend/components/wallet-connect.tsx

@@ -49,7 +49,7 @@ export function WalletConnect({ onConnected, onRejected }: WalletConnectProps) {
       <button
         onClick={handleConnect}
         disabled={status === 'connecting'}
-        className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700 disabled:opacity-60"
+        className="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700 disabled:opacity-60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900"
         type="button"
       >
         {status === 'connecting' ? 'Connecting…' : 'Connect Freighter Wallet'}
@@ -59,14 +59,15 @@ export function WalletConnect({ onConnected, onRejected }: WalletConnectProps) {
         Auth is wallet-based — signing a transaction with your Freighter key proves you control this
         address. No password or JWT is required.{' '}
         <a
-          href="https://docs.freighter.app"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline underline-offset-2 hover:text-slate-800"
-        >
-          Install Freighter
-        </a>
+            href="https://docs.freighter.app"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Install Freighter wallet (opens in new tab)"
+            className="underline underline-offset-2 hover:text-slate-800"
+          >
+            Install Freighter
+          </a>
       </p>
     </div>
   );
-}
+}

frontend/package.json

@@ -14,6 +14,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:a11y": "vitest run tests/a11y",
+    "test:a11y:ci": "vitest run tests/a11y --reporter=json --output-file=a11y-results.json",
     "test:visual": "chromatic --exit-zero-on-changes",
     "test:visual:ci": "chromatic --exit-zero-on-changes --only-changed",
     "lint": "eslint .",
@@ -70,4 +71,4 @@
     "msw@2.15.0": true,
     "unrs-resolver@1.12.2": true
   }
-}
+}