From f9e59245f38940e57ea43e35381fa315912e0bfa Mon Sep 17 00:00:00 2001
From: jaytbarimbao-collab
 <300663773+jaytbarimbao-collab@users.noreply.github.com>
Date: Mon, 20 Jul 2026 06:58:24 -0400
Subject: [PATCH] fix(miner-ui): give ChatComposer's textarea an accessible
 name

The ui-kit Textarea is a bare native <textarea> with no label, and the
placeholder is not a reliable accessible name (it vanishes on input and is
exposed to assistive tech inconsistently). Add a stable aria-label="Chat
message" independent of the placeholder prop, matching how the other
bare/icon-only controls in this codebase are labelled.

Closes #7440
---
 apps/loopover-miner-ui/src/chat-composer.test.tsx       | 3 ++-
 apps/loopover-miner-ui/src/components/chat-composer.tsx | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/loopover-miner-ui/src/chat-composer.test.tsx b/apps/loopover-miner-ui/src/chat-composer.test.tsx
index 863ed2d5e3..e1ab77940b 100644
--- a/apps/loopover-miner-ui/src/chat-composer.test.tsx
+++ b/apps/loopover-miner-ui/src/chat-composer.test.tsx
@@ -9,7 +9,8 @@ const MAX_HEIGHT_PX = 160;
 function setup(props: Partial<Parameters<typeof ChatComposer>[0]> = {}) {
   const onSubmit = vi.fn();
   render(<ChatComposer onSubmit={onSubmit} {...props} />);
-  const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+  // #7440: query by accessible name so this pins that the composer's textarea actually has one.
+  const textarea = screen.getByRole("textbox", { name: /chat message/i }) as HTMLTextAreaElement;
   return { onSubmit, textarea, button: screen.getByRole("button", { name: /send/i }) };
 }
 
diff --git a/apps/loopover-miner-ui/src/components/chat-composer.tsx b/apps/loopover-miner-ui/src/components/chat-composer.tsx
index 3509b4b28a..55a58282d1 100644
--- a/apps/loopover-miner-ui/src/components/chat-composer.tsx
+++ b/apps/loopover-miner-ui/src/components/chat-composer.tsx
@@ -58,6 +58,10 @@ export function ChatComposer({
     <div className="flex items-end gap-2">
       <Textarea
         ref={textareaRef}
+        // #7440: the ui-kit Textarea is a bare native <textarea> with no label of its own, and a
+        // placeholder is not a reliable accessible name (it vanishes once typing starts and is exposed
+        // to AT inconsistently). Give it a stable, purpose-describing name independent of `placeholder`.
+        aria-label="Chat message"
         value={value}
         onChange={(event) => setValue(event.target.value)}
         onKeyDown={(event) => {