fix(feedback): show minimum content length

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 () => {

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;

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}