From 0055081e3c84b9671c0fd42ca19195c13f5ad666 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 01:19:37 +0000
Subject: [PATCH 1/3] fix(fields): stop the textarea character counter
 re-announcing on every keystroke (#3408)

The counter block was three things at once: the visible {n}/{max} digits, the
carrier of the translated sentence (#3406) and the aria-live region itself. So
every re-render was an announcement. Measured on origin/main (zh, maxLength
500, a 52-character sentence typed one character at a time): 52 keystrokes ->
52 distinct announcements, 979 spoken characters, ~19x the text being written,
each one interrupting the screen reader's echo of the letter just pressed. The
textarea also carried no aria-describedby, so focusing the field said nothing
about the cap.

Split into the GOV.UK character-count shape:

  - the visible digits are aria-hidden and decorative;
  - fields.textarea.characterCount moved onto the textarea's aria-describedby
    (appended to the host's, never replacing it) and is read once on focus;
  - a separate visually-hidden aria-live="polite" region carries a new
    near-limit warning, fields.textarea.charactersRemaining (ten packs), gated
    to the last 10% / 20 characters of the cap -- whichever comes first -- and
    debounced by 1s.

The same 52-keystroke probe now announces 0 times; a run typing all the way
onto a 500-character cap announces 5.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GTRjn8xBqp75dk7kFupVRt
---
 .../textarea-character-count-live-region.md   |  10 +
 packages/fields/src/widgets/TextAreaField.tsx | 196 +++++++--
 ...ield.characterCount.announcements.test.tsx | 397 ++++++++++++++++++
 ...TextAreaField.characterCount.i18n.test.tsx | 137 ++++--
 ...aField.characterCount.no-provider.test.tsx |  60 ++-
 .../fields/src/widgets/useFieldTranslation.ts |  14 +
 ...tarea-charactercount-locale-parity.test.ts |  69 +++
 packages/i18n/src/locales/ar.ts               |   1 +
 packages/i18n/src/locales/de.ts               |   1 +
 packages/i18n/src/locales/en.ts               |  19 +-
 packages/i18n/src/locales/es.ts               |   1 +
 packages/i18n/src/locales/fr.ts               |   1 +
 packages/i18n/src/locales/ja.ts               |   1 +
 packages/i18n/src/locales/ko.ts               |   1 +
 packages/i18n/src/locales/pt.ts               |   1 +
 packages/i18n/src/locales/ru.ts               |   1 +
 packages/i18n/src/locales/zh.ts               |   1 +
 17 files changed, 834 insertions(+), 77 deletions(-)
 create mode 100644 .changeset/textarea-character-count-live-region.md
 create mode 100644 packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx

diff --git a/.changeset/textarea-character-count-live-region.md b/.changeset/textarea-character-count-live-region.md
new file mode 100644
index 0000000000..2d6d5bedfe
--- /dev/null
+++ b/.changeset/textarea-character-count-live-region.md
@@ -0,0 +1,10 @@
+---
+'@object-ui/fields': patch
+'@object-ui/i18n': patch
+---
+
+`TextAreaField`'s character counter no longer re-announces itself on every keystroke. Measured on `main` in a zh session with `maxLength: 500`, typing a 52-character sentence one character at a time produced 52 distinct screen-reader announcements totalling 979 spoken characters — roughly 19x the text being written, each one cutting off the reader's echo of the letter just typed. The counter element was simultaneously the visible `{n}/{max}` digits, the carrier of the translated sentence and the `aria-live` region itself, so "re-render" and "announce" were the same event; the field also had no `aria-describedby`, so focusing it said nothing about the cap at all (#3408).
+
+It is now the three-node shape the GOV.UK Design System character-count component uses: the visible digits are `aria-hidden` and purely decorative; the counter sentence (`fields.textarea.characterCount`, unchanged in all ten packs) has moved onto the textarea's `aria-describedby`, so focus reads "Character count: 12 of 500" once and then stays quiet; and a separate visually-hidden `aria-live="polite"` region carries a new near-limit warning, `fields.textarea.charactersRemaining` (new in all ten packs), which stays silent until the value is inside the last 10% or last 20 characters of the cap — whichever the typist reaches first — and updates only after typing pauses for a second. The same 52-keystroke probe now produces zero announcements; a run that types all the way onto a 500-character cap produces five. Any `aria-describedby` the host already supplied (the form renderer's description and error-message ids) is appended to, never replaced.
+
+No metadata change: the counter still renders exactly when the field declares `maxLength` (or the legacy `max_length`), and a widget rendered with no `I18nProvider` still shows the same English sentences.
diff --git a/packages/fields/src/widgets/TextAreaField.tsx b/packages/fields/src/widgets/TextAreaField.tsx
index 62f8bce440..17347935af 100644
--- a/packages/fields/src/widgets/TextAreaField.tsx
+++ b/packages/fields/src/widgets/TextAreaField.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import { Textarea, EmptyValue } from '@object-ui/components';
 import { FullscreenFieldEditor } from './FullscreenFieldEditor';
 import { FieldWidgetComponentProps } from './types';
@@ -37,13 +37,116 @@ import { useFieldTranslation } from './useFieldTranslation';
  * override is ever genuinely needed, declare ONE key on
  * `FieldWidgetComponentProps`, stop stripping it, and have a host pass it.
  */
+
+/**
+ * How long the typist must pause before the counter's status region is allowed
+ * to change (objectui#3408). The GOV.UK Design System character-count component
+ * uses the same shape and the same order of magnitude.
+ *
+ * The number this replaces was effectively 0: the counter WAS the live region,
+ * so every keystroke re-rendered it and every re-render was an announcement.
+ * Measured on `origin/main`, zh session, `maxLength: 500`, typing a 52-character
+ * sentence one character at a time: 52 keystrokes produced 52 distinct
+ * announcements totalling 979 spoken characters — ~19x the text the user was
+ * trying to write, each one interrupting the screen reader's echo of what they
+ * had just typed.
+ */
+const COUNTER_STATUS_DEBOUNCE_MS = 1000;
+
+/** Announce inside the last 10% of the cap … */
+const COUNTER_STATUS_REMAINING_RATIO = 0.1;
+/** … or the last 20 characters — whichever the typist reaches FIRST. */
+const COUNTER_STATUS_MIN_REMAINING = 20;
+
+/**
+ * The remaining-character count at or below which the status region speaks.
+ *
+ * "10% remaining OR 20 characters remaining, whichever comes first" is a
+ * disjunction, and because `remaining` only ever counts DOWN as the user types,
+ * the branch that fires first is simply the LARGER of the two — hence `max`.
+ * A 500-character cap starts warning at 50 remaining; a 100-character cap at 20
+ * (10% of it would be 10, which the typist would reach later, not sooner).
+ *
+ * A cap smaller than {@link COUNTER_STATUS_MIN_REMAINING} is therefore "near
+ * the limit" from the first keystroke, which is correct: on a 10-character
+ * field every character genuinely is one of the last few. The debounce still
+ * bounds it to one announcement per pause.
+ */
+function counterStatusThreshold(maxLength: number): number {
+  return Math.max(
+    Math.ceil(maxLength * COUNTER_STATUS_REMAINING_RATIO),
+    COUNTER_STATUS_MIN_REMAINING,
+  );
+}
 export function TextAreaField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  // Above the `readonly` early return on purpose: a hook may not sit behind a
-  // conditional return. The readonly branch renders no counter, so this is a
-  // no-op there — but moving it down would desync hook order the moment a
-  // field toggles readonly.
+  // Everything from here to the `readonly` early return is hook-order
+  // territory: a hook may not sit behind a conditional return. The readonly
+  // branch renders no counter, so these are no-ops there — but moving them
+  // down would desync hook order the moment a field toggles readonly. The
+  // derivations they read (`maxLength`, `length`) sit up here for the same
+  // reason, not because the readonly branch wants them.
   const { t } = useFieldTranslation();
 
+  const textareaField = field as any;
+  // Spec FieldSchema declares camelCase `maxLength`; `max_length` is the legacy
+  // objectui spelling. Dual-read (framework#1878 §3 recheck) — without this a
+  // spec-authored maxLength gave neither the textarea cap nor the counter.
+  const maxLength = textareaField?.maxLength ?? textareaField?.max_length;
+  const length = (value || '').length;
+
+  // Two ids off one `useId()`: the description a screen reader reads ONCE on
+  // focus, and the status region it hears only near the cap. Both derive from
+  // the widget instance, so two textareas on one form never collide.
+  const instanceId = useId();
+  const descriptionId = `${instanceId}-charcount`;
+
+  /**
+   * The counter sentence as a DESCRIPTION (objectui#3408). Reached through the
+   * textarea's `aria-describedby`, so focusing the field says "12 characters,
+   * 500 max" once and then shuts up. Before this the cap was announced only as
+   * a side effect of typing — focus told a screen reader user nothing at all
+   * that a sighted user could read off the corner of the box.
+   *
+   * Same key the visible counter's `aria-label` used to carry (objectui#3406,
+   * ten packs); it moved from a live region onto a description, it was not
+   * duplicated.
+   */
+  const description = maxLength
+    ? t('fields.textarea.characterCount', { count: length, max: maxLength })
+    : '';
+
+  /**
+   * The near-limit warning, gated. Silent for the whole comfortable middle of
+   * the field — a count nobody is close to is not news — and phrased as what
+   * is LEFT rather than what has been typed, because that is the number the
+   * user is about to act on. Over-long values (a cap lowered after the record
+   * was saved) clamp to 0: the textarea's own `maxLength` blocks further
+   * input, so "0 left" is the true actionable state, and the description above
+   * still carries the honest `503 of 500`.
+   */
+  const pendingStatus =
+    !readonly && maxLength && maxLength - length <= counterStatusThreshold(maxLength)
+      ? t('fields.textarea.charactersRemaining', { count: Math.max(maxLength - length, 0) })
+      : '';
+
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    // Leaving the threshold (or the field going readonly) silences the region
+    // immediately — emptying a live region announces nothing, so this costs no
+    // speech. Only ENTERING it is debounced.
+    if (!pendingStatus) {
+      setStatus('');
+      return;
+    }
+    const timer = setTimeout(() => setStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
+    // Every keystroke cancels the previous pending announcement, so a typist
+    // who never pauses is never interrupted. The dependency is the SENTENCE,
+    // not the length: re-typing back to the same count produces the same string
+    // and therefore no DOM change and no second announcement.
+    return () => clearTimeout(timer);
+  }, [pendingStatus]);
+
   if (readonly) {
     return (
       <div className="text-sm whitespace-pre-wrap">
@@ -52,12 +155,7 @@ export function TextAreaField({ value, onChange, field, readonly, error, ...prop
     );
   }
 
-  const textareaField = field as any;
   const rows = textareaField?.rows || 4;
-  // Spec FieldSchema declares camelCase `maxLength`; `max_length` is the legacy
-  // objectui spelling. Dual-read (framework#1878 §3 recheck) — without this a
-  // spec-authored maxLength gave neither the textarea cap nor the counter.
-  const maxLength = textareaField?.maxLength ?? textareaField?.max_length;
   // Mobile fullscreen opt-in travels on the field metadata and nowhere else.
   // That metadata has exactly one carrier (`field`, objectui#3233), so this is
   // a single read — a misspelled flag has no read path to quietly catch it.
@@ -71,6 +169,16 @@ export function TextAreaField({ value, onChange, field, readonly, error, ...prop
   // `isSubmitting`, so that hole was open for the duration of every submit.
   const disabled = Boolean(domProps.disabled);
 
+  // APPENDED, never assigned (objectui#3408). `<FormControl>` is a Radix Slot
+  // and already hands the control an `aria-describedby` naming the field's
+  // description and error message; it arrives here through `toDomProps`'
+  // `aria-*` pass-through. Overwriting it would trade "no cap announced" for
+  // "no error announced" — a strictly worse bug, and a silent one.
+  const describedBy =
+    [domProps['aria-describedby'], maxLength ? descriptionId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
   return (
     <div className="relative">
       <Textarea
@@ -82,36 +190,50 @@ export function TextAreaField({ value, onChange, field, readonly, error, ...prop
         rows={rows}
         maxLength={maxLength}
         aria-invalid={!!error}
+        // After the spread so the composed value wins over the raw host one.
+        aria-describedby={describedBy}
         className={domProps.className}
       />
       {maxLength && (
-        <div
-          className="absolute bottom-2 right-2 text-xs text-gray-400"
-          aria-live="polite"
-          // objectui#3406 — this was the English literal
-          // `Character count: ${n} of ${max}`. The VISIBLE text next to it is
-          // digits and needs no locale, but the accessible name is a sentence,
-          // and this element is `aria-live`, so a non-English session heard an
-          // English sentence read out on every keystroke.
-          //
-          // One interpolated key rather than a per-part assembly: ja and ko
-          // interpolate the CAP BEFORE the count ("of {{max}} characters,
-          // {{count}}"), an order no code-side concatenation can express.
-          // The English default in `FIELD_DEFAULTS` is
-          // byte-identical to the literal it replaces, so a widget rendered
-          // with no I18nProvider is unchanged.
-          //
-          // Deliberately NOT changed here: `aria-live="polite"` plus a name
-          // recomputed per keystroke. That is a behaviour question (how often
-          // a screen reader should speak), filed separately — this change is
-          // key-ing only, byte-for-byte in English.
-          aria-label={t('fields.textarea.characterCount', {
-            count: (value || '').length,
-            max: maxLength,
-          })}
-        >
-          {(value || '').length}/{maxLength}
-        </div>
+        <>
+          {/*
+            The VISIBLE counter, and now visible ONLY (objectui#3408). It used
+            to be three things at once: the digits a sighted user glances at,
+            the carrier of the translated sentence (objectui#3406), and the
+            live region itself — so the sentence was re-announced on every
+            single keystroke. Split into the three nodes below, this one is
+            decorative: `aria-hidden` keeps a screen reader from reading
+            "5 slash 200" on top of the description that says it properly.
+          */}
+          <div
+            className="absolute bottom-2 right-2 text-xs text-gray-400"
+            aria-hidden="true"
+            data-testid="textarea-character-count"
+          >
+            {length}/{maxLength}
+          </div>
+
+          {/*
+            The DESCRIPTION. Referenced by the textarea's `aria-describedby`,
+            never announced on its own — a screen reader reads it when focus
+            lands on the field and not again. Visually hidden because the
+            digits above already say it to the eye.
+          */}
+          <span id={descriptionId} className="sr-only">
+            {description}
+          </span>
+
+          {/*
+            The STATUS region. Rendered unconditionally (whenever there is a
+            cap) and starting EMPTY on purpose: a live region has to be in the
+            DOM before its content changes or the first change is not announced
+            at all. `aria-atomic` so the whole sentence is spoken rather than
+            the digits that differ from last time.
+          */}
+          <span className="sr-only" aria-live="polite" aria-atomic="true">
+            {status}
+          </span>
+        </>
       )}
 
       {showFullscreenButton && (
diff --git a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx
new file mode 100644
index 0000000000..dbab6fbfc9
--- /dev/null
+++ b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx
@@ -0,0 +1,397 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * HOW OFTEN the textarea character counter speaks, and what a screen reader can
+ * find out without typing at all — objectui#3408.
+ *
+ * objectui#3406 keyed the counter's sentence and deliberately changed no
+ * behaviour. This file is the behaviour half.
+ *
+ * ## The measurement this replaces
+ *
+ * Probe run against `origin/main` (zh session, `maxLength: 500`, the sentence
+ * "Follow up with the customer about the renewal quote." typed one character at
+ * a time — reproduced verbatim by `speaks nothing across the issue's 52
+ * keystroke probe` below):
+ *
+ * ```json
+ * { "keystrokes": 52, "announcementsFired": 52, "distinctAnnouncements": 52,
+ *   "totalCharsSpoken": 979, "regionIsAriaHidden": null,
+ *   "textareaDescribedBy": null }
+ * ```
+ *
+ * 979 spoken characters for 52 typed ones — ~19x — every one of them cutting
+ * off the screen reader's echo of the letter the user had just pressed. The
+ * counter element was simultaneously the visible digits, the translated
+ * sentence and the live region, so "re-render" and "announce" were the same
+ * event.
+ *
+ * ## The shape being pinned (GOV.UK character-count, three nodes)
+ *
+ * 1. the visible `{n}/{max}` digits, `aria-hidden` — decorative;
+ * 2. a visually-hidden DESCRIPTION carrying the full sentence, reached through
+ *    the textarea's `aria-describedby` — read once on focus;
+ * 3. a visually-hidden `aria-live="polite"` STATUS region, silent until the
+ *    value is inside the last 10% / 20 characters of the cap, and updated only
+ *    after the typist pauses.
+ *
+ * ## Why fake timers
+ *
+ * The debounce is 1000ms. Ten real pauses would add ten seconds of wall clock
+ * to every CI run and would still be a race under load (AGENTS.md's flaky-test
+ * section). `vi.useFakeTimers()` makes the pause an assertion instead of a
+ * wait: `advanceTimersByTime(999)` proving silence is a statement no sleep can
+ * make.
+ *
+ * ## Counting rule used throughout
+ *
+ * A screen reader speaks when a live region's content CHANGES to something
+ * non-empty. Emptying it says nothing. `announcementsOf()` below counts exactly
+ * that, so the numbers here are comparable to the probe's.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { I18nProvider } from '@object-ui/i18n';
+
+import { TextAreaField } from '../TextAreaField';
+import type { FieldWidgetComponentProps } from '../types';
+import type { FieldMetadata } from '@object-ui/types';
+
+const DEBOUNCE_MS = 1000;
+
+const textareaField = (extra: Record<string, unknown> = {}) =>
+  ({ name: 'notes', type: 'textarea', ...extra }) as unknown as FieldMetadata;
+
+/** The `aria-live` node — now the ONLY one in this widget, by construction. */
+const statusRegion = () => document.querySelector('[aria-live="polite"]');
+const statusText = () => statusRegion()?.textContent ?? null;
+const visibleCounter = () => document.querySelector('[data-testid="textarea-character-count"]');
+const textarea = () => screen.getByRole('textbox');
+
+/**
+ * Resolve the textarea's accessible DESCRIPTION the way an assistive technology
+ * does — follow `aria-describedby`, in order, and concatenate the referenced
+ * nodes' text. Asserting on this rather than on a node found by test id is what
+ * makes "the association actually works" part of the assertion.
+ */
+const describedText = () => {
+  const ids = (textarea().getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+  return ids.map((id) => document.getElementById(id)?.textContent ?? '').join(' ').trim();
+};
+
+/** A host that owns the value, so `fireEvent.change` really is a keystroke. */
+// `maxLength` has NO default on purpose: a default would swallow the
+// no-cap cases, which pass it as `undefined`.
+function Host({
+  initial = '',
+  maxLength,
+  ...rest
+}: { initial?: string; maxLength?: number } & Partial<FieldWidgetComponentProps<string>>) {
+  const [v, setV] = React.useState(initial);
+  return (
+    <TextAreaField value={v} onChange={setV} field={textareaField({ maxLength })} {...rest} />
+  );
+}
+
+const renderIn = (language: string, element: React.ReactElement) =>
+  render(
+    <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }}>
+      {element}
+    </I18nProvider>,
+  );
+
+const pause = (ms = DEBOUNCE_MS) => act(() => { vi.advanceTimersByTime(ms); });
+
+/**
+ * Type `text` one character at a time onto `prefix`, sampling the status region
+ * after every keystroke, and return every distinct non-empty sentence it was
+ * changed to. `pauseEvery` = how many keystrokes between 1s pauses (0 = the
+ * issue's probe: continuous typing, never pausing).
+ */
+function announcementsOf(prefix: string, text: string, pauseEvery = 0): string[] {
+  const spoken: string[] = [];
+  let last = statusText();
+  const record = () => {
+    const now = statusText();
+    if (now !== last) {
+      if (now) spoken.push(now);
+      last = now;
+    }
+  };
+  for (let i = 1; i <= text.length; i++) {
+    fireEvent.change(textarea(), { target: { value: prefix + text.slice(0, i) } });
+    record();
+    if (pauseEvery && i % pauseEvery === 0) {
+      pause();
+      record();
+    }
+  }
+  return spoken;
+}
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+describe('the counter no longer narrates every keystroke (objectui#3408)', () => {
+  const SENTENCE = 'Follow up with the customer about the renewal quote.';
+
+  it('speaks nothing across the issue`s 52-keystroke probe', () => {
+    // The probe, verbatim: zh, maxLength 500, 52 characters typed one at a
+    // time. Measured before this change: 52 announcements / 979 characters.
+    expect(SENTENCE).toHaveLength(52);
+    renderIn('zh', <Host maxLength={500} />);
+
+    const spoken = announcementsOf('', SENTENCE);
+
+    expect(spoken).toEqual([]);
+    expect(spoken.reduce((n, s) => n + s.length, 0)).toBe(0);
+    // The value really was typed — otherwise the silence above proves nothing.
+    expect(visibleCounter()).toHaveTextContent('52/500');
+  });
+
+  it('stays silent even if the typist pauses a full second after EVERY keystroke', () => {
+    // The pessimistic variant, and the one that separates the two mechanisms:
+    // with a flush after every character the debounce can suppress nothing, so
+    // anything still silent here is silent because of the THRESHOLD. 52 of 500
+    // used leaves 448 remaining, nowhere near the last 50.
+    renderIn('zh', <Host maxLength={500} />);
+
+    expect(announcementsOf('', SENTENCE, 1)).toEqual([]);
+  });
+
+  it('speaks a single-digit number of times over a run that ends AT the cap', () => {
+    // The realistic worst case: the same 52 keystrokes, but landing exactly on
+    // a 500-character cap, with a pause every 10 characters. Every pause from
+    // here on is inside the warning band, so this is the run that produces the
+    // most speech the design allows — and it is still 5, against the 52 the
+    // probe measured for a run that never came near the limit at all.
+    renderIn('zh', <Host maxLength={500} initial={'x'.repeat(448)} />);
+
+    const spoken = announcementsOf('x'.repeat(448), SENTENCE, 10);
+
+    expect(spoken.length).toBeLessThan(10);
+    expect(spoken).toEqual([
+      '还可输入 42 个字符',
+      '还可输入 32 个字符',
+      '还可输入 22 个字符',
+      '还可输入 12 个字符',
+      '还可输入 2 个字符',
+    ]);
+  });
+});
+
+describe('the status region is debounced (objectui#3408)', () => {
+  it('says nothing until the typing stops', () => {
+    // maxLength 100 → the warning band is the last 20 characters, so every
+    // keystroke below is inside it and only the PAUSE is holding speech back.
+    renderIn('en', <Host maxLength={100} initial={'x'.repeat(80)} />);
+    expect(statusText()).toBe('');
+
+    announcementsOf('x'.repeat(80), 'abcde');
+
+    // Five keystrokes inside the warning band, still nothing spoken.
+    expect(statusText()).toBe('');
+    pause(DEBOUNCE_MS - 1);
+    // 999ms of quiet is not a pause. Asserting the near-miss is the difference
+    // between pinning a debounce and pinning "it eventually says something".
+    expect(statusText()).toBe('');
+
+    pause(1);
+    expect(statusText()).toBe('Characters remaining: 15');
+  });
+
+  it('collapses a burst into ONE announcement, not one per keystroke', () => {
+    renderIn('en', <Host maxLength={100} initial={'x'.repeat(80)} />);
+
+    const spoken = announcementsOf('x'.repeat(80), 'abcdefghij');
+    pause();
+
+    expect(spoken).toEqual([]);
+    expect(statusText()).toBe('Characters remaining: 10');
+  });
+
+  it('does not re-announce a count the user typed their way back to', () => {
+    // Type one character, pause, delete it, pause. The sentence is identical
+    // both times, so the DOM does not change and nothing is spoken twice.
+    renderIn('en', <Host maxLength={100} initial={'x'.repeat(85)} />);
+    pause();
+    expect(statusText()).toBe('Characters remaining: 15');
+
+    fireEvent.change(textarea(), { target: { value: 'x'.repeat(86) } });
+    pause();
+    expect(statusText()).toBe('Characters remaining: 14');
+
+    fireEvent.change(textarea(), { target: { value: 'x'.repeat(85) } });
+    pause();
+    expect(statusText()).toBe('Characters remaining: 15');
+  });
+});
+
+describe('the status region is threshold-gated (objectui#3408)', () => {
+  it('is silent one character OUTSIDE the band and speaks one character inside it', () => {
+    // 500-character cap → 10% is 50, which the typist reaches before the flat
+    // 20, so 50 is the boundary. Both directions asserted: a gate that never
+    // opens and a gate that is always open both pass a one-sided check.
+    const { unmount } = renderIn('en', <Host maxLength={500} initial={'x'.repeat(449)} />);
+    pause();
+    expect(statusText()).toBe('');
+    unmount();
+
+    renderIn('en', <Host maxLength={500} initial={'x'.repeat(450)} />);
+    pause();
+    expect(statusText()).toBe('Characters remaining: 50');
+  });
+
+  it('falls back to the flat 20 characters when 10% of the cap is smaller', () => {
+    // 100-character cap: 10% is 10, but 20 remaining arrives FIRST, so 20 is
+    // the boundary. This is the case that pins `max()` — take `min()` and the
+    // warning arrives ten characters too late, which no assertion on the 500
+    // case above can see.
+    const { unmount } = renderIn('en', <Host maxLength={100} initial={'x'.repeat(79)} />);
+    pause();
+    expect(statusText()).toBe('');
+    unmount();
+
+    renderIn('en', <Host maxLength={100} initial={'x'.repeat(80)} />);
+    pause();
+    expect(statusText()).toBe('Characters remaining: 20');
+  });
+
+  it('goes quiet again — immediately — when the user deletes back out of the band', () => {
+    renderIn('en', <Host maxLength={500} initial={'x'.repeat(460)} />);
+    pause();
+    expect(statusText()).toBe('Characters remaining: 40');
+
+    fireEvent.change(textarea(), { target: { value: 'x'.repeat(400) } });
+
+    // No pause needed: emptying a live region announces nothing, so silence is
+    // free and should not wait a second to take effect.
+    expect(statusText()).toBe('');
+  });
+
+  it('clamps an over-long value to zero remaining rather than counting backwards', () => {
+    // Reachable when a cap is lowered after the record was saved. "-3 remaining"
+    // is not a sentence, and the textarea's own maxLength blocks further input,
+    // so 0 is the true actionable number. The full, honest count stays in the
+    // description.
+    renderIn('en', <Host maxLength={500} initial={'x'.repeat(503)} />);
+    pause();
+
+    expect(statusText()).toBe('Characters remaining: 0');
+    expect(describedText()).toBe('Character count: 503 of 500');
+  });
+
+  it('treats a very small cap as near-limit from the first keystroke', () => {
+    // 10-character cap: the flat 20 exceeds the whole field, so every state is
+    // "nearly full". That is correct, and the debounce still bounds it to one
+    // announcement per pause.
+    renderIn('en', <Host maxLength={10} initial="ab" />);
+    pause();
+
+    expect(statusText()).toBe('Characters remaining: 8');
+  });
+});
+
+describe('the counter is reachable without typing (objectui#3408)', () => {
+  it('describes the textarea, so focus announces the cap once', () => {
+    // Measured before this change: `textareaDescribedBy: null` — a screen
+    // reader user learned there was a limit only by bumping into it.
+    renderIn('en', <Host maxLength={500} initial="hello" />);
+
+    expect(textarea()).toHaveAttribute('aria-describedby');
+    expect(describedText()).toBe('Character count: 5 of 500');
+  });
+
+  it('APPENDS to the host`s aria-describedby instead of replacing it', () => {
+    // `<FormControl>` is a Radix Slot: it hands the control an
+    // `aria-describedby` naming the field description and error message, and
+    // it arrives here through `toDomProps`. Clobbering it would trade "no cap
+    // announced" for "no ERROR announced".
+    render(
+      <>
+        <span id="host-desc">Internal notes only</span>
+        <Host maxLength={500} initial="hello" aria-describedby="host-desc" />
+      </>,
+    );
+
+    const ids = textarea().getAttribute('aria-describedby')!.split(' ');
+    expect(ids[0]).toBe('host-desc');
+    expect(ids).toHaveLength(2);
+    expect(describedText()).toBe('Internal notes only Character count: 5 of 500');
+  });
+
+  it('keeps the visible digits out of the accessibility tree', () => {
+    // Measured before: `regionIsAriaHidden: null`. The digits are a glance
+    // affordance; unhidden they make a screen reader read "5 slash 500" on top
+    // of the description that says it in words.
+    renderIn('en', <Host maxLength={500} initial="hello" />);
+
+    expect(visibleCounter()).toHaveAttribute('aria-hidden', 'true');
+    expect(visibleCounter()).toHaveTextContent('5/500');
+    expect(visibleCounter()).not.toHaveAttribute('aria-live');
+  });
+
+  it('renders the live region EMPTY at mount rather than conditionally', () => {
+    // A live region inserted at the same moment as its text is not reliably
+    // announced — it has to be in the DOM first. `{status && <span …>}` would
+    // pass every "is it silent?" assertion above and break the one case the
+    // whole gate exists to serve.
+    renderIn('en', <Host maxLength={500} />);
+
+    expect(statusRegion()).not.toBeNull();
+    expect(statusText()).toBe('');
+  });
+
+  it('adds neither node when the field declares no cap', () => {
+    render(<Host maxLength={undefined} />);
+
+    expect(statusRegion()).toBeNull();
+    expect(visibleCounter()).toBeNull();
+    expect(textarea()).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('leaves a host describedby alone when there is no cap to describe', () => {
+    render(
+      <>
+        <span id="host-desc">Internal notes only</span>
+        <Host maxLength={undefined} aria-describedby="host-desc" />
+      </>,
+    );
+
+    expect(textarea()).toHaveAttribute('aria-describedby', 'host-desc');
+  });
+
+  it('gives two textareas on one form distinct description ids', () => {
+    // The ids come from `useId()`, per instance. Shared ids would point both
+    // fields at whichever description rendered last.
+    render(
+      <>
+        <Host maxLength={500} initial="a" />
+        <Host maxLength={300} initial="bb" />
+      </>,
+    );
+
+    const [first, second] = screen.getAllByRole('textbox');
+    const idOf = (el: HTMLElement) => el.getAttribute('aria-describedby');
+    expect(idOf(first)).not.toBe(idOf(second));
+    expect(document.getElementById(idOf(first)!)!.textContent).toBe('Character count: 1 of 500');
+    expect(document.getElementById(idOf(second)!)!.textContent).toBe('Character count: 2 of 300');
+  });
+
+  it('renders no counter, no status region and no description when readonly', () => {
+    renderIn('en', <TextAreaField value="hello" onChange={vi.fn()} readonly field={textareaField({ maxLength: 500 })} />);
+
+    expect(statusRegion()).toBeNull();
+    expect(visibleCounter()).toBeNull();
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(screen.getByText('hello')).toBeInTheDocument();
+  });
+});
diff --git a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.i18n.test.tsx b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.i18n.test.tsx
index 3537236829..0b191349da 100644
--- a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.i18n.test.tsx
+++ b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.i18n.test.tsx
@@ -50,10 +50,26 @@
  * - **Recompute-on-input.** The name is derived per render. Pinned so a future
  *   memo cannot freeze it at the mount-time length while the visible digits
  *   move on.
+ *
+ * ## objectui#3408 — same key, different place, plus a sibling
+ *
+ * The sentence is no longer an `aria-live` region's `aria-label`. It is the
+ * textarea's accessible DESCRIPTION (`aria-describedby`), read once on focus
+ * instead of re-announced on every keystroke, and the cases above resolve it
+ * through that association. The expected strings did not change: the ten packs
+ * still serve them, and this file still guards the same drift (backfilled
+ * English, a code-assembled sentence that cannot reproduce ja's word order, a
+ * raw key surfacing where plural lookup fails).
+ *
+ * `fields.textarea.charactersRemaining` is the sibling #3408 added — the only
+ * thing the widget still SPEAKS while typing, and therefore the one the
+ * English-backfill risk now applies to. Its cases sit at the bottom, with fake
+ * timers, because reaching it requires crossing the near-limit threshold and
+ * then pausing.
  */
 import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { I18nProvider } from '@object-ui/i18n';
 
@@ -72,14 +88,29 @@ function renderIn(language: string, element: React.ReactElement) {
 }
 
 /**
- * The counter is queried by its live-region role rather than by its own text:
- * the wrapper `div` has the same `textContent` as the counter (the textarea
- * contributes none), so a text query matches two nodes. Reading the element
- * this way also keeps `aria-live` itself under assertion — the attribute is
- * the reason this string is spoken at all.
+ * Where the sentence lives moved in objectui#3408: it was the `aria-label` of
+ * the visible counter, which was ALSO the `aria-live` region — so the whole
+ * sentence was re-announced on every keystroke. It is now the textarea's
+ * accessible DESCRIPTION, read once when focus lands.
+ *
+ * These helpers therefore resolve it the way an assistive technology does —
+ * follow `aria-describedby`, concatenate the referenced nodes — instead of
+ * reading an attribute off a node found by selector. That keeps the
+ * ASSOCIATION under assertion here too, and it is why the cases below did not
+ * need their expected strings changed: the same ten-pack key still produces
+ * them, in a place a screen reader reaches without typing.
+ *
+ * The digits stay queryable separately (`visibleCounter`) because several
+ * cases assert that the visible half is unchanged. The behaviour half of
+ * #3408 — how often the live region speaks — is pinned in
+ * `TextAreaField.characterCount.announcements.test.tsx`.
  */
-const counter = () => document.querySelector('[aria-live="polite"]');
-const counterLabel = () => counter()?.getAttribute('aria-label');
+const visibleCounter = () => document.querySelector('[data-testid="textarea-character-count"]');
+const describedText = () => {
+  const box = screen.getByRole('textbox');
+  const ids = (box.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+  return ids.map((id) => document.getElementById(id)?.textContent ?? '').join(' ').trim();
+};
 
 describe('TextAreaField character counter is translated (objectui#3406)', () => {
   it('renders the English sentence under an en provider', () => {
@@ -89,8 +120,8 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
     );
 
     // Byte-identical to the literal this replaced, so `en` is a no-op change.
-    expect(counterLabel()).toBe('Character count: 5 of 200');
-    expect(counter()).toHaveTextContent('5/200');
+    expect(describedText()).toBe('Character count: 5 of 200');
+    expect(visibleCounter()).toHaveTextContent('5/200');
   });
 
   it('renders the sentence in Chinese under a zh provider', () => {
@@ -99,12 +130,12 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
     );
 
-    expect(counterLabel()).toBe('已输入 5 个字符，最多 200 个');
+    expect(describedText()).toBe('已输入 5 个字符，最多 200 个');
     // The literal, asserted absent — a re-inlined one would still satisfy a
     // positive-only check on a sibling case.
-    expect(counterLabel()).not.toMatch(/character count/i);
+    expect(describedText()).not.toMatch(/character count/i);
     // The digits stay language-independent; only the accessible name moved.
-    expect(counter()).toHaveTextContent('5/200');
+    expect(visibleCounter()).toHaveTextContent('5/200');
   });
 
   it('renders the sentence in Japanese, with the cap interpolated BEFORE the count', () => {
@@ -115,9 +146,9 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
 
     // `{{max}}` precedes `{{count}}` in this pack. Code-side concatenation
     // cannot produce this order — that is the point of the assertion.
-    expect(counterLabel()).toBe('文字数: 200 文字中 5 文字');
-    expect(counterLabel()!.indexOf('200')).toBeLessThan(counterLabel()!.indexOf('5'));
-    expect(counterLabel()).not.toMatch(/character count/i);
+    expect(describedText()).toBe('文字数: 200 文字中 5 文字');
+    expect(describedText()!.indexOf('200')).toBeLessThan(describedText()!.indexOf('5'));
+    expect(describedText()).not.toMatch(/character count/i);
   });
 
   it('resolves the base key under ru, whose plural rules i18next consults first', () => {
@@ -126,10 +157,10 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
     );
 
-    expect(counterLabel()).toBe('Количество символов: 5 из 200');
+    expect(describedText()).toBe('Количество символов: 5 из 200');
     // The failure this guards: plural lookup missing and no base-key fallback
     // would surface the raw key instead of a sentence.
-    expect(counterLabel()).not.toContain('fields.textarea');
+    expect(describedText()).not.toContain('fields.textarea');
   });
 
   it('resolves the base key under ar as well', () => {
@@ -138,8 +169,8 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
     );
 
-    expect(counterLabel()).toBe('عدد الأحرف: 5 من 200');
-    expect(counterLabel()).not.toContain('fields.textarea');
+    expect(describedText()).toBe('عدد الأحرف: 5 من 200');
+    expect(describedText()).not.toContain('fields.textarea');
   });
 
   it('recomputes the spoken count as the user types', () => {
@@ -150,12 +181,12 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       return <TextAreaField value={v} onChange={setV} field={textareaField({ maxLength: 200 })} />;
     };
     renderIn('zh', <Host />);
-    expect(counterLabel()).toBe('已输入 5 个字符，最多 200 个');
+    expect(describedText()).toBe('已输入 5 个字符，最多 200 个');
 
     fireEvent.change(screen.getByRole('textbox'), { target: { value: 'hello world' } });
 
-    expect(counterLabel()).toBe('已输入 11 个字符，最多 200 个');
-    expect(counter()).toHaveTextContent('11/200');
+    expect(describedText()).toBe('已输入 11 个字符，最多 200 个');
+    expect(visibleCounter()).toHaveTextContent('11/200');
   });
 
   it('keeps reading the legacy snake_case max_length spelling', () => {
@@ -166,7 +197,7 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ max_length: 80 })} />,
     );
 
-    expect(counterLabel()).toBe('已输入 5 个字符，最多 80 个');
+    expect(describedText()).toBe('已输入 5 个字符，最多 80 个');
   });
 
   it('renders no counter at all when the field declares no maxLength', () => {
@@ -175,7 +206,7 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
     // keystroke in every long-text field in the app.
     renderIn('zh', <TextAreaField value="hello" onChange={vi.fn()} field={textareaField()} />);
 
-    expect(counter()).toBeNull();
+    expect(visibleCounter()).toBeNull();
   });
 
   it('renders no counter in the readonly branch', () => {
@@ -192,11 +223,63 @@ describe('TextAreaField character counter is translated (objectui#3406)', () =>
       />,
     );
 
-    expect(counter()).toBeNull();
+    expect(visibleCounter()).toBeNull();
     expect(screen.getByText('hello')).toBeInTheDocument();
   });
 });
 
+/**
+ * The near-limit warning — the sentence that IS spoken mid-typing
+ * (objectui#3408). Reaching it needs the value inside the last 10% / 20
+ * characters of the cap AND a pause, so these render already-near-full values
+ * and advance fake timers rather than typing 490 characters.
+ */
+describe('TextAreaField near-limit warning is translated (objectui#3408)', () => {
+  afterEach(() => vi.useRealTimers());
+
+  // Scoped to its own container and unmounted before returning: some cases
+  // call this twice, and a document-wide query would read the FIRST mount's
+  // region — green for the previous language, not the one under test.
+  const nearLimit = (language: string) => {
+    vi.useFakeTimers();
+    const { container, unmount } = renderIn(
+      language,
+      <TextAreaField value={'x'.repeat(190)} onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
+    );
+    act(() => { vi.advanceTimersByTime(1000); });
+    const spoken = container.querySelector('[aria-live="polite"]')?.textContent ?? '';
+    unmount();
+    vi.useRealTimers();
+    return spoken;
+  };
+
+  it('renders the English sentence under an en provider', () => {
+    expect(nearLimit('en')).toBe('Characters remaining: 10');
+  });
+
+  it('renders the sentence in Chinese under a zh provider', () => {
+    expect(nearLimit('zh')).toBe('还可输入 10 个字符');
+    // A backfilled English string is invisible at runtime — the whole defect
+    // class is English reaching a non-English screen reader.
+    expect(nearLimit('zh')).not.toMatch(/characters remaining/i);
+  });
+
+  it('renders the sentence in Japanese', () => {
+    expect(nearLimit('ja')).toBe('残り 10 文字');
+  });
+
+  it('resolves the base key under ru and ar, whose plural rules i18next consults first', () => {
+    // Same mechanism as `characterCount` above: `count` sends i18next to
+    // `key_one` / `key_few` / … before the base key, and these packs declare
+    // the base key only. A raw key reaching a screen-reader-only string is
+    // invisible to everyone who could report it.
+    expect(nearLimit('ru')).toBe('Осталось символов: 10');
+    expect(nearLimit('ar')).toBe('الأحرف المتبقية: 10');
+    expect(nearLimit('ru')).not.toContain('fields.textarea');
+    expect(nearLimit('ar')).not.toContain('fields.textarea');
+  });
+});
+
 // The provider-LESS leg lives in `TextAreaField.characterCount.no-provider.test.tsx`.
 // It cannot share this file: mounting `I18nProvider` installs its instance as
 // react-i18next's GLOBAL default, so after any case above there is no "no
diff --git a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.no-provider.test.tsx b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.no-provider.test.tsx
index de15fce544..601588661f 100644
--- a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.no-provider.test.tsx
+++ b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.no-provider.test.tsx
@@ -41,8 +41,8 @@
  * `FullscreenFieldEditor.no-provider.test.tsx` and
  * `TagsField.placeholder.no-provider.test.tsx`.
  */
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { TextAreaField } from '../TextAreaField';
@@ -51,10 +51,24 @@ import type { FieldMetadata } from '@object-ui/types';
 const textareaField = (extra: Record<string, unknown> = {}) =>
   ({ name: 'notes', type: 'textarea', ...extra }) as unknown as FieldMetadata;
 
-const counter = () => document.querySelector('[aria-live="polite"]');
-const counterLabel = () => counter()?.getAttribute('aria-label');
+const visibleCounter = () => document.querySelector('[data-testid="textarea-character-count"]');
+const statusRegion = () => document.querySelector('[aria-live="polite"]');
+
+/**
+ * objectui#3408 moved the sentence off the live region's `aria-label` and onto
+ * the textarea's accessible DESCRIPTION. Resolved here the way an assistive
+ * technology resolves it — follow `aria-describedby` — so the association is
+ * under assertion alongside the copy.
+ */
+const counterLabel = () => {
+  const box = screen.getByRole('textbox');
+  const ids = (box.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+  return ids.map((id) => document.getElementById(id)?.textContent ?? '').join(' ').trim();
+};
 
 describe('character counter — English fallback survives with no i18n configured (objectui#3406)', () => {
+  afterEach(() => vi.useRealTimers());
+
   it('renders the English default, not a raw key', () => {
     render(
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
@@ -93,15 +107,43 @@ describe('character counter — English fallback survives with no i18n configure
     expect(counterLabel()).toBe('Character count: 0 of 40');
   });
 
-  it('keeps the live region — the attribute is why this string is spoken', () => {
-    // This change is key-ing only. `aria-live="polite"` and the per-keystroke
-    // recompute are a BEHAVIOUR question, filed separately and deliberately
-    // untouched here; pin the attribute so "fixing" it silently is a red.
+  it('keeps a live region, now SEPARATE from the visible digits', () => {
+    // objectui#3406 pinned `aria-live="polite"` on the counter itself and said
+    // so explicitly: the per-keystroke re-announce was a behaviour question,
+    // filed separately, deliberately untouched. objectui#3408 is that filing,
+    // and this pin is updated in the direction it decided — the live region
+    // still exists (that attribute is why anything is ever spoken) but it is a
+    // visually-hidden node of its own, and the digits it used to share an
+    // element with are now `aria-hidden`.
     render(
       <TextAreaField value="hello" onChange={vi.fn()} field={textareaField({ maxLength: 200 })} />,
     );
 
-    expect(counter()).toHaveAttribute('aria-live', 'polite');
+    expect(statusRegion()).toHaveAttribute('aria-live', 'polite');
+    expect(statusRegion()).not.toBe(visibleCounter());
+    expect(visibleCounter()).toHaveAttribute('aria-hidden', 'true');
+    expect(visibleCounter()).not.toHaveAttribute('aria-live');
+  });
+
+  it('renders the English near-limit warning too, not a raw key', () => {
+    // The second half of the fallback contract: `charactersRemaining` is the
+    // only sentence the widget still speaks while typing, so a key leaking
+    // here is the same invisible failure — heard by exactly the users who
+    // cannot see that it is a key. 190 of 200 is inside the warning band; the
+    // 1s pause is what releases it.
+    vi.useFakeTimers();
+    render(
+      <TextAreaField
+        value={'x'.repeat(190)}
+        onChange={vi.fn()}
+        field={textareaField({ maxLength: 200 })}
+      />,
+    );
+    act(() => { vi.advanceTimersByTime(1000); });
+
+    expect(statusRegion()).toHaveTextContent('Characters remaining: 10');
+    expect(statusRegion()!.textContent).not.toMatch(/fields\.textarea/);
+    expect(statusRegion()!.textContent).not.toContain('{{');
   });
 
   it('the code-shipped default carries no CJK (Commandment #-1)', () => {
diff --git a/packages/fields/src/widgets/useFieldTranslation.ts b/packages/fields/src/widgets/useFieldTranslation.ts
index a1208afaf7..f21728e2ea 100644
--- a/packages/fields/src/widgets/useFieldTranslation.ts
+++ b/packages/fields/src/widgets/useFieldTranslation.ts
@@ -85,6 +85,20 @@ const FIELD_DEFAULTS: Record<string, string> = {
   // session heard English on every keystroke. Byte-identical to the literal
   // it replaces, so a no-provider render is unchanged.
   'fields.textarea.characterCount': 'Character count: {{count}} of {{max}}',
+  // objectui#3408 — the NEAR-LIMIT warning, spoken by the counter's status
+  // region after the typist pauses and only once they are inside the last 10%
+  // (or last 20 characters) of the cap. The sentence above became the field's
+  // `aria-describedby` description in the same change; this one is the only
+  // thing that is ever announced mid-typing, which is why it says what is
+  // LEFT rather than repeating the whole count.
+  //
+  // Colon form, not "You have {{count}} characters remaining": `count` makes
+  // i18next attempt plural lookup (`_one` / `_few` / …) before the base key,
+  // and these packs declare the base key only — the same base-key fallback
+  // `characterCount` already relies on. A sentence whose grammar does not
+  // depend on the number stays correct at 1 without ten plural entries per
+  // pack, and matches the sibling key's shape.
+  'fields.textarea.charactersRemaining': 'Characters remaining: {{count}}',
   // objectui#3404 — the shared fullscreen long-text dialog
   // (`FullscreenFieldEditor`, reached from `TextAreaField` and
   // `RichTextField` when `mobile_fullscreen` is set).
diff --git a/packages/i18n/src/__tests__/textarea-charactercount-locale-parity.test.ts b/packages/i18n/src/__tests__/textarea-charactercount-locale-parity.test.ts
index bb7bdad843..a28a60cf1e 100644
--- a/packages/i18n/src/__tests__/textarea-charactercount-locale-parity.test.ts
+++ b/packages/i18n/src/__tests__/textarea-charactercount-locale-parity.test.ts
@@ -17,6 +17,10 @@
  *     at once, which is exactly the moment a copy-paste backfill is cheapest —
  *     and a copied English string is invisible at runtime, because the whole
  *     defect being fixed is English reaching a non-English screen reader.
+ *
+ * A second block below covers `fields.textarea.charactersRemaining`
+ * (objectui#3408) — the same widget's near-limit warning, born in all ten packs
+ * the same way, with one extra guard the sibling does not need.
  */
 import { describe, it, expect } from 'vitest';
 import { builtInLocales } from '../locales';
@@ -26,6 +30,9 @@ const LANGS = Object.keys(builtInLocales);
 const characterCountOf = (lang: string) =>
   (builtInLocales[lang] as any)?.fields?.textarea?.characterCount as string | undefined;
 
+const charactersRemainingOf = (lang: string) =>
+  (builtInLocales[lang] as any)?.fields?.textarea?.charactersRemaining as string | undefined;
+
 describe('fields.textarea.characterCount locale coverage (objectui#3406)', () => {
   it('covers all ten built-in packs', () => {
     expect(LANGS).toHaveLength(10);
@@ -66,3 +73,65 @@ describe('fields.textarea.characterCount locale coverage (objectui#3406)', () =>
     expect(untranslated).toEqual([]);
   });
 });
+
+/**
+ * `fields.textarea.charactersRemaining` — the near-limit warning
+ * (objectui#3408).
+ *
+ * Same three guards, and one more that only applies to this key. #3406's
+ * sentence is now a DESCRIPTION a screen reader reads on focus;
+ * `charactersRemaining` is the only textarea copy still SPOKEN mid-typing, so
+ * an English backfill here is heard by exactly the users who cannot see that
+ * it is English.
+ */
+describe('fields.textarea.charactersRemaining locale coverage (objectui#3408)', () => {
+  it.each(LANGS)('%s defines the near-limit sentence as a non-empty string', (lang) => {
+    const value = charactersRemainingOf(lang);
+    expect(typeof value, `${lang} has no fields.textarea.charactersRemaining`).toBe('string');
+    expect(
+      value!.trim().length,
+      `${lang}.fields.textarea.charactersRemaining is empty`,
+    ).toBeGreaterThan(0);
+  });
+
+  it.each(LANGS)('%s interpolates the remaining count and NOT the cap', (lang) => {
+    const value = charactersRemainingOf(lang)!;
+    expect(value, `${lang} drops {{count}}`).toContain('{{count}}');
+    // The cap belongs to the description, which is read on focus. Repeating it
+    // here would make the one interruption the design still permits longer
+    // than it needs to be — the opposite of what #3408 is for.
+    expect(value, `${lang} re-states {{max}} in the warning`).not.toContain('{{max}}');
+  });
+
+  it.each(LANGS)('%s stays grammatical at a count of 1 without plural forms', (lang) => {
+    // `count` sends i18next to plural lookup (`_one` / `_few` / …) BEFORE the
+    // base key, and no pack declares those forms — the base key is what
+    // resolves, for every count. So the sentence may not contain a noun whose
+    // form bends on the number in a way "1" would break. Mechanically: the
+    // packs are written so `{{count}}` sits at an edge or after a colon,
+    // never mid-clause in a way English/ru/de plural agreement would spoil.
+    // The check that survives translation is the negative one — nobody smuggled
+    // in the plural-suffixed KEY, which would silently resolve to nothing.
+    const value = charactersRemainingOf(lang)!;
+    expect(value).not.toContain('_one');
+    expect(value).not.toContain('_other');
+    const pack = (builtInLocales[lang] as any)?.fields?.textarea ?? {};
+    expect(Object.keys(pack).filter((k) => k.startsWith('charactersRemaining_'))).toEqual([]);
+  });
+
+  it('the English pack matches the code default in `packages/fields`', () => {
+    // `packages/i18n` cannot import `packages/fields` (the dependency runs the
+    // other way), so this literal and `FIELD_DEFAULTS
+    // ['fields.textarea.charactersRemaining']` are pinned to each other by
+    // being spelled out in both places. The fields-side half is in
+    // `TextAreaField.characterCount.no-provider.test.tsx`.
+    expect(charactersRemainingOf('en')).toBe('Characters remaining: {{count}}');
+  });
+
+  it('no other pack serves the English sentence verbatim', () => {
+    const untranslated = LANGS.filter(
+      (l) => l !== 'en' && charactersRemainingOf(l)!.includes('Characters remaining'),
+    );
+    expect(untranslated).toEqual([]);
+  });
+});
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
index 45d9b7e292..29f9b03457 100644
--- a/packages/i18n/src/locales/ar.ts
+++ b/packages/i18n/src/locales/ar.ts
@@ -217,6 +217,7 @@ const ar = {
     },
     textarea: {
       characterCount: "عدد الأحرف: {{count}} من {{max}}",
+      charactersRemaining: "الأحرف المتبقية: {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
index b058169282..500e3e1833 100644
--- a/packages/i18n/src/locales/de.ts
+++ b/packages/i18n/src/locales/de.ts
@@ -217,6 +217,7 @@ const de = {
     },
     textarea: {
       characterCount: "Zeichenanzahl: {{count}} von {{max}}",
+      charactersRemaining: "Verbleibende Zeichen: {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
index 29624fcc9c..3994014ace 100644
--- a/packages/i18n/src/locales/en.ts
+++ b/packages/i18n/src/locales/en.ts
@@ -232,15 +232,26 @@ const en = {
     tags: {
       placeholder: 'Type and press Enter to add…',
     },
-    // objectui#3406 — the accessible name of the textarea character counter,
-    // rendered only when the field declares `maxLength`. The visible text is
-    // `{count}/{max}` digits and needs no locale; this sentence is what a
-    // screen reader speaks off an `aria-live` region. ONE interpolated key
+    // objectui#3406 — the accessible sentence of the textarea character
+    // counter, rendered only when the field declares `maxLength`. The visible
+    // text is `{count}/{max}` digits and needs no locale. ONE interpolated key
     // rather than assembled parts: ja and ko put the cap BEFORE the count
     // ("of {{max}} characters, {{count}}"), an order no code-side
     // concatenation can produce.
+    //
+    // objectui#3408 moved it off the `aria-live` region and onto the
+    // textarea's `aria-describedby` — read once when focus lands, instead of
+    // re-announced on every keystroke — and added `charactersRemaining` as the
+    // one thing that IS still spoken while typing: after a pause, and only
+    // inside the last 10% (or last 20 characters) of the cap.
+    //
+    // `charactersRemaining` is deliberately colon-form. `count` sends i18next
+    // to plural lookup before the base key, and these packs declare the base
+    // key only; a sentence whose grammar does not bend on the number is
+    // correct at 1 without ten plural entries per pack.
     textarea: {
       characterCount: 'Character count: {{count}} of {{max}}',
+      charactersRemaining: 'Characters remaining: {{count}}',
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
index c5bccfb15a..baf4cde4a1 100644
--- a/packages/i18n/src/locales/es.ts
+++ b/packages/i18n/src/locales/es.ts
@@ -222,6 +222,7 @@ const es = {
     },
     textarea: {
       characterCount: "Recuento de caracteres: {{count}} de {{max}}",
+      charactersRemaining: "Caracteres restantes: {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
index 6f9a579aa6..18450843cd 100644
--- a/packages/i18n/src/locales/fr.ts
+++ b/packages/i18n/src/locales/fr.ts
@@ -217,6 +217,7 @@ const fr = {
     },
     textarea: {
       characterCount: "Nombre de caractères : {{count}} sur {{max}}",
+      charactersRemaining: "Caractères restants : {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
index 3bcb27ff36..9ce85d841a 100644
--- a/packages/i18n/src/locales/ja.ts
+++ b/packages/i18n/src/locales/ja.ts
@@ -217,6 +217,7 @@ const ja = {
     },
     textarea: {
       characterCount: "文字数: {{max}} 文字中 {{count}} 文字",
+      charactersRemaining: "残り {{count}} 文字",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
index 8727491984..dc97d1f774 100644
--- a/packages/i18n/src/locales/ko.ts
+++ b/packages/i18n/src/locales/ko.ts
@@ -217,6 +217,7 @@ const ko = {
     },
     textarea: {
       characterCount: "글자 수: {{max}}자 중 {{count}}자",
+      charactersRemaining: "{{count}}자 남음",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
index 3cd166e92a..1cdd176ef9 100644
--- a/packages/i18n/src/locales/pt.ts
+++ b/packages/i18n/src/locales/pt.ts
@@ -217,6 +217,7 @@ const pt = {
     },
     textarea: {
       characterCount: "Contagem de caracteres: {{count}} de {{max}}",
+      charactersRemaining: "Caracteres restantes: {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
index 39f2393eb9..0212b3dbd0 100644
--- a/packages/i18n/src/locales/ru.ts
+++ b/packages/i18n/src/locales/ru.ts
@@ -217,6 +217,7 @@ const ru = {
     },
     textarea: {
       characterCount: "Количество символов: {{count}} из {{max}}",
+      charactersRemaining: "Осталось символов: {{count}}",
     },
   },
   table: {
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
index 45d5c0a506..fd7c09d9b1 100644
--- a/packages/i18n/src/locales/zh.ts
+++ b/packages/i18n/src/locales/zh.ts
@@ -222,6 +222,7 @@ const zh = {
     },
     textarea: {
       characterCount: '已输入 {{count}} 个字符，最多 {{max}} 个',
+      charactersRemaining: '还可输入 {{count}} 个字符',
     },
   },
   table: {

From 3fc277b9c506e112f767c8b174866b5cfdb95548 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 01:33:22 +0000
Subject: [PATCH 2/3] refactor(fields): derive the counter status region's
 silence instead of clearing it in an effect (#3408)

`react-hooks/set-state-in-effect` was right: the synchronous `setStatus('')`
re-rendered on every keystroke the region spends staying quiet, which is most
of them. The settled sentence is now written only by the debounce timer, and
what renders is `settledStatus === pendingStatus ? pendingStatus : ''` -- so
leaving the warning band is silent immediately, with no cascading render.

Not `pendingStatus ? settledStatus : ''`: delete out of the band and type back
in, and that spelling re-announces the count from before the excursion a full
second before the timer corrects it. A wrong number spoken is worse than a
right one spoken twice. Pinned by a new case.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GTRjn8xBqp75dk7kFupVRt
---
 packages/fields/src/widgets/TextAreaField.tsx | 35 ++++++++++++++-----
 ...ield.characterCount.announcements.test.tsx | 20 +++++++++++
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/fields/src/widgets/TextAreaField.tsx b/packages/fields/src/widgets/TextAreaField.tsx
index 17347935af..6794e9e2a9 100644
--- a/packages/fields/src/widgets/TextAreaField.tsx
+++ b/packages/fields/src/widgets/TextAreaField.tsx
@@ -129,17 +129,17 @@ export function TextAreaField({ value, onChange, field, readonly, error, ...prop
       ? t('fields.textarea.charactersRemaining', { count: Math.max(maxLength - length, 0) })
       : '';
 
-  const [status, setStatus] = useState('');
+  /**
+   * The last sentence a PAUSE settled on. Only ever written by the timer —
+   * never cleared synchronously — so this effect adds no cascading render on
+   * the keystrokes it is busy staying quiet through
+   * (`react-hooks/set-state-in-effect`).
+   */
+  const [settledStatus, setSettledStatus] = useState('');
 
   useEffect(() => {
-    // Leaving the threshold (or the field going readonly) silences the region
-    // immediately — emptying a live region announces nothing, so this costs no
-    // speech. Only ENTERING it is debounced.
-    if (!pendingStatus) {
-      setStatus('');
-      return;
-    }
-    const timer = setTimeout(() => setStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
+    if (!pendingStatus) return;
+    const timer = setTimeout(() => setSettledStatus(pendingStatus), COUNTER_STATUS_DEBOUNCE_MS);
     // Every keystroke cancels the previous pending announcement, so a typist
     // who never pauses is never interrupted. The dependency is the SENTENCE,
     // not the length: re-typing back to the same count produces the same string
@@ -147,6 +147,23 @@ export function TextAreaField({ value, onChange, field, readonly, error, ...prop
     return () => clearTimeout(timer);
   }, [pendingStatus]);
 
+  /**
+   * Speak the settled sentence only while it is still TRUE — i.e. while it is
+   * the one the current value would produce. Everything else renders empty,
+   * which costs no speech (emptying a live region announces nothing), and that
+   * is what makes leaving the warning band silent IMMEDIATELY rather than a
+   * second later.
+   *
+   * The obvious alternative, `pendingStatus ? settledStatus : ''`, is wrong in
+   * one specific way: delete back out of the band and type into it again, and
+   * the region re-announces the STALE count from before the excursion a full
+   * second before the timer corrects it. Announcing a wrong number is worse
+   * than announcing a right one twice, which is the bounded, sub-second,
+   * correct-content cost of the comparison below. Pinned by `never
+   * re-announces the STALE count when the user types back into the band`.
+   */
+  const status = settledStatus === pendingStatus ? pendingStatus : '';
+
   if (readonly) {
     return (
       <div className="text-sm whitespace-pre-wrap">
diff --git a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx
index dbab6fbfc9..847461c46f 100644
--- a/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx
+++ b/packages/fields/src/widgets/__tests__/TextAreaField.characterCount.announcements.test.tsx
@@ -277,6 +277,26 @@ describe('the status region is threshold-gated (objectui#3408)', () => {
     expect(statusText()).toBe('');
   });
 
+  it('never re-announces the STALE count when the user types back into the band', () => {
+    // The excursion case. Reach the band, be announced, delete far out of it,
+    // then type back in at a different length. The naive "show the last settled
+    // sentence whenever we are in the band" renders the count from BEFORE the
+    // excursion for a full second before the timer corrects it — a wrong
+    // number, spoken, which is worse than the silence it replaces.
+    renderIn('en', <Host maxLength={500} initial={'x'.repeat(460)} />);
+    pause();
+    expect(statusText()).toBe('Characters remaining: 40');
+
+    fireEvent.change(textarea(), { target: { value: 'x'.repeat(300) } });
+    expect(statusText()).toBe('');
+
+    fireEvent.change(textarea(), { target: { value: 'x'.repeat(455) } });
+    // The moment of the bug: 45 is the truth, 40 is what was cached.
+    expect(statusText()).toBe('');
+    pause();
+    expect(statusText()).toBe('Characters remaining: 45');
+  });
+
   it('clamps an over-long value to zero remaining rather than counting backwards', () => {
     // Reachable when a cap is lowered after the record was saved. "-3 remaining"
     // is not a sentence, and the textarea's own maxLength blocks further input,

From 1906491fe1763e21349ac8dae228bec8d05ebeb7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 01:37:45 +0000
Subject: [PATCH 3/3] style(fields): blank line between the threshold helper
 and the widget (#3408)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GTRjn8xBqp75dk7kFupVRt
---
 packages/fields/src/widgets/TextAreaField.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fields/src/widgets/TextAreaField.tsx b/packages/fields/src/widgets/TextAreaField.tsx
index 6794e9e2a9..56834ea9c8 100644
--- a/packages/fields/src/widgets/TextAreaField.tsx
+++ b/packages/fields/src/widgets/TextAreaField.tsx
@@ -78,6 +78,7 @@ function counterStatusThreshold(maxLength: number): number {
     COUNTER_STATUS_MIN_REMAINING,
   );
 }
+
 export function TextAreaField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
   // Everything from here to the `readonly` early return is hook-order
   // territory: a hook may not sit behind a conditional return. The readonly