From 246e98f4dd7a775a27defadb21b9dd32791c3fe1 Mon Sep 17 00:00:00 2001
From: barry <91018388+barry166@users.noreply.github.com>
Date: Sun, 23 Aug 2026 00:19:40 +0800
Subject: [PATCH] FIX: label the converted prompt editor

Associate the visible converted-prompt badge with its textarea so screen readers expose a stable accessible name.

Confidence: high

Scope-risk: narrow

Tested: 147 focused Jest tests; frontend TypeScript type-check; ESLint
---
 frontend/src/components/Chat/ChatInputArea.test.tsx | 3 ++-
 frontend/src/components/Chat/ChatInputArea.tsx      | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Chat/ChatInputArea.test.tsx b/frontend/src/components/Chat/ChatInputArea.test.tsx
index 1c5c601b2a..9b34899fa2 100644
--- a/frontend/src/components/Chat/ChatInputArea.test.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.test.tsx
@@ -753,7 +753,8 @@ describe("ChatInputArea", () => {
     expect(screen.getByTestId("converted-indicator")).toBeInTheDocument();
 
     // Edit the converted value
-    const convertedInput = screen.getByTestId("converted-value-input");
+    const convertedInput = screen.getByRole("textbox", { name: /converted prompt/i });
+    expect(convertedInput).toHaveValue("aGVsbG8=");
     await user.clear(convertedInput);
     await user.type(convertedInput, "new");
     expect(onConvertedValueChange).toHaveBeenCalled();
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index db5eba03cd..d41cbc7ae3 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useLayoutEffect, useRef, forwardRef, useImperativeHandle, KeyboardEvent, Ref } from 'react'
+import { useState, useEffect, useLayoutEffect, useRef, useId, forwardRef, useImperativeHandle, KeyboardEvent, Ref } from 'react'
 import {
   Button,
   Caption1,
@@ -241,6 +241,7 @@ interface TextInputRowsProps {
 
 function TextInputRows({ input, convertedValue, convertedFileChip, disabled, textareaRef, convertedRef, onInput, onKeyDown, onConvertedValueChange, onClearConvertedFileChip, styles, textInputClassName }: TextInputRowsProps) {
   const hasConversion = Boolean(convertedValue) || Boolean(convertedFileChip)
+  const convertedTextareaId = useId()
   return (
     <>
       <div className={styles.textRow}>
@@ -261,8 +262,11 @@ function TextInputRows({ input, convertedValue, convertedFileChip, disabled, tex
       </div>
       {convertedValue && (
         <div className={styles.convertedRow} data-testid="converted-indicator">
-          <span className={styles.convertedBadge}>Converted</span>
+          <label htmlFor={convertedTextareaId} className={styles.convertedBadge}>
+            Converted prompt
+          </label>
           <textarea
+            id={convertedTextareaId}
             ref={convertedRef}
             className={styles.convertedTextarea}
             value={convertedValue}