From ed6a0a9b640aa6d2dafd90e67ce5950f32a42826 Mon Sep 17 00:00:00 2001
From: kingbitnation <kingbitstores@gmail.com>
Date: Sun, 28 Jun 2026 13:22:55 +0100
Subject: [PATCH 1/2] fix(a11y): associate Token and Memo labels in
 RemittanceForm

Wire label htmlFor to matching control ids so screen readers and tests
can resolve accessible names for the token select and memo textarea.

Closes #1230
---
 .../components/remittance/RemittanceForm.test.tsx    | 10 +++-------
 .../src/app/components/remittance/RemittanceForm.tsx | 12 ++++++++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/components/remittance/RemittanceForm.test.tsx b/frontend/src/app/components/remittance/RemittanceForm.test.tsx
index 4df20894..336453d6 100644
--- a/frontend/src/app/components/remittance/RemittanceForm.test.tsx
+++ b/frontend/src/app/components/remittance/RemittanceForm.test.tsx
@@ -116,9 +116,7 @@ describe("RemittanceForm", () => {
     await user.type(addressInput, VALID_ADDRESS);
     await user.type(amountInput, "100");
 
-    const memoInput = screen.getByPlaceholderText(
-      "Add a note for the recipient (max 28 characters)",
-    );
+    const memoInput = screen.getByLabelText(/^Memo/);
     // Use fireEvent.change to bypass the textarea's maxLength attribute
     fireEvent.change(memoInput, {
       target: { value: "This is a very long memo that exceeds the limit" },
@@ -136,9 +134,7 @@ describe("RemittanceForm", () => {
     const user = userEvent.setup();
     render(<RemittanceForm onSuccess={mockOnSuccess} />);
 
-    const memoInput = screen.getByPlaceholderText(
-      "Add a note for the recipient (max 28 characters)",
-    );
+    const memoInput = screen.getByLabelText(/^Memo/);
     await user.type(memoInput, "Test memo");
 
     await waitFor(() => {
@@ -150,7 +146,7 @@ describe("RemittanceForm", () => {
     const user = userEvent.setup();
     render(<RemittanceForm onSuccess={mockOnSuccess} />);
 
-    const tokenSelect = screen.getByDisplayValue("USDC");
+    const tokenSelect = screen.getByLabelText(/^Token/);
     expect(tokenSelect).toBeInTheDocument();
 
     await user.selectOptions(tokenSelect, "EURC");
diff --git a/frontend/src/app/components/remittance/RemittanceForm.tsx b/frontend/src/app/components/remittance/RemittanceForm.tsx
index 63b67704..667e964c 100644
--- a/frontend/src/app/components/remittance/RemittanceForm.tsx
+++ b/frontend/src/app/components/remittance/RemittanceForm.tsx
@@ -170,10 +170,14 @@ export function RemittanceForm({ onSuccess }: RemittanceFormProps) {
 
             {/* Token Selection */}
             <div className="space-y-2">
-              <label className="block text-sm font-semibold text-zinc-900 dark:text-zinc-50">
+              <label
+                htmlFor="token"
+                className="block text-sm font-semibold text-zinc-900 dark:text-zinc-50"
+              >
                 Token <span className="text-red-600">*</span>
               </label>
               <select
+                id="token"
                 value={token}
                 onChange={(e) => setToken(e.target.value)}
                 disabled={mutation.isPending}
@@ -212,10 +216,14 @@ export function RemittanceForm({ onSuccess }: RemittanceFormProps) {
 
             {/* Memo (Optional) */}
             <div className="space-y-2">
-              <label className="block text-sm font-semibold text-zinc-900 dark:text-zinc-50">
+              <label
+                htmlFor="memo"
+                className="block text-sm font-semibold text-zinc-900 dark:text-zinc-50"
+              >
                 Memo <span className="text-zinc-400">(optional)</span>
               </label>
               <textarea
+                id="memo"
                 placeholder="Add a note for the recipient (max 28 characters)"
                 value={memo}
                 onChange={(e) => handleMemoChange(e.target.value)}

From 1377327c171b6de2e93be4b2c87c55370370c1d0 Mon Sep 17 00:00:00 2001
From: kingbitnation <kingbitstores@gmail.com>
Date: Sun, 28 Jun 2026 13:32:44 +0100
Subject: [PATCH 2/2] style: format RemittanceForm textarea className for
 prettier

---
 frontend/src/app/components/remittance/RemittanceForm.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/remittance/RemittanceForm.tsx b/frontend/src/app/components/remittance/RemittanceForm.tsx
index 667e964c..6f31b263 100644
--- a/frontend/src/app/components/remittance/RemittanceForm.tsx
+++ b/frontend/src/app/components/remittance/RemittanceForm.tsx
@@ -230,8 +230,9 @@ export function RemittanceForm({ onSuccess }: RemittanceFormProps) {
                 disabled={mutation.isPending}
                 maxLength={28}
                 rows={2}
-                className={`w-full px-3 py-2 border rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-400 resize-none dark:border-zinc-700 ${errors.memo ? "border-red-600" : "border-zinc-300"
-                  }`}
+                className={`w-full px-3 py-2 border rounded-lg bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:focus:ring-indigo-400 resize-none dark:border-zinc-700 ${
+                  errors.memo ? "border-red-600" : "border-zinc-300"
+                }`}
               />
               {errors.memo && (
                 <div className="flex items-start gap-2 text-sm text-red-600">