From 11c1747a68eea17865835662fb3d4331a90c840f Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Sat, 18 Jul 2026 15:52:19 +0800
Subject: [PATCH] fix(feedback): show minimum content length

---
 src/app/feedback/__tests__/feedback-screen.test.tsx | 8 ++++++++
 src/app/feedback/feedback-screen.module.css         | 8 ++++++++
 src/app/feedback/feedback-screen.tsx                | 5 +++++
 3 files changed, 21 insertions(+)

diff --git a/src/app/feedback/__tests__/feedback-screen.test.tsx b/src/app/feedback/__tests__/feedback-screen.test.tsx
index f65226b1..8cb71f33 100644
--- a/src/app/feedback/__tests__/feedback-screen.test.tsx
+++ b/src/app/feedback/__tests__/feedback-screen.test.tsx
@@ -59,6 +59,14 @@ describe("FeedbackScreen", () => {
       container.querySelector<HTMLInputElement>('input[value="problem"]')
         ?.checked,
     ).toBe(true);
+    expect(container.textContent).toContain(
+      "Minimum 10 characters required.",
+    );
+    expect(
+      container
+        .querySelector("textarea")
+        ?.getAttribute("aria-describedby"),
+    ).toBe("feedback-content-hint");
   });
 
   it("submits valid text and renders the feedback id", async () => {
diff --git a/src/app/feedback/feedback-screen.module.css b/src/app/feedback/feedback-screen.module.css
index 8b3d4b52..1c7220b5 100644
--- a/src/app/feedback/feedback-screen.module.css
+++ b/src/app/feedback/feedback-screen.module.css
@@ -238,6 +238,14 @@ h2.fieldLabel {
   font-weight: 570;
 }
 
+.contentHint {
+  margin: -6px 0 0;
+  color: #998b90;
+  font-size: 11px;
+  font-weight: 570;
+  line-height: 1.4;
+}
+
 .imageCount {
   flex: 0 0 auto;
   color: #8d7c82;
diff --git a/src/app/feedback/feedback-screen.tsx b/src/app/feedback/feedback-screen.tsx
index d5ab66b1..6d442daf 100644
--- a/src/app/feedback/feedback-screen.tsx
+++ b/src/app/feedback/feedback-screen.tsx
@@ -25,6 +25,7 @@ import {
   FEEDBACK_IMAGE_LIMIT,
 } from "./feedback-image";
 import {
+  FEEDBACK_CONTENT_MIN_LENGTH,
   FEEDBACK_CONTENT_MAX_LENGTH,
   useFeedbackSubmission,
 } from "./use-feedback-submission";
@@ -143,9 +144,13 @@ export function FeedbackScreen() {
             <label className={styles.fieldLabel} htmlFor="feedback-content">
               Describe your feedback
             </label>
+            <p id="feedback-content-hint" className={styles.contentHint}>
+              Minimum {FEEDBACK_CONTENT_MIN_LENGTH} characters required.
+            </p>
             <div className={styles.textareaFrame}>
               <textarea
                 id="feedback-content"
+                aria-describedby="feedback-content-hint"
                 value={form.content}
                 maxLength={FEEDBACK_CONTENT_MAX_LENGTH}
                 disabled={form.isSubmitting}