@astryxdesign/lab 0.7.2-canary.fdd384f → 0.7.3-canary.02f5fe4

package/dist/Chat/ChatTypingIndicator.d.ts

@@ -14,8 +14,9 @@ export interface ChatTypingIndicatorProps extends BaseProps<HTMLDivElement> {
  * Animated three-dot typing hint with a name-aware label.
  *
  * The dots bounce with staggered delays (disabled under
- * prefers-reduced-motion) and the label is announced politely to
- * screen readers via role="status".
+ * prefers-reduced-motion). Each new label is announced politely to screen
+ * readers through the shared announcement channel, unless an enclosing live
+ * container such as a chat log delivers it.
  *
  * @example
  * ```

package/dist/Chat/ChatTypingIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTypingIndicator.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTypingIndicator.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMlD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AA0FD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,wBAAwB,+BA4B1B;yBAnCe,mBAAmB"}
+{"version":3,"file":"ChatTypingIndicator.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTypingIndicator.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAkGD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,wBAAwB,+BAkD1B;yBAzDe,mBAAmB"}

package/dist/Chat/ChatTypingIndicator.js

@@ -10,19 +10,22 @@
  *
  * Three staggered bouncing dots (stylex.keyframes, reduced-motion safe)
  * with a grammar-aware label: "Ana is typing…", "Ana and Ben are typing…",
- * or "Ana and 2 others are typing…". Announced politely via role="status".
- * Renders dots only when no names are provided.
+ * or "Ana and 2 others are typing…". The label is announced once per change
+ * through the shared polite channel (`useAnnounce`), or left to an enclosing
+ * live container such as a chat log; the element itself carries no live role
+ * (spec:AST-086 FR2, FR4). Renders dots only when no names are provided.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/Chat/index.ts (exports)
  * - /packages/lab/src/Chat/ChatTypingIndicator.doc.mjs
  * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
  */
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, radiusVars, durationVars, typographyVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { mergeProps } from '@astryxdesign/core/utils';
+import { mergeProps, mergeRefs } from '@astryxdesign/core/utils';
+import { useAnnounce } from '@astryxdesign/core/hooks';
 import { themeProps } from '@astryxdesign/core/utils';
 import { useLocale, useTranslator } from '@astryxdesign/core/i18n';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,6 +70,13 @@ function typingLabel(names, t, listFormat) {
   });
 }
 
+/**
+ * An enclosing live container (a chat transcript's role="log", or any element
+ * the page made live) already delivers content added inside it, so the
+ * indicator must not announce the same words again (spec:AST-086 FR4).
+ */
+const LIVE_CONTAINER_SELECTOR = '[role="log"], [role="status"], [role="alert"], [aria-live="polite"], [aria-live="assertive"]';
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -75,8 +85,9 @@ function typingLabel(names, t, listFormat) {
  * Animated three-dot typing hint with a name-aware label.
  *
  * The dots bounce with staggered delays (disabled under
- * prefers-reduced-motion) and the label is announced politely to
- * screen readers via role="status".
+ * prefers-reduced-motion). Each new label is announced politely to screen
+ * readers through the shared announcement channel, unless an enclosing live
+ * container such as a chat log delivers it.
  *
  * @example
  * ```
@@ -99,10 +110,29 @@ export function ChatTypingIndicator({
     type: 'conjunction'
   }), [locale]);
   const label = typingLabel(names, t, listFormat);
