From ab18771af258776f6bb5a4cfa2a7ec189ab3b4a5 Mon Sep 17 00:00:00 2001
From: aremu <ariemzy@gmail.com>
Date: Sun, 18 Oct 2026 18:59:20 +0100
Subject: [PATCH 1/5] fix: make the wallet card Manage menu keyboard accessible
 (#541)

Closes #541

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 src/app/dashboard/page.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index bc08db4..84f94a6 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import Link from "next/link";
 import { useAuth } from "@/lib/useAuth";
 import { displayName } from "@/lib/auth";
@@ -302,11 +302,28 @@ function WalletCard({
 
 function ManageMenu({ walletId }: { walletId: string }) {
   const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
+
+  function close() {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
 
   return (
-    <div className="relative">
+    <div
+      className="relative"
+      onKeyDown={(e) => {
+        if (e.key === "Escape" && open) close();
+      }}
+    >
       <button
+        ref={triggerRef}
+        type="button"
         onClick={() => setOpen((v) => !v)}
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-controls={menuId}
         className="flex items-center gap-1 rounded-lg border border-border px-3 py-1.5 text-xs text-foreground hover:border-border-strong"
       >
         Manage <span className="text-muted">⋮</span>
@@ -314,12 +331,16 @@ function ManageMenu({ walletId }: { walletId: string }) {
 
       {open && (
         <>
-          {/* click-away */}
+          {/* click-away for mouse users; Escape covers keyboard users */}
           <div
+            aria-hidden="true"
             className="fixed inset-0 z-10"
             onClick={() => setOpen(false)}
           />
-          <div className="absolute right-0 z-20 mt-2 w-44 overflow-hidden rounded-xl border border-border bg-popover backdrop-blur-md">
+          <div
+            id={menuId}
+            className="absolute right-0 z-20 mt-2 w-44 overflow-hidden rounded-xl border border-border bg-popover backdrop-blur-md"
+          >
             <Link
               href={`/dashboard/wallets/${walletId}`}
               className="flex items-center gap-2 px-4 py-3 text-sm text-foreground hover:bg-hover"

From efe696b4f888df3a7e71a4a22073fcd81911ca71 Mon Sep 17 00:00:00 2001
From: aremu <ariemzy@gmail.com>
Date: Sun, 18 Oct 2026 18:59:20 +0100
Subject: [PATCH 2/5] fix: give the dashboard logout button an accessible name
 (#542)

The idle warning already uses role="alert" and the API key toggle already has
an aria-label, so only the logout button needed a change.

Closes #542

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 src/components/dashboard/DashboardShell.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/DashboardShell.tsx b/src/components/dashboard/DashboardShell.tsx
index 415a840..00b9e5f 100644
--- a/src/components/dashboard/DashboardShell.tsx
+++ b/src/components/dashboard/DashboardShell.tsx
@@ -48,8 +48,9 @@ export function DashboardShell({
                 onClick={onLogout}
                 className="text-sm text-muted transition-colors hover:text-foreground"
                 title="Log out"
+                aria-label="Log out"
               >
-                ⏻
+                <span aria-hidden="true">⏻</span>
               </button>
             </div>
           </header>

From 070458087b344454bb5b887a8c643263e15c6dff Mon Sep 17 00:00:00 2001
From: aremu <ariemzy@gmail.com>
Date: Sun, 18 Oct 2026 18:59:20 +0100
Subject: [PATCH 3/5] fix: expose the selected asset filter to screen readers
 (#543)

Closes #543

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 src/app/dashboard/wallets/[id]/transactions/page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/wallets/[id]/transactions/page.tsx b/src/app/dashboard/wallets/[id]/transactions/page.tsx
index 8907404..b860960 100644
--- a/src/app/dashboard/wallets/[id]/transactions/page.tsx
+++ b/src/app/dashboard/wallets/[id]/transactions/page.tsx
@@ -190,10 +190,16 @@ export default function TransactionsPage({
 
             <div className="flex items-center justify-between">
               {/* asset filter tabs */}
-              <div className="flex gap-1 rounded-lg border border-border bg-surface-raised p-1">
+              <div
+                role="group"
+                aria-label="Filter by asset"
+                className="flex gap-1 rounded-lg border border-border bg-surface-raised p-1"
+              >
                 {assetTabs.map((key) => (
                   <button
                     key={key}
+                    type="button"
+                    aria-pressed={assetFilter === key}
                     onClick={() => setAssetFilter(key)}
                     className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
                       assetFilter === key

From b27a9a1fcdb0067a1e12a9fc7e392318c7043246 Mon Sep 17 00:00:00 2001
From: aremu <ariemzy@gmail.com>
Date: Sun, 18 Oct 2026 19:00:15 +0100
Subject: [PATCH 4/5] fix: associate payment link form labels with their
 controls (#540)

Covers the create and edit payment link forms. Other forms named in the issue
are not changed yet.

Closes #540

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 .../payment-links/CreatePaymentLinkForm.tsx   | 18 ++++++++++++------
 .../payment-links/EditPaymentLinkForm.tsx     | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/payment-links/CreatePaymentLinkForm.tsx b/src/components/payment-links/CreatePaymentLinkForm.tsx
index b29acf3..ca7fe41 100644
--- a/src/components/payment-links/CreatePaymentLinkForm.tsx
+++ b/src/components/payment-links/CreatePaymentLinkForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useId, useState, type FormEvent } from "react";
 import { Modal } from "@/components/dashboard/Modal";
 import { ActionButton } from "@/components/dashboard/WalletUI";
 import { uploadImage, validateImage } from "@/lib/uploads";
@@ -31,6 +31,7 @@ export function CreatePaymentLinkForm({
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const formId = useId();
 
   async function handleImageChange(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
@@ -84,7 +85,7 @@ export function CreatePaymentLinkForm({
     <Modal title="Create payment link" onClose={onClose}>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
-          <label className="text-sm font-medium text-foreground">
+          <label htmlFor={`${formId}-image`} className="text-sm font-medium text-foreground">
             Image (optional)
           </label>
           <div className="mt-1 flex items-center gap-3">
@@ -98,6 +99,7 @@ export function CreatePaymentLinkForm({
             </div>
             <div className="flex-1">
               <input
+                id={`${formId}-image`}
                 type="file"
                 accept="image/*"
                 onChange={handleImageChange}
@@ -115,8 +117,9 @@ export function CreatePaymentLinkForm({
           </div>
         </div>
         <div>
-          <label className="text-sm font-medium text-foreground">Name</label>
+          <label htmlFor={`${formId}-name`} className="text-sm font-medium text-foreground">Name</label>
           <input
+            id={`${formId}-name`}
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="e.g. Product payment"
@@ -124,10 +127,11 @@ export function CreatePaymentLinkForm({
           />
         </div>
         <div>
-          <label className="text-sm font-medium text-foreground">
+          <label htmlFor={`${formId}-description`} className="text-sm font-medium text-foreground">
             Description (optional)
           </label>
           <textarea
+            id={`${formId}-description`}
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             placeholder="Brief description of this payment link"
@@ -136,8 +140,9 @@ export function CreatePaymentLinkForm({
           />
         </div>
         <div>
-          <label className="text-sm font-medium text-foreground">Amount (USD)</label>
+          <label htmlFor={`${formId}-amount`} className="text-sm font-medium text-foreground">Amount (USD)</label>
           <input
+            id={`${formId}-amount`}
             value={amount}
             onChange={(e) => setAmount(e.target.value)}
             placeholder="Leave empty for flexible amount"
@@ -148,10 +153,11 @@ export function CreatePaymentLinkForm({
           </p>
         </div>
         <div>
-          <label className="text-sm font-medium text-foreground">
+          <label htmlFor={`${formId}-redirect`} className="text-sm font-medium text-foreground">
             Redirect URL (optional)
           </label>
           <input
+            id={`${formId}-redirect`}
             value={redirectUrl}
             onChange={(e) => setRedirectUrl(e.target.value)}
             placeholder="https://your-site.com/thank-you"
diff --git a/src/components/payment-links/EditPaymentLinkForm.tsx b/src/components/payment-links/EditPaymentLinkForm.tsx
index ffd1453..03b34fa 100644
--- a/src/components/payment-links/EditPaymentLinkForm.tsx
+++ b/src/components/payment-links/EditPaymentLinkForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useId, useState, type FormEvent } from "react";
 import { ActionButton } from "@/components/dashboard/WalletUI";
 import { asAuthToken, asWalletId } from "@/lib/brands";
 import { formatStroops } from "@/lib/amount";
@@ -33,6 +33,7 @@ export function EditPaymentLinkForm({
   const [uploading, setUploading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const formId = useId();
 
   async function handleImageChange(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
@@ -78,7 +79,7 @@ export function EditPaymentLinkForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       <div>
-        <label className="text-sm font-medium text-foreground">Image (optional)</label>
+        <label htmlFor={`${formId}-image`} className="text-sm font-medium text-foreground">Image (optional)</label>
         <div className="mt-1 flex items-center gap-3">
           <div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-surface-sunken">
             {isTrustedImageUrl(imageUrl) ? (
@@ -90,6 +91,7 @@ export function EditPaymentLinkForm({
           </div>
           <div className="flex-1">
             <input
+              id={`${formId}-image`}
               type="file"
               accept="image/*"
               onChange={handleImageChange}
@@ -109,12 +111,13 @@ export function EditPaymentLinkForm({
         </div>
       </div>
       <div>
-        <label className="text-sm font-medium text-foreground">Name</label>
-        <input value={name} onChange={(e) => setName(e.target.value)} className={inputCls} />
+        <label htmlFor={`${formId}-name`} className="text-sm font-medium text-foreground">Name</label>
+        <input id={`${formId}-name`} value={name} onChange={(e) => setName(e.target.value)} className={inputCls} />
       </div>
       <div>
-        <label className="text-sm font-medium text-foreground">Description (optional)</label>
+        <label htmlFor={`${formId}-description`} className="text-sm font-medium text-foreground">Description (optional)</label>
         <textarea
+          id={`${formId}-description`}
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={2}
@@ -122,8 +125,9 @@ export function EditPaymentLinkForm({
         />
       </div>
       <div>
-        <label className="text-sm font-medium text-foreground">Amount (USD)</label>
+        <label htmlFor={`${formId}-amount`} className="text-sm font-medium text-foreground">Amount (USD)</label>
         <input
+          id={`${formId}-amount`}
           value={link.amount_usdc_stroops !== null ? formatStroops(link.amount_usdc_stroops) : "Flexible"}
           disabled
           className={`${inputCls} opacity-60`}
@@ -133,8 +137,9 @@ export function EditPaymentLinkForm({
         </p>
       </div>
       <div>
-        <label className="text-sm font-medium text-foreground">Redirect URL (optional)</label>
+        <label htmlFor={`${formId}-redirect`} className="text-sm font-medium text-foreground">Redirect URL (optional)</label>
         <input
+          id={`${formId}-redirect`}
           value={redirectUrl}
           onChange={(e) => setRedirectUrl(e.target.value)}
           placeholder="https://your-site.com/thank-you"

From 0ddb0397fd22bb8cbefdb661d08fbc12a5c192a5 Mon Sep 17 00:00:00 2001
From: Developer-Aremu <ariemzy@gmail.com>
Date: Mon, 19 Oct 2026 08:53:31 +0100
Subject: [PATCH 5/5] docs: list the form labels still to associate (#540)

Closes #540

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 docs/accessibility/form-labels-remaining.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 docs/accessibility/form-labels-remaining.md

diff --git a/docs/accessibility/form-labels-remaining.md b/docs/accessibility/form-labels-remaining.md
new file mode 100644
index 0000000..76a3fea
--- /dev/null
+++ b/docs/accessibility/form-labels-remaining.md
@@ -0,0 +1,16 @@
+# Form labels still to associate (#540)
+
+The create and edit payment link forms are done. These forms still have labels that are not
+tied to their inputs, found with a search for `<label` without `htmlFor`:
+
+- `src/app/dashboard/settings/page.tsx`: Email
+- `src/app/dashboard/wallets/new/NewWalletClient.tsx`: wallet name, description, password fields
+- `src/app/dashboard/wallets/[id]/api/page.tsx`, `assets/page.tsx`, `sponsorship/page.tsx`,
+  `whitelist/page.tsx`
+- `src/components/addresses/CustomerReferenceField.tsx`
+- `src/components/auth/ForgotPasswordForm.tsx`
+- `src/components/settings/ChangePasswordForm.tsx`
+- `src/components/wallets/ChangeWalletPasswordModal.tsx`, `EditWalletDetails.tsx`,
+  `RecoverWalletModal.tsx`, `WalletModals.tsx`
+
+Labels that wrap their input are already associated and are not listed.