From 2b907559ecb31d0f7e4c89d04db23683ac20f3fd Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 24 Jun 2026 05:19:36 +0000
Subject: [PATCH] feat(participant): add progressive character limit counter

- Updates the ResponseForm character limit counter to change colors at 80% (orange) and 100% (red).
- Adds strictly static accessible screen reader warnings using `role="status"` to announce limits without relying on noisy `aria-live` attributes.
- Adds related learning to `.Jules/palette.md`.

Co-authored-by: Sczitzo <46541128+Sczitzo@users.noreply.github.com>
---
 .Jules/palette.md                           |  4 ++++
 src/components/participant/ResponseForm.tsx | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 2802bd6..e474b55 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -15,3 +15,7 @@
 ## 2026-10-24 - Form Success State Feedback
 **Learning:** Temporarily disabling the submit button and changing its state to a success message without wiping the form inputs asynchronously prevents data loss while maintaining clear feedback for the user on successful submissions.
 **Action:** For successful form submissions, temporarily (e.g., 2s) disable the submit button, change its text to a success message, and reset the form inputs immediately rather than inside the timeout.
+
+## 2026-10-26 - Accessible Character Limit Warnings
+**Learning:** Adding `aria-live` to a dynamic character count (e.g., "240 / 300") creates a very noisy experience for screen reader users on every keystroke.
+**Action:** Instead of making the changing number live, use progressive visual feedback (color changes) and conditionally render separate, strictly static visually hidden elements with `role="status"` at specific thresholds (e.g., 80% and 100%) to announce warnings gracefully.
diff --git a/src/components/participant/ResponseForm.tsx b/src/components/participant/ResponseForm.tsx
index ec72b44..9e639fa 100644
--- a/src/components/participant/ResponseForm.tsx
+++ b/src/components/participant/ResponseForm.tsx
@@ -128,10 +128,26 @@ export function ResponseForm({ sessionId, promptId, socket }: ResponseFormProps)
             />
             <div
               id="alternativeThought-counter"
-              className="text-right text-xs text-gray-500 mt-1"
+              className={`text-right text-xs mt-1 transition-colors ${
+                alternativeThought.length >= 300
+                  ? 'text-red-600 font-bold'
+                  : alternativeThought.length >= 240
+                  ? 'text-orange-700 font-medium'
+                  : 'text-gray-500'
+              }`}
             >
               {alternativeThought.length} / 300 characters
             </div>
+            {alternativeThought.length >= 240 && alternativeThought.length < 300 && (
+              <div role="status" className="sr-only">
+                Approaching character limit
+              </div>
+            )}
+            {alternativeThought.length >= 300 && (
+              <div role="status" className="sr-only">
+                Character limit reached
+              </div>
+            )}
           </div>
 
           <div>