+  const rootRef = useRef(null);
+  const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [ref]);
+  const announce = useAnnounce();
+  // The label last announced, so a rerender or a StrictMode effect replay does
+  // not repeat it; cleared when nobody is typing, so the same people starting
+  // again is a new occasion (spec:AST-086 FR6).
+  const announcedLabelRef = useRef(null);
+  useEffect(() => {
+    if (label == null) {
+      announcedLabelRef.current = null;
+      return;
+    }
+    if (announcedLabelRef.current === label) {
+      return;
+    }
+    announcedLabelRef.current = label;
+    const isInsideLiveContainer = rootRef.current?.parentElement?.closest(LIVE_CONTAINER_SELECTOR) != null;
+    if (!isInsideLiveContainer) {
+      announce(label, 'polite');
+    }
+  }, [announce, label]);
   return /*#__PURE__*/_jsxs("div", {
-    ref: ref,
-    role: "status",
-    "aria-live": "polite",
+    ref: mergedRef,
     "data-testid": testId,
     ...mergeProps(themeProps('chat-typing-indicator'), stylex.props(styles.root, xstyle), className, styleProp),
     children: [/*#__PURE__*/_jsxs("span", {

package/dist/Comments/CommentComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAKL,KAAK,mBAAmB,EAEzB,MAAM,yBAAyB,CAAC;AAqBjC,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EACb,sBAAsB,EACtB,0BAA0B,EAC1B,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAkGjB,0DAA0D;AAC1D,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,sBAAsB,CAAC;IAChC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,qBAAqB,CAAC;IACtC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,SAAS,IAAI,EAAE,KAEtB,SAAS,oBAAoB,EAAE,GAAG,OAAO,CAAC,SAAS,oBAAoB,EAAE,CAAC,CAAC;IAC7E,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACzC,aAAa,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC9C,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IAClE,OAAO,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CACnE;AAED,kDAAkD;AAClD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,aAAa,EACb,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAY,EACZ,KAAK,EACL,qBAAqB,EACrB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,cAAc,EACd,SAAS,EACT,OAAO,EACP,QAAQ,EAAE,YAAY,EACtB,KAAK,GACN,EAAE,wBAAwB,+BAyV1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,SAAS,IAAI,EAAE,KAEtB,SAAS,oBAAoB,EAAE,GAAG,OAAO,CAAC,SAAS,oBAAoB,EAAE,CAAC,CAAC;IAC7E,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC1C,6DAA6D;IAC7D,aAAa,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC/C,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAoB,EACpB,KAAK,EACL,OAAO,EACP,MAAM,EACN,eAAe,EACf,cAAyB,EACzB,cAAc,EACd,QAAsB,EACtB,aAAiC,EACjC,cAAqB,EACrB,QAAQ,EACR,GAAG,EACH,GAAG,SAAS,EACb,EAAE,oBAAoB,+BAyBtB;yBA5Ce,eAAe"}
+{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentComposer.tsx"],"names":[],"mappings":"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"}

package/dist/Comments/CommentComposer.js

@@ -152,6 +152,8 @@ export function CommentComposerBase({
   latestValueRef.current = value;
   const isMountedRef = useRef(true);
   const actionPendingRef = useRef(false);
+  const isSubmittingRef = useRef(isSubmitting);
+  isSubmittingRef.current = isSubmitting;
   const imageInputRef = useRef(null);
   const inputRef = useRef(null);
   // Focus lands once per `focusKey`, when the input attaches: the handle ref
@@ -224,7 +226,15 @@ export function CommentComposerBase({
       setActionError({
         title: t('@astryx.commentComposer.imagesOnly'),
         actionLabel: t('@astryx.commentComposer.chooseImages'),
-        onAction: () => imageInputRef.current?.click()
+        onAction: () => {
+          // The picker input is never natively disabled, so its click() would
+          // open the file chooser while busy and the busy guard would drop
+          // the pick.
+          if (isSubmittingRef.current || actionPendingRef.current) {
+            return;
+          }
+          imageInputRef.current?.click();
+        }
       });
       return;
     }
@@ -329,10 +339,12 @@ export function CommentComposerBase({
             accept: "image/*",
             multiple: true,
             hidden: true,
-            disabled: isBusy,
             onChange: event => {
               const files = Array.from(event.currentTarget.files ?? []);
               event.currentTarget.value = '';
+              if (isBusy) {
+                return;
+              }
               beginImageUpload(files);
             }
           }), /*#__PURE__*/_jsx(IconButton, {

package/dist/Comments/CommentParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentParts.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentParts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentParts.d.ts","sourceRoot":"","sources":["../../src/Comments/CommentParts.tsx"],"names":[],"mappings":"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"}

package/dist/Comments/CommentParts.js

@@ -334,9 +334,10 @@ export function MetadataActionLink({
     type: textType,
     color: "secondary",
     xstyle: partStyles.noWrap,
-    "data-metadata-action": actionRole,
-    "aria-disabled": isDisabled || undefined,
-    tabIndex: isDisabled ? -1 : undefined,
+    "data-metadata-action": actionRole
+    // Link keeps a disabled link in the tab order (spec:AST-085 FR1).
+    ,
+    isDisabled: isDisabled,
     onClick: event => {
       event.preventDefault();
       if (isDisabled !== true) {

package/dist/MobileTokenizer/MobileTokenizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileTokenizer.d.ts","sourceRoot":"","sources":["../../src/MobileTokenizer/MobileTokenizer.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAYlD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAQ/E,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,cAAc,IACtD;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,GACtB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CAC1E,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAoID,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAkB,EAClB,SAAiB,EACjB,UAAU,EACV,YAAiB,EACjB,cAAkB,EAClB,UAAgB,EAChB,sBAA2C,EAC3C,aAAa,EACb,MAAM,GACP,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BA8UzB;yBA/Ve,eAAe"}
+{"version":3,"file":"MobileTokenizer.d.ts","sourceRoot":"","sources":["../../src/MobileTokenizer/MobileTokenizer.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAYlD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,8BAA8B,CAAC;AAQ/E,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,cAAc,IACtD;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,GACtB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CAC1E,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA8KD,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,UAAkB,EAClB,SAAiB,EACjB,UAAU,EACV,YAAiB,EACjB,cAAkB,EAClB,UAAgB,EAChB,sBAA2C,EAC3C,aAAa,EACb,MAAM,GACP,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BA2WzB;yBA5Xe,eAAe"}

package/dist/MobileTokenizer/MobileTokenizer.js

@@ -67,6 +67,14 @@ function ListBulletIcon(props) {
   });
 }
 const styles = {
+  tokenDisabled: {
+    kMwMTN: "x1tgivj0 x1bhcspo",
+    $$css: true
+  },
+  indicatorDisabled: {
+    kVAM5u: "x14i3s5s xmnqt3w",
+    $$css: true
+  },
   footerAction: {
     kzQI83: "x1iyjqo2",
     kCS8Yb: "x1r8uery",
@@ -229,23 +237,37 @@ export function MobileTokenizer({
       "aria-haspopup": "dialog",
       "aria-expanded": activeSheet != null,
       "aria-label": label,
-      disabled: isDisabled,
+      "aria-disabled": isDisabled || undefined,
       onClick: () => {
+        if (isDisabled) {
+          return;
+        }
         setSelectedItemsAtOpen(value);
         lastLoadScrollHeightRef.current = null;
         setRenderedItemCount(LIST_RENDER_BATCH_SIZE);
         setActiveSheet('manage');
       },
       ...{
-        className: "x78zum5 x1a02dak x6s0dn4 xzye2dw xh8yej3 x1gg8mnh xu0wf1k xf314gf xmkeg23 x1y0btm7 x14i3s5s xh6dtrn xjbqb8w x1yc453h x1ypdohk x16khyan"
-      },
+        0: {
+          className: "x78zum5 x1a02dak x6s0dn4 xzye2dw xh8yej3 x1gg8mnh xu0wf1k xf314gf xmkeg23 x1y0btm7 x14i3s5s xh6dtrn xjbqb8w x1yc453h x1ypdohk x16khyan"
+        },
+        1: {
+          className: "x78zum5 x1a02dak x6s0dn4 xzye2dw xh8yej3 x1gg8mnh xu0wf1k xf314gf xmkeg23 x1y0btm7 xh6dtrn xjbqb8w x1yc453h x1ypdohk x16khyan x14i3s5s xmnqt3w x1bhcspo"
+        }
+      }[!!isDisabled << 0],
       children: value.length > 0 ? value.map(item => /*#__PURE__*/_jsx(Token, {
         label: item.label,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        xstyle: isDisabled ? styles.tokenDisabled : undefined
       }, item.id)) : /*#__PURE__*/_jsx("span", {
         ...{
-          className: "xv1l7n4"
-        },
+          0: {
+            className: "xv1l7n4"
+          },
+          1: {
+            className: "xv1l7n4 x1bhcspo"
+          }
+        }[!!isDisabled << 0],
         children: placeholder ?? ''
       })
     }), !isDisabled && /*#__PURE__*/_jsx(BottomSheetSwitcher, {
@@ -341,23 +363,39 @@ export function MobileTokenizer({
                 role: "checkbox",
                 "aria-checked": isSelected,
                 "aria-label": item.label,
-                disabled: rowDisabled,
-                onClick: () => isSelected ? handleRemove(item) : handleAdd(item),
-                ...{
-                  className: "x78zum5 x6s0dn4 x1qughib x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj xc342km xh6dtrn xjbqb8w x1tgivj0 x1yc453h x1ypdohk x16khyan"
+                "aria-disabled": rowDisabled || undefined,
+                onClick: () => {
+                  if (rowDisabled) {
+                    return;
+                  }
+                  if (isSelected) {
+                    handleRemove(item);
+                  } else {
+                    handleAdd(item);
+                  }
                 },
+                ...{
+                  0: {
+                    className: "x78zum5 x6s0dn4 x1qughib x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj xc342km xh6dtrn xjbqb8w x1tgivj0 x1yc453h x1ypdohk x16khyan"
+                  },
+                  1: {
+                    className: "x78zum5 x6s0dn4 x1qughib x1txdalj xh8yej3 x1gg8mnh xce4md1 x7a5moj xc342km xh6dtrn xjbqb8w x1yc453h x1ypdohk x16khyan x1tgivj0 x1bhcspo"
+                  }
+                }[!!rowDisabled << 0],
                 children: [/*#__PURE__*/_jsx("span", {
                   ...{
                     className: "x1iyjqo2 xeuugli"
                   },
                   children: /*#__PURE__*/_jsx(Text, {
                     type: "body",
+                    color: rowDisabled ? 'inherit' : undefined,
                     children: item.label
                   })
                 }), /*#__PURE__*/_jsx(CheckboxIndicator, {
                   state: isSelected ? 'checked' : 'unchecked',
                   size: "md",
-                  isDisabled: rowDisabled
+                  isDisabled: rowDisabled,
+                  xstyle: rowDisabled ? styles.indicatorDisabled : undefined
                 })]
               }, item.id);
             })]

package/dist/lab.css

@@ -28,7 +28,6 @@
   @keyframes x9ppb3p-B{0%{stroke-dasharray:2%,300%;stroke-dashoffset:0%;}50%{stroke-dasharray:175%,300%;stroke-dashoffset:-68%;}100%{stroke-dasharray:2%,300%;stroke-dashoffset:-302%;}}
   @keyframes xqng64z-B{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
   @keyframes x17t2jll-B{0%{transform:translateY(0);opacity:.35;}30%{transform:translateY(-3px);opacity:1;}60%{transform:translateY(0);opacity:.35;}100%{transform:translateY(0);opacity:.35;}}
-  :root, .x7j7z01{--color-data-categorical-blue:light-dark(#0171E3, #0171E3);--color-data-categorical-orange:light-dark(#EB6E00, #EB6E00);--color-data-categorical-purple:light-dark(#6B1EFD, #6B1EFD);--color-data-categorical-green:light-dark(#0B991F, #0B991F);--color-data-categorical-pink:light-dark(#F351C0, #F351C0);--color-data-categorical-cyan:light-dark(#0171A4, #0171A4);--color-data-categorical-red:light-dark(#F5394F, #F5394F);--color-data-categorical-teal:light-dark(#08A3A3, #08A3A3);--color-data-categorical-brown:light-dark(#965E03, #965E03);--color-data-categorical-indigo:light-dark(#6F8AFF, #6F8AFF);--color-data-neutral:light-dark(#8494A3, #8C939B);--color-data-blue-5:light-dark(#02165E, #02165E);--color-data-blue-4:light-dark(#004CBC, #004CBC);--color-data-blue-3:light-dark(#2694FE, #2694FE);--color-data-blue-2:light-dark(#78BEFF, #78BEFF);--color-data-blue-1:light-dark(#DBECFF, #DBECFF);--color-data-shamrock-5:light-dark(#0B603D, #0B603D);--color-data-shamrock-4:light-dark(#138546, #138546);--color-data-shamrock-3:light-dark(#24BB5E, #24BB5E);--color-data-shamrock-2:light-dark(#8EF7AA, #8EF7AA);--color-data-shamrock-1:light-dark(#D6FEE4, #D6FEE4);--color-data-orange-5:light-dark(#A13F04, #A13F04);--color-data-orange-4:light-dark(#D66100, #D66100);--color-data-orange-3:light-dark(#FD9537, #FD9537);--color-data-orange-2:light-dark(#FDB876, #FDB876);--color-data-orange-1:light-dark(#FFE6CF, #FFE6CF);--color-data-pink-5:light-dark(#8E1073, #8E1073);--color-data-pink-4:light-dark(#D123A1, #D123A1);--color-data-pink-3:light-dark(#F989D3, #F989D3);--color-data-pink-2:light-dark(#FEADE3, #FEADE3);--color-data-pink-1:light-dark(#FCE3F4, #FCE3F4);--color-data-purple-5:light-dark(#3E0697, #3E0697);--color-data-purple-4:light-dark(#6B1EFD, #6B1EFD);--color-data-purple-3:light-dark(#9081FF, #9081FF);--color-data-purple-2:light-dark(#B3B0FE, #B3B0FE);--color-data-purple-1:light-dark(#E8E8FB, #E8E8FB);--color-data-red-5:light-dark(#9D0519, #9D0519);--color-data-red-4:light-dark(#D31130, #D31130);--color-data-red-3:light-dark(#FB7D87, #FB7D87);--color-data-red-2:light-dark(#FFB2B8, #FFB2B8);--color-data-red-1:light-dark(#FEE4E6, #FEE4E6);--color-data-teal-5:light-dark(#08767D, #08767D);--color-data-teal-4:light-dark(#0C9293, #0C9293);--color-data-teal-3:light-dark(#0DB7AF, #0DB7AF);--color-data-teal-2:light-dark(#6CE6D8, #6CE6D8);--color-data-teal-1:light-dark(#D7FCF8, #D7FCF8);--color-data-yellow-5:light-dark(#8A5001, #8A5001);--color-data-yellow-4:light-dark(#D69804, #D69804);--color-data-yellow-3:light-dark(#FBCE03, #FBCE03);--color-data-yellow-2:light-dark(#FCEC85, #FCEC85);--color-data-yellow-1:light-dark(#FDF6BA, #FDF6BA);--color-data-gray-5:light-dark(#25363F, #333338);--color-data-gray-4:light-dark(#5D6C7B, #666A72);--color-data-gray-3:light-dark(#AFB9C4, #B2B8BE);--color-data-gray-2:light-dark(#CCD3DB, #D0D3D6);--color-data-gray-1:light-dark(#F1F4F7, #F2F4F6);}
   :root, .x1ucsbpz{--icon-layer-primary-fill:none;--icon-layer-primary-stroke:currentColor;--icon-layer-primary-opacity:1;--icon-layer-primary-stroke-role-fill:none;--icon-layer-primary-stroke-role-stroke:currentColor;--icon-layer-primary-stroke-role-opacity:1;--icon-layer-primary-stroke-role-width:1.5;--icon-layer-secondary-fill:none;--icon-layer-secondary-stroke:currentColor;--icon-layer-secondary-opacity:1;--icon-layer-secondary-stroke-role-fill:none;--icon-layer-secondary-stroke-role-stroke:currentColor;--icon-layer-secondary-stroke-role-opacity:1;--icon-layer-secondary-stroke-role-width:1.5;--icon-size:24px;--icon-stroke-width:1.5;--icon-stroke-linecap:round;--icon-stroke-linejoin:round;--icon-padding:0px;--icon-inline-offset:0px;--icon-block-offset:0px;--icon-bold-stroke-boost:0.5;--icon-gap:0.75;--icon-gap-linejoin:round;}
   :root, .xc6kv0w{--transfer-list-panel-min-block-size:12rem;--transfer-list-panel-max-block-size:20rem;}
   .x1eijsz{--icon-layer-primary-fill:currentColor}
@@ -158,6 +157,7 @@
   .xz7zccy.xz7zccy:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){border-color:var(--color-accent)}
   .xg9gykk.xg9gykk:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){text-decoration:underline}
   @media (forced-colors: active){.x1w1tqly.x1w1tqly:not(#\#):not(#\#){border-color:CanvasText}}
+  @media (forced-colors: active){.xmnqt3w.xmnqt3w:not(#\#):not(#\#){border-color:GrayText}}
   @media (forced-colors: active){.x1n2ykn.x1n2ykn:not(#\#):not(#\#){border-color:Highlight}}
   @media (hover: hover){.xmhmdd9.xmhmdd9.xmhmdd9:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){border-color:var(--color-accent)}}
   @media (hover: hover){.x1xwh4np.x1xwh4np.x1xwh4np:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#){border-color:var(--color-border-emphasized)}}
@@ -597,6 +597,7 @@
   @media (prefers-reduced-motion: reduce) and (not (forced-colors: active)){.x1peun2k.x1peun2k:not(#\#):not(#\#):not(#\#){background-image:none}}
   @media (forced-colors: active){.xwaqzdf.xwaqzdf:not(#\#):not(#\#):not(#\#){box-shadow:none}}
   @media (forced-colors: active){.xs5hli.xs5hli:not(#\#):not(#\#):not(#\#){color:CanvasText}}
+  @media (forced-colors: active){.x1bhcspo.x1bhcspo:not(#\#):not(#\#):not(#\#){color:GrayText}}
   @media (forced-colors: active){.x1k5gbb1.x1k5gbb1:not(#\#):not(#\#):not(#\#){color:HighlightText}}
   @media (prefers-reduced-motion: reduce) and (not (forced-colors: active)){.x1wi2gft.x1wi2gft:not(#\#):not(#\#):not(#\#){color:var(--color-text-secondary)}}
   @media (forced-colors: active){.x1tbh5bv.x1tbh5bv:not(#\#):not(#\#):not(#\#){opacity:1}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.2-canary.fdd384f",
+  "version": "0.7.3-canary.02f5fe4",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.2-canary.fdd384f",
+    "@astryxdesign/core": "0.7.3-canary.02f5fe4",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.2-canary.fdd384f",
-    "@astryxdesign/cli": "0.7.2-canary.fdd384f",
+    "@astryxdesign/a11y-spec": "0.7.3-canary.02f5fe4",
+    "@astryxdesign/cli": "0.7.3-canary.02f5fe4",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chat/ChatTypingIndicator.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   group: 'Chat',
   category: 'Chat',
   displayName: 'Chat Typing Indicator',
-  description: 'Animated three-dot typing hint with a localized, grammar-aware label: "Ana is typing...", "Ana and Ben are typing...", or "Ana and 2 others are typing...". Dots bounce with staggered stylex.keyframes delays, disabled under prefers-reduced-motion; the label is announced politely via role="status".',
+  description: 'Animated three-dot typing hint with a localized, grammar-aware label: "Ana is typing...", "Ana and Ben are typing...", or "Ana and 2 others are typing...". Dots bounce with staggered stylex.keyframes delays, disabled under prefers-reduced-motion. Each new label is announced once, politely, through the shared announcement channel (useAnnounce); inside a chat log the log announces it instead. The indicator itself carries no live role, so it can mount conditionally without being skipped or heard twice.',
   props: [
     {
       name: 'names',
@@ -21,7 +21,7 @@ export const docs = {
 export const docsZh = {
   name: 'ChatTypingIndicator',
   displayName: 'Chat Typing Indicator',
-  description: '带语法感知标签的三点跳动输入提示："Ana is typing..."、"Ana and Ben are typing..." 或 "Ana and 2 others are typing..."。圆点用 stylex.keyframes 交错跳动，prefers-reduced-motion 下禁用；标签通过 role="status" 礼貌播报。',
+  description: '带语法感知标签的三点跳动输入提示："Ana is typing..."、"Ana and Ben are typing..." 或 "Ana and 2 others are typing..."。圆点用 stylex.keyframes 交错跳动，prefers-reduced-motion 下禁用。每个新标签通过共享播报通道（useAnnounce）礼貌播报一次；位于聊天记录（role="log"）内时由记录负责播报。指示器本身不带 live 角色，因此可按条件挂载，既不会被跳过，也不会重复播报。',
   propDescriptions: {
     names: '正在输入的人名。一个名字渲染 "is typing"，两个渲染双名，更多折叠为 "and N others"。语句取自 i18n 词条，人名由 Intl.ListFormat 按当前语言拼接，因此措辞与连接词随语言而变。省略或为空时仅渲染动画圆点。',
   },
@@ -30,7 +30,7 @@ export const docsZh = {
 export const docsDense = {
   name: 'ChatTypingIndicator',
   displayName: 'Chat Typing Indicator',
-  description: 'bouncing three-dot typing hint; label grammar 1/2/N names; reduced-motion safe keyframes; role=status polite announce; dots-only when names empty',
+  description: 'bouncing three-dot typing hint; label grammar 1/2/N names; reduced-motion safe keyframes; announces each new label once via useAnnounce (polite), or leaves it to an enclosing role=log; no live role on the element; dots-only when names empty',
   propDescriptions: {
     names:
       "string[]; 1='X is typing', 2='X and Y', 3+='X and N others'; phrases from i18n catalog, names joined by Intl.ListFormat; empty=dots only",

package/src/Chat/ChatTypingIndicator.test.tsx

@@ -1,10 +1,21 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it, expect} from 'vitest';
+import {StrictMode} from 'react';
+import {beforeEach, describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {ChatTypingIndicator} from './ChatTypingIndicator';
 import {InternationalizationProvider} from '@astryxdesign/core/i18n';
 
+const announce = vi.fn();
+vi.mock('@astryxdesign/core/hooks', async importOriginal => ({
+  ...(await importOriginal<typeof import('@astryxdesign/core/hooks')>()),
+  useAnnounce: () => announce,
+}));
+
+beforeEach(() => {
+  announce.mockClear();
+});
+
 describe('ChatTypingIndicator', () => {
   it('renders "X is typing…" for one name', () => {
     render(<ChatTypingIndicator names={['Ana']} />);
@@ -84,4 +95,58 @@ describe('ChatTypingIndicator', () => {
       'astryx-chat-typing-indicator',
     );
   });
+
+  describe('status announcement (spec:AST-086)', () => {
+    it('mounts with its label but carries no live role (FR2)', () => {
+      const {container} = render(<ChatTypingIndicator names={['Ana']} />);
+      const root = container.firstElementChild as HTMLElement;
+      expect(root).toHaveTextContent('Ana is typing…');
+      expect(root).not.toHaveAttribute('role');
+      expect(root).not.toHaveAttribute('aria-live');
+      expect(screen.queryByRole('status')).toBeNull();
+    });
+
+    it('announces a mounted label once through the polite channel, even under StrictMode (FR2, FR6)', () => {
+      const {rerender} = render(
+        <StrictMode>
+          <ChatTypingIndicator names={['Ana']} />
+        </StrictMode>,
+      );
+      rerender(
+        <StrictMode>
+          <ChatTypingIndicator names={['Ana']} />
+        </StrictMode>,
+      );
+      expect(announce.mock.calls).toEqual([['Ana is typing…', 'polite']]);
+    });
+
+    it('announces each new label, nothing on clear, and the same people again as a new occasion (FR6)', () => {
+      const {rerender} = render(<ChatTypingIndicator names={[]} />);
+      expect(announce).not.toHaveBeenCalled();
+      rerender(<ChatTypingIndicator names={['Ana']} />);
+      rerender(<ChatTypingIndicator names={['Ana', 'Ben']} />);
+      rerender(<ChatTypingIndicator names={[]} />);
+      rerender(<ChatTypingIndicator names={['Ana', 'Ben']} />);
+      expect(announce.mock.calls).toEqual([
+        ['Ana is typing…', 'polite'],
+        ['Ana and Ben are typing…', 'polite'],
+        ['Ana and Ben are typing…', 'polite'],
+      ]);
+    });
+
+    it('leaves delivery to an enclosing chat log (FR4)', () => {
+      const {rerender} = render(
+        <div role="log">
+          <ChatTypingIndicator names={['Ana']} />
+        </div>,
+      );
+      rerender(
+        <div role="log">
+          <ChatTypingIndicator names={['Ana', 'Ben']} />
+        </div>,
+      );
+      expect(announce).not.toHaveBeenCalled();
+      expect(screen.queryByRole('status')).toBeNull();
+    });
+  });
 });

package/src/Chat/ChatTypingIndicator.tsx

@@ -10,8 +10,10 @@
  *
  * Three staggered bouncing dots (stylex.keyframes, reduced-motion safe)
  * with a grammar-aware label: "Ana is typing…", "Ana and Ben are typing…",
- * or "Ana and 2 others are typing…". Announced politely via role="status".
- * Renders dots only when no names are provided.
+ * or "Ana and 2 others are typing…". The label is announced once per change
+ * through the shared polite channel (`useAnnounce`), or left to an enclosing
+ * live container such as a chat log; the element itself carries no live role
+ * (spec:AST-086 FR2, FR4). Renders dots only when no names are provided.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/Chat/index.ts (exports)
@@ -19,7 +21,7 @@
  * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
  */
 
-import {useMemo} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -30,7 +32,8 @@ import {
   typeScaleVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
 import type {BaseProps} from '@astryxdesign/core';
-import {mergeProps} from '@astryxdesign/core/utils';
+import {mergeProps, mergeRefs} from '@astryxdesign/core/utils';
+import {useAnnounce} from '@astryxdesign/core/hooks';
 import {themeProps} from '@astryxdesign/core/utils';
 import {useLocale, useTranslator} from '@astryxdesign/core/i18n';
 import type {TranslatorFn} from '@astryxdesign/core/i18n';
@@ -132,6 +135,14 @@ function typingLabel(
   });
 }
 
+/**
+ * An enclosing live container (a chat transcript's role="log", or any element
+ * the page made live) already delivers content added inside it, so the
+ * indicator must not announce the same words again (spec:AST-086 FR4).
+ */
+const LIVE_CONTAINER_SELECTOR =
+  '[role="log"], [role="status"], [role="alert"], [aria-live="polite"], [aria-live="assertive"]';
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -140,8 +151,9 @@ function typingLabel(
  * Animated three-dot typing hint with a name-aware label.
  *
  * The dots bounce with staggered delays (disabled under
- * prefers-reduced-motion) and the label is announced politely to
- * screen readers via role="status".
+ * prefers-reduced-motion). Each new label is announced politely to screen
+ * readers through the shared announcement channel, unless an enclosing live
+ * container such as a chat log delivers it.
  *
  * @example
  * ```
@@ -164,11 +176,33 @@ export function ChatTypingIndicator({
     [locale],
   );
   const label = typingLabel(names, t, listFormat);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [ref]);
+  const announce = useAnnounce();
+  // The label last announced, so a rerender or a StrictMode effect replay does
+  // not repeat it; cleared when nobody is typing, so the same people starting
+  // again is a new occasion (spec:AST-086 FR6).
+  const announcedLabelRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (label == null) {
+      announcedLabelRef.current = null;
+      return;
+    }
+    if (announcedLabelRef.current === label) {
+      return;
+    }
+    announcedLabelRef.current = label;
+    const isInsideLiveContainer =
+      rootRef.current?.parentElement?.closest(LIVE_CONTAINER_SELECTOR) != null;
+    if (!isInsideLiveContainer) {
+      announce(label, 'polite');
+    }
+  }, [announce, label]);
+
   return (
     <div
-      ref={ref}
-      role="status"
-      aria-live="polite"
+      ref={mergedRef}
       data-testid={testId}
       {...mergeProps(
         themeProps('chat-typing-indicator'),

package/src/Chat/__tests__/ChatTypingIndicator.a11y.renders.tsx

@@ -4,7 +4,8 @@
 
 /** Shared jsdom and Storybook renderings for ChatTypingIndicator status states. */
 
-import {useState, type ReactElement} from 'react';
+import {useEffect, useState, type ReactElement} from 'react';
+import {useAnnounce} from '@astryxdesign/core/hooks';
 import {ChatTypingIndicator} from '../ChatTypingIndicator';
 import type {ChatTypingStatusStateId} from './ChatTypingIndicator.a11y.states';
 
@@ -27,12 +28,35 @@ function TransitionButton({
   );
 }
 
-function TypingHarness({startsNamed}: {startsNamed: boolean}) {
-  const initial = startsNamed ? ['Ana'] : [];
-  const [names, setNames] = useState<string[]>(initial);
+/**
+ * Establishes the singleton polite channel the indicator announces through,
+ * then clears the seed, so the binding inspects the pre-existing empty region.
+ */
+function PrimePoliteChannel() {
+  const announce = useAnnounce();
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    let secondFrame = 0;
+    announce('Preparing status channel', 'polite');
+    const firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => {
+        announce('', 'polite');
+        setIsReady(true);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(firstFrame);
+      cancelAnimationFrame(secondFrame);
+    };
+  }, [announce]);
+  return <span data-a11y-ready={String(isReady)} hidden />;
+}
+
+function TypingHarness() {
+  const [names, setNames] = useState<string[]>([]);
   return (
     <div>
-      <span data-a11y-ready="true" hidden />
+      <PrimePoliteChannel />
       <button data-a11y-relation="focus-anchor" type="button">
         Keep focus
       </button>
@@ -53,8 +77,7 @@ export const CHAT_TYPING_STATUS_STATE_RENDERS: Record<
   ChatTypingStatusStateId,
   ChatTypingStatusStateRender
 > = {
-  'chat-typing-empty-to-message': () => <TypingHarness startsNamed={false} />,
-  'chat-typing-name-mounted': () => <TypingHarness startsNamed />,
+  'chat-typing-empty-to-message': () => <TypingHarness />,
 };
 
 export {transitionTestId};

package/src/Chat/__tests__/ChatTypingIndicator.a11y.states.ts

@@ -9,12 +9,11 @@
 
 import type {StatusMessageStateFacts} from '@astryxdesign/a11y-spec';
 
-export type ChatTypingStatusStateId =
-  'chat-typing-empty-to-message' | 'chat-typing-name-mounted';
+export type ChatTypingStatusStateId = 'chat-typing-empty-to-message';
 
 export interface ChatTypingStatusBindingDefinition {
   readonly id: ChatTypingStatusStateId;
-  readonly binding: 'ChatTypingIndicator';
+  readonly binding: 'ChatTypingIndicator announcement channel';
   readonly summary: string;
   readonly facts: StatusMessageStateFacts;
   readonly storyId: string;
@@ -28,30 +27,19 @@ const LIFECYCLE_FACTS: StatusMessageStateFacts = {
   initialMessage: '',
   message: 'Ana is typing…',
   replacement: 'Ana and Ben are typing…',
-  semanticTransitions: ['show', 'replace', 'clear'],
+  semanticTransitions: ['show', 'replace'],
 };
 
 export const CHAT_TYPING_STATUS_BINDING_STATES: ReadonlyArray<ChatTypingStatusBindingDefinition> =
   [
     {
       id: 'chat-typing-empty-to-message',
-      binding: 'ChatTypingIndicator',
+      binding: 'ChatTypingIndicator announcement channel',
       summary:
-        'the mounted empty indicator receives one name, replaces it with two, then clears',
+        'one name, then two, reach the persistent polite channel as the indicator updates',
       facts: LIFECYCLE_FACTS,
       storyId: 'a11y-status-message-pattern--chat-typing-empty-to-message',
     },
-    {
-      id: 'chat-typing-name-mounted',
-      binding: 'ChatTypingIndicator',
-      summary: 'the documented named indicator is mounted with its status text',
-      facts: {
-        ...LIFECYCLE_FACTS,
-        initialMessage: 'Ana is typing…',
-        semanticTransitions: ['replace'],
-      },
-      storyId: 'a11y-status-message-pattern--chat-typing-name-mounted',
-    },
   ];
 
 export type ChatTypingStatusBindingState = ChatTypingStatusBindingDefinition;
@@ -61,7 +49,19 @@ export const CHAT_TYPING_STATUS_EXCLUSIONS = [
     owner: 'ChatTypingIndicator',
     part: 'omitted names',
     reason:
-      'Omitted names and an empty names array render the same empty persistent status state, so one binding row covers both inputs.',
+      'Omitted names and an empty names array render the same dots-only indicator and announce nothing, so one binding row covers both inputs.',
+  },
+  {
+    owner: 'ChatTypingIndicator',
+    part: 'indicator mounted with names',
+    reason:
+      'A named indicator that mounts announces its label once through the same channel; the channel text clears on its own timer, so the mount occasion is asserted with a channel spy in ChatTypingIndicator.test.tsx rather than as a bound initial state.',
+  },
+  {
+    owner: 'useAnnounce',
+    part: 'clearing the names',
+    reason:
+      'Clearing removes the visible label and announces nothing; the channel clears its own text after each announcement, so no clear transition is observable on it.',
   },
   {
     owner: 'ChatTypingIndicator and theme',
@@ -73,6 +73,6 @@ export const CHAT_TYPING_STATUS_EXCLUSIONS = [
     owner: 'ChatMessageList',
     part: 'transcript log announcements',
     reason:
-      'The parent role=log owns sequential message updates and stream batching, which are distinct from this one atomic typing status.',
+      'Inside a role=log the indicator announces nothing and the log delivers the label as added content (spec:AST-086 FR4), asserted in ChatTypingIndicator.test.tsx.',
   },
 ] as const;

package/src/Chat/__tests__/ChatTypingIndicator.a11y.test.tsx

@@ -71,6 +71,8 @@ describe('ChatTypingIndicator status-message binding — jsdom lane', () => {
   it('records equivalent and separately owned states explicitly', () => {
     expect(CHAT_TYPING_STATUS_EXCLUSIONS.map(entry => entry.part)).toEqual([
       'omitted names',
+      'indicator mounted with names',
+      'clearing the names',
       'typing-dot animation and reduced motion',
       'transcript log announcements',
     ]);

package/src/Comments/CommentComposer.test.tsx

@@ -25,7 +25,7 @@ vi.mock('../EmojiPicker/emojiData', () => ({
   ],
 }));
 
-import {CommentComposer} from './CommentComposer';
+import {CommentComposer, CommentComposerBase} from './CommentComposer';
 
 const originalMatches = HTMLElement.prototype.matches;
 const popoverOpenState = new WeakMap<HTMLElement, boolean>();
@@ -101,6 +101,34 @@ describe('CommentComposer', () => {
     expect(onSubmit).toHaveBeenCalledWith('Looks good');
   });
 
+  it('keeps Cancel in the tab order but inert while submitting (AST-085 FR1, FR2)', () => {
+    const onCancel = vi.fn();
+    render(
+      <CommentComposerBase
+        value="Draft"
+        onChange={() => {}}
+        onSubmit={() => {}}
+        placeholder="Edit comment"
+        onCancel={onCancel}
+        context={{kind: 'edit', commentId: 'c1'}}
+        contextLabel="Editing comment"
+        highlightColor="yellow"
+        triggers={[]}
+        agentCommands={[]}
+        hasEmojiPicker={false}
+        isSubmitting
+      />,
+    );
+    const cancel = screen.getByText('Cancel').closest('a, button')!;
+    expect(cancel).toHaveAttribute('aria-disabled', 'true');
+    expect(cancel).not.toHaveAttribute('tabindex', '-1');
+    act(() => (cancel as HTMLElement).focus());
+    expect(cancel).toHaveFocus();
+    fireEvent.click(cancel);
+    fireEvent.keyDown(cancel, {key: 'Enter'});
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+
   it('shows the placeholder as the input’s name, and keeps Post focusable while submitting', () => {
     const onSubmit = vi.fn();
     const {container} = render(
@@ -185,6 +213,60 @@ describe('CommentComposer', () => {
     );
   });
 
+  it('keeps the image picker free of native disabled and refuses files while busy (AST-085 FR1, FR2)', async () => {
+    const onUploadImages = vi.fn();
+    render(
+      <CommentComposer
+        value="Draft"
+        onChange={() => {}}
+        onSubmit={() => {}}
+        onUploadImages={onUploadImages}
+        isSubmitting
+      />,
+    );
+    const input = document.querySelector('input[type="file"]');
+    if (!(input instanceof HTMLInputElement)) {
+      throw new Error('File input not found');
+    }
+    expect(input).not.toHaveAttribute('disabled');
+    const file = new File(['png'], 'chart.png', {type: 'image/png'});
+    await act(async () => {
+      fireEvent.change(input, {target: {files: [file]}});
+      await Promise.resolve();
+    });
+    expect(onUploadImages).not.toHaveBeenCalled();
+  });
+
+  it('does not open the image chooser from the error banner while busy', async () => {
+    const onUploadImages = vi.fn();
+    const props = {
+      value: 'Draft',
+      onChange: () => {},
+      onSubmit: () => {},
+      onUploadImages,
+    };
+    const view = render(<CommentComposer {...props} />);
+    const input = document.querySelector('input[type="file"]');
+    if (!(input instanceof HTMLInputElement)) {
+      throw new Error('File input not found');
+    }
+    const openChooser = vi.spyOn(input, 'click').mockImplementation(() => {});
+    await act(async () => {
+      fireEvent.change(input, {
+        target: {
+          files: [new File(['%PDF'], 'doc.pdf', {type: 'application/pdf'})],
+        },
+      });
+    });
+    view.rerender(<CommentComposer {...props} isSubmitting />);
+    fireEvent.click(screen.getByRole('button', {name: 'Choose images'}));
+    expect(openChooser).not.toHaveBeenCalled();
+
+    view.rerender(<CommentComposer {...props} />);
+    fireEvent.click(screen.getByRole('button', {name: 'Choose images'}));
+    expect(openChooser).toHaveBeenCalledTimes(1);
+  });
+
   it('refuses files that are not images', async () => {
     const onUploadImages = vi.fn();
     render(

package/src/Comments/CommentComposer.tsx

@@ -239,6 +239,8 @@ export function CommentComposerBase({
   latestValueRef.current = value;
   const isMountedRef = useRef(true);
   const actionPendingRef = useRef(false);
+  const isSubmittingRef = useRef(isSubmitting);
+  isSubmittingRef.current = isSubmitting;
   const imageInputRef = useRef<HTMLInputElement>(null);
   const inputRef = useRef<ChatComposerInputHandle | null>(null);
   // Focus lands once per `focusKey`, when the input attaches: the handle ref
@@ -323,7 +325,15 @@ export function CommentComposerBase({
       setActionError({
         title: t('@astryx.commentComposer.imagesOnly'),
         actionLabel: t('@astryx.commentComposer.chooseImages'),
-        onAction: () => imageInputRef.current?.click(),
+        onAction: () => {
+          // The picker input is never natively disabled, so its click() would
+          // open the file chooser while busy and the busy guard would drop
+          // the pick.
+          if (isSubmittingRef.current || actionPendingRef.current) {
+            return;
+          }
+          imageInputRef.current?.click();
+        },
       });
       return;
     }
@@ -439,10 +449,12 @@ export function CommentComposerBase({
                     accept="image/*"
                     multiple
                     hidden
-                    disabled={isBusy}
                     onChange={event => {
                       const files = Array.from(event.currentTarget.files ?? []);
                       event.currentTarget.value = '';
+                      if (isBusy) {
+                        return;
+                      }
                       beginImageUpload(files);
                     }}
                   />

package/src/Comments/CommentParts.tsx

@@ -382,8 +382,8 @@ export function MetadataActionLink({
       color="secondary"
       xstyle={partStyles.noWrap}
       data-metadata-action={actionRole}
-      aria-disabled={isDisabled || undefined}
-      tabIndex={isDisabled ? -1 : undefined}
+      // Link keeps a disabled link in the tab order (spec:AST-085 FR1).
+      isDisabled={isDisabled}
       onClick={event => {
         event.preventDefault();
         if (isDisabled !== true) {
@@ -725,10 +725,7 @@ export function HistoryDialog({
         content={
           <LayoutContent>
             {history.isLoading ? (
-              <Spinner
-                size="lg"
-                label={t('@astryx.comments.historyLoading')}
-              />
+              <Spinner size="lg" label={t('@astryx.comments.historyLoading')} />
             ) : history.error != null ? (
               <Banner
                 status="error"

package/src/Comments/Comments.test.tsx

@@ -402,9 +402,7 @@ describe('Comments rendering', () => {
   it('removes the fading New badge from layout when its animation ends', () => {
     render(
       <Sized>
-        <Comments
-          comments={[{...COMMENTS[0], isUnread: true, replies: []}]}
-        />
+        <Comments comments={[{...COMMENTS[0], isUnread: true, replies: []}]} />
       </Sized>,
     );
     const badge = document.querySelector('[data-comment-unread-badge="true"]');
@@ -586,8 +584,9 @@ describe('Comments live collaboration seams', () => {
     await click(screen.getByRole('button', {name: 'Thread by Avery Kim'}));
     const typingStatus = screen
       .getByText('Maya Chen and Release Assistant are typing…')
-      .closest('[role="status"]');
+      .closest('.astryx-chat-typing-indicator');
     expect(typingStatus).not.toBeNull();
+    expect(typingStatus).not.toHaveAttribute('role');
     expect(
       (typingStatus as HTMLElement).style.getPropertyValue(
         '--astryx-chat-typing-indicator-dots-column-width',
@@ -867,11 +866,7 @@ describe('Comments threads', () => {
     const onReact = vi.fn().mockResolvedValue(undefined);
     render(
       <Sized>
-        <Comments
-          comments={COMMENTS}
-          currentUser={VIEWER}
-          onReact={onReact}
-        />
+        <Comments comments={COMMENTS} currentUser={VIEWER} onReact={onReact} />
       </Sized>,
     );
     const article = articleByAuthor('Avery Kim');
@@ -896,11 +891,7 @@ describe('Comments threads', () => {
       .mockResolvedValue(undefined);
     render(
       <Sized>
-        <Comments
-          comments={COMMENTS}
-          currentUser={VIEWER}
-          onReact={onReact}
-        />
+        <Comments comments={COMMENTS} currentUser={VIEWER} onReact={onReact} />
       </Sized>,
     );
     await click(

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -15,6 +15,8 @@ import {
   within,
 } from '@testing-library/react';
 import {useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '@astryxdesign/core/theme/tokens.stylex';
 import {MobileTokenizer, type MobileTokenizerChange} from './MobileTokenizer';
 import type {SearchSource, SearchableItem} from '@astryxdesign/core/Typeahead';
 
@@ -337,4 +339,140 @@ describe('MobileTokenizer (Lab, single-sheet flow)', () => {
       expect.objectContaining({type: 'remove'}),
     );
   });
+
+  it('keeps a disabled trigger focusable without opening the sheet (AST-085 FR1, FR2)', () => {
+    render(
+      <MobileTokenizer
+        label="Tags"
+        searchSource={source}
+        value={[ITEMS[0]]}
+        onChange={() => {}}
+        isDisabled
+      />,
+    );
+    const trigger = screen.getByRole('button', {name: /Tags/});
+    expect(trigger).not.toHaveAttribute('disabled');
+    expect(trigger).toHaveAttribute('aria-disabled', 'true');
+    trigger.focus();
+    expect(trigger).toHaveFocus();
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(
+      screen.queryByTestId('mobile-tokenizer-list'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps an unselectable row at the limit focusable but inert (AST-085 FR1, FR2)', async () => {
+    const spy = vi.fn();
+    render(
+      <MobileTokenizer
+        label="Tags"
+        searchSource={source}
+        value={[ITEMS[0]]}
+        maxEntries={1}
+        debounceMs={0}
+        onChange={spy}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', {name: /Tags/}));
+    const row = await screen.findByRole('checkbox', {name: 'Energizer'});
+    expect(row).not.toHaveAttribute('disabled');
+    expect(row).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(row);
+    expect(spy).not.toHaveBeenCalled();
+    expect(row).toHaveAttribute('aria-checked', 'false');
+    // In forced colors its indicator border takes GrayText (AST-085 FR6).
+    const indicatorClasses = stylex
+      .props(
+        stylex.create({
+          border: {
+            borderColor: {
+              default: colorVars['--color-border'],
+              '@media (forced-colors: active)': 'GrayText',
+            },
+          },
+        }).border,
+      )
+      .className!.split(' ')
+      .filter(name => !name.includes('__'));
+    const indicator = row.querySelector('.astryx-checkbox-indicator')!;
+    for (const name of indicatorClasses) {
+      expect(indicator).toHaveClass(name);
+    }
+  });
+
+  it('paints the placeholder of a disabled empty trigger GrayText in forced colors (AST-085 FR6)', () => {
+    const placeholderClasses = stylex
+      .props(
+        stylex.create({
+          placeholder: {
+            color: {
+              default: colorVars['--color-text-secondary'],
+              '@media (forced-colors: active)': 'GrayText',
+            },
+          },
+        }).placeholder,
+      )
+      .className!.split(' ')
+      .filter(name => !name.includes('__'));
+    render(
+      <MobileTokenizer
+        label="Tags"
+        searchSource={source}
+        value={[]}
+        onChange={() => {}}
+        placeholder="Add tags"
+        isDisabled
+      />,
+    );
+    const placeholder = screen.getByText('Add tags');
+    for (const name of placeholderClasses) {
+      expect(placeholder).toHaveClass(name);
+    }
+  });
+
+  it('paints a disabled trigger and its tokens GrayText in forced colors (AST-085 FR6)', () => {
+    // The same declarations as the component's styles compile to the same
+    // atomic classes; without them the tokens keep their CanvasText label.
+    const atoms = (style: stylex.StyleXStyles) =>
+      stylex
+        .props(style)
+        .className!.split(' ')
+        .filter(name => !name.includes('__'));
+    const forced = stylex.create({
+      trigger: {
+        borderColor: {
+          default: colorVars['--color-border'],
+          '@media (forced-colors: active)': 'GrayText',
+        },
+        color: {default: null, '@media (forced-colors: active)': 'GrayText'},
+      },
+      token: {
+        color: {
+          default: colorVars['--color-text-primary'],
+          '@media (forced-colors: active)': 'GrayText',
+        },
+      },
+    });
+    render(
+      <MobileTokenizer
+        label="Tags"
+        searchSource={source}
+        value={[ITEMS[0], ITEMS[1]]}
+        onChange={() => {}}
+        isDisabled
+      />,
+    );
+    const trigger = screen.getByRole('button', {name: /Tags/});
+    for (const name of atoms(forced.trigger)) {
+      expect(trigger).toHaveClass(name);
+    }
+    const tokens = trigger.querySelectorAll('.astryx-token');
+    expect(tokens).toHaveLength(2);
+    for (const token of tokens) {
+      for (const name of atoms(forced.token)) {
+        expect(token).toHaveClass(name);
+      }
+    }
+  });
 });

package/src/MobileTokenizer/MobileTokenizer.tsx

@@ -118,9 +118,28 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
   },
+  // An aria-disabled button gets no system disabled paint in forced colors;
+  // GrayText is the platform's disabled affordance there. Defaults repeat the
+  // base values, since StyleX merges per property.
+  triggerDisabled: {
+    borderColor: {
+      default: colorVars['--color-border'],
+      '@media (forced-colors: active)': 'GrayText',
+    },
+    color: {
+      default: null,
+      '@media (forced-colors: active)': 'GrayText',
+    },
+  },
   triggerPlaceholder: {
     color: colorVars['--color-text-secondary'],
   },
+  triggerPlaceholderDisabled: {
+    color: {
+      default: colorVars['--color-text-secondary'],
+      '@media (forced-colors: active)': 'GrayText',
+    },
+  },
   sheetBody: {
     display: 'flex',
     flexDirection: 'column',
@@ -158,6 +177,29 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
   },
+  // A Token authors its own color, which forced colors replace with
+  // CanvasText; GrayText marks the tokens of a disabled trigger as disabled.
+  // The default repeats Token's own default color.
+  tokenDisabled: {
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'GrayText',
+    },
+  },
+  // Same for the indicator's border: GrayText in forced colors, and the
+  // default repeats the indicator's disabled border.
+  indicatorDisabled: {
+    borderColor: {
+      default: colorVars['--color-border'],
+      '@media (forced-colors: active)': 'GrayText',
+    },
+  },
+  rowDisabled: {
+    color: {
+      default: colorVars['--color-text-primary'],
+      '@media (forced-colors: active)': 'GrayText',
+    },
+  },
   rowLabel: {
     flexGrow: 1,
     minWidth: 0,
@@ -376,20 +418,32 @@ export function MobileTokenizer<T extends SearchableItem>({
         aria-haspopup="dialog"
         aria-expanded={activeSheet != null}
         aria-label={label}
-        disabled={isDisabled}
+        aria-disabled={isDisabled || undefined}
         onClick={() => {
+          if (isDisabled) {
+            return;
+          }
           setSelectedItemsAtOpen(value);
           lastLoadScrollHeightRef.current = null;
           setRenderedItemCount(LIST_RENDER_BATCH_SIZE);
           setActiveSheet('manage');
         }}
-        {...stylex.props(styles.trigger)}>
+        {...stylex.props(styles.trigger, isDisabled && styles.triggerDisabled)}>
         {value.length > 0 ? (
           value.map(item => (
-            <Token key={item.id} label={item.label} isDisabled={isDisabled} />
+            <Token
+              key={item.id}
+              label={item.label}
+              isDisabled={isDisabled}
+              xstyle={isDisabled ? styles.tokenDisabled : undefined}
+            />
           ))
         ) : (
-          <span {...stylex.props(styles.triggerPlaceholder)}>
+          <span
+            {...stylex.props(
+              styles.triggerPlaceholder,
+              isDisabled && styles.triggerPlaceholderDisabled,
+            )}>
             {placeholder ?? ''}
           </span>
         )}
@@ -500,18 +554,35 @@ export function MobileTokenizer<T extends SearchableItem>({
                         role="checkbox"
                         aria-checked={isSelected}
                         aria-label={item.label}
-                        disabled={rowDisabled}
-                        onClick={() =>
-                          isSelected ? handleRemove(item) : handleAdd(item)
-                        }
-                        {...stylex.props(styles.row)}>
+                        aria-disabled={rowDisabled || undefined}
+                        onClick={() => {
+                          if (rowDisabled) {
+                            return;
+                          }
+                          if (isSelected) {
+                            handleRemove(item);
+                          } else {
+                            handleAdd(item);
+                          }
+                        }}
+                        {...stylex.props(
+                          styles.row,
+                          rowDisabled && styles.rowDisabled,
+                        )}>
                         <span {...stylex.props(styles.rowLabel)}>
-                          <Text type="body">{item.label}</Text>
+                          <Text
+                            type="body"
+                            color={rowDisabled ? 'inherit' : undefined}>
+                            {item.label}
+                          </Text>
                         </span>
                         <CheckboxIndicator
                           state={isSelected ? 'checked' : 'unchecked'}
                           size="md"
                           isDisabled={rowDisabled}
+                          xstyle={
+                            rowDisabled ? styles.indicatorDisabled : undefined
+                          }
                         />
                       </button>
                     );

package/src/TransferList/TransferListSelector.test.tsx

@@ -461,7 +461,9 @@ describe('TransferListSelector', () => {
     expect(cancel).toBeEnabled();
     expect(fieldset).not.toContainElement(cancel);
     expect(apply).toBeDisabled();
-    expect(screen.getByRole('button', {name: 'Visible fields'})).toBeDisabled();
+    expect(
+      screen.getByRole('button', {name: 'Visible fields'}),
+    ).toHaveAttribute('aria-disabled', 'true');
 
     view.rerender(
       <TransferListSelector