fix(webapp): step the composer's live region instead of reading every keystroke

Between the warning point and the limit the region announced a new count
per character; it now steps in 200s and names the limit on reaching it.

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/message-limits.test.ts

@@ -7,7 +7,9 @@ import {
   MAX_MESSAGE_BODY_BYTES,
   MAX_MESSAGE_CHARS,
   MAX_MESSAGE_PARTS,
+  MESSAGE_ANNOUNCE_STEP,
   MESSAGE_CHARS_WARN_AT,
+  MESSAGE_LIMIT_REACHED_ANNOUNCEMENT,
   messageCountAnnouncement,
 } from "./message-limits";
 
@@ -71,13 +73,47 @@ describe("messageCountAnnouncement", () => {
     expect(messageCountAnnouncement(MESSAGE_CHARS_WARN_AT - 1)).toBe("");
   });
 
-  it("reads the count out from the warning point on", () => {
+  it("speaks up on reaching the warning point, and again on the limit", () => {
     expect(messageCountAnnouncement(MESSAGE_CHARS_WARN_AT)).toBe(
-      `${MESSAGE_CHARS_WARN_AT} / ${MAX_MESSAGE_CHARS}`
-    );
-    expect(messageCountAnnouncement(MAX_MESSAGE_CHARS)).toBe(
-      `${MAX_MESSAGE_CHARS} / ${MAX_MESSAGE_CHARS}`
+      `${MAX_MESSAGE_CHARS - MESSAGE_CHARS_WARN_AT} characters left`
     );
+    expect(messageCountAnnouncement(MAX_MESSAGE_CHARS)).toBe(MESSAGE_LIMIT_REACHED_ANNOUNCEMENT);
+  });
+
+  it("changes rarely enough to be worth listening to", () => {
+    const spoken = new Set<string>();
+    let changes = 0;
+    let previous = messageCountAnnouncement(MESSAGE_CHARS_WARN_AT - 1);
+
+    for (let length = MESSAGE_CHARS_WARN_AT - 1; length <= MAX_MESSAGE_CHARS; length++) {
+      const announcement = messageCountAnnouncement(length);
+      if (announcement !== previous) changes++;
+      previous = announcement;
+      if (announcement) spoken.add(announcement);
+    }
+
+    // One per step across the warning band, plus the limit itself.
+    const expected = (MAX_MESSAGE_CHARS - MESSAGE_CHARS_WARN_AT) / MESSAGE_ANNOUNCE_STEP + 1;
+    expect(spoken.size).toBe(expected);
+    expect(changes).toBe(expected);
+    expect(spoken).toContain(MESSAGE_LIMIT_REACHED_ANNOUNCEMENT);
+  });
+
+  it("steps down through the band in order", () => {
+    // Typing one character can only ever move the announcement forward.
+    const seen: string[] = [];
+    for (let length = MESSAGE_CHARS_WARN_AT; length <= MAX_MESSAGE_CHARS; length++) {
+      const announcement = messageCountAnnouncement(length);
+      if (seen.at(-1) !== announcement) seen.push(announcement);
+    }
+
+    expect(seen).toEqual([
+      "800 characters left",
+      "600 characters left",
+      "400 characters left",
+      "200 characters left",
+      MESSAGE_LIMIT_REACHED_ANNOUNCEMENT,
+    ]);
   });
 });
 

apps/webapp/app/components/dashboard-agent/message-limits.ts

@@ -10,13 +10,28 @@ export const MAX_MESSAGE_CHARS = 8_000;
 /** The counter only shows near the limit, so a normal message never sees it. */
 export const MESSAGE_CHARS_WARN_AT = Math.floor(MAX_MESSAGE_CHARS * 0.9);
 
+/** The live region rounds the remaining characters up to this, so it speaks in steps. */
+export const MESSAGE_ANNOUNCE_STEP = 200;
+
+export const MESSAGE_LIMIT_REACHED_ANNOUNCEMENT = "Message limit reached";
+
 /**
  * What the composer's live region says at this length: empty until the counter is worth
  * showing. The region itself stays mounted whatever this returns — several screen readers only
  * announce changes to a region that was already in the DOM.
+ *
+ * A live count would be read out once per keystroke, so this steps instead: four announcements
+ * between the warning point and the limit, and one more on reaching it. The exact count stays in
+ * the visible counter.
  */
 export function messageCountAnnouncement(length: number): string {
-  return length >= MESSAGE_CHARS_WARN_AT ? `${length} / ${MAX_MESSAGE_CHARS}` : "";
+  if (length < MESSAGE_CHARS_WARN_AT) return "";
+
+  const remaining = Math.max(MAX_MESSAGE_CHARS - length, 0);
+  if (remaining === 0) return MESSAGE_LIMIT_REACHED_ANNOUNCEMENT;
+
+  const step = Math.ceil(remaining / MESSAGE_ANNOUNCE_STEP) * MESSAGE_ANNOUNCE_STEP;
+  return `${step} characters left`;
 }
 
 /** A composed message is a handful of parts; dozens means something is wrong. */