test(wallet): cover wallet page; a11y: focus rings, icon labels, skip link

[JosephOladele]

Summary

Four issues, all assigned to me:

• test(wallet): write tests for wallet page (create + view states) #473 — app/(app)/wallet/page.tsx had no tests. Added coverage for the loading spinner, the "set up your payment address" state when GET /wallet returns 400, the loaded wallet-address view, and the copy-to-clipboard button's confirmation state.
• a11y: add visible focus indicators to all interactive elements #474 — Audited every outline-none usage across the app plus the login/charge/transactions/withdraw pages' full component trees. Found and fixed two inputs with no focus-visible alternative at all (landing Pricing's country <select>, AmountWidget's amount <input>). Also found — via actually tabbing through the login page in a browser, not just static review — that the default Button variant's focus ring (ring-ring/50) is nearly invisible against its own bg-primary background on primary-colored buttons like "Sign in"; added ring-offset-2/ring-offset-background so the ring is visually separated regardless of button color. Everything else (Input, Select, links, other Button variants) already paired outline-none with a working focus-visible: alternative.
• a11y: ensure all icon-only buttons have accessible labels #475 — Audited every <Button>/<button> in the app for icon-only content with no accessible name. The two examples the issue names (charge page's backspace key, wallet page's copy button) already have visible text/aria-labels. Found three that didn't, all in the send flow: the header back button, the QR-scan button, and the numpad backspace key — added aria-label to each.
• a11y: add skip-to-main-content link for keyboard users #476 — Added a visually-hidden "Skip to main content" link as the first focusable element in app/(app)/layout.tsx, visible on focus, targeting a new main#main-content.

Closes #473
Closes #474
Closes #475
Closes #476

A blocking bug found along the way

components/session-provider.tsx didn't compile on dev — a bad merge between the Freighter-auth PR and the session-persistence PR left duplicate imports, a duplicate local Session type shadowing the one imported from @/lib/api, and two interleaved signOut implementations (the second literally opening inside the first's unclosed body). This blocks anything importing useAuthenticatedSession, including the wallet page under test here. Reconciled it to the cookie-based api.getSession()/api.logout() restoration path (the direction issue #582 already points toward) plus the Freighter sign-in flow.

What I couldn't verify

• app/(app)/transactions/page.tsx has the exact same bad-merge pattern (duplicate imports, dozens of now-undefined names) and doesn't compile at all, so I couldn't keyboard-test it directly for a11y: add visible focus indicators to all interactive elements #474. Issues Fix: transactions list capped at 50 with no pagination — older payments are inaccessible #589 and test(transactions): write tests for transaction list page #472 already track downstream symptoms of this (missing pagination, no tests). Everything that page shares with login/charge/withdraw (Button, Input, Select) is already fixed in this PR, so it'll be correct once that separate compile bug is fixed.
• No VoiceOver/NVDA available in this environment for a11y: ensure all icon-only buttons have accessible labels #475 — verified via code review (every icon-only control's accessible-name source) instead. Happy to re-verify with a screen reader if someone can.

Test plan

• npx jest — 44/44 passing, including the pre-push hook's own full run
• New tests: 4 for the wallet page, 3 for the skip link (first-focusable, targets #main-content, hidden while session isn't ready), 3 for the two send-flow icon-button labels + backspace key, 2 for the focus-ring className presence on the two fixed inputs
• npx eslint on every changed file — clean (one pre-existing jsx-a11y/label-has-associated-control error in send-page-client.tsx predates this PR, confirmed via git stash, not touched here — different a11y concern than the three issues above)
• npx tsc --noEmit — no new errors
• Manually verified in a real browser: tabbed through the entire /login page confirming every focusable element gets a clearly visible ring, confirmed the Pricing select and AmountWidget input rings render correctly. Before the ring-offset fix, the "Sign in" button's ring was the same hue as its own background and hard to see; after, there's a clear gap around the button regardless of its color.

[vercel]

@JosephOladele is attempting to deploy a commit to the kelly musk's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@JosephOladele Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits