From b77c89a6a6cf4b4d17b151d693d56d58a67360a0 Mon Sep 17 00:00:00 2001
From: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Date: Thu, 15 Oct 2026 18:42:44 +1100
Subject: [PATCH 1/3] Preserve accessible input names and expandable status
 button semantics

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
---
 content/solid/composer.mdx        | 13 ++++++++++++-
 content/solid/turn-status.mdx     |  2 ++
 src/components/ui/composer.tsx    |  4 ++++
 src/components/ui/turn-status.tsx |  6 ++++--
 src/examples/composer-demo.tsx    |  1 +
 src/examples/composer-running.tsx |  1 +
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/content/solid/composer.mdx b/content/solid/composer.mdx
index 879f51a..86ea7fe 100644
--- a/content/solid/composer.mdx
+++ b/content/solid/composer.mdx
@@ -31,9 +31,19 @@ import { Composer } from "@/components/ui/composer"
 ```tsx
 const [text, setText] = React.useState("")
 
-<Composer value={text} onValueChange={setText} onSubmit={send} />
+<Composer
+  value={text}
+  onValueChange={setText}
+  onSubmit={send}
+  textareaProps={{ "aria-label": "Message" }}
+/>
 ```
 
+`textareaProps` names and describes the input itself. It accepts `id`, `aria-label`,
+`aria-labelledby`, and `aria-describedby`; use its `id` with an external label's
+`htmlFor`. Other HTML attributes, including a top-level `id` or `aria-label`,
+continue to apply to the outer wrapper.
+
 ## While a turn runs
 
 The send mark has no block behind it in any state: its brightness says what it will do. With `running`, it is the quiet square that stops the turn, until something is typed, which is then sent behind it.
@@ -52,6 +62,7 @@ The send mark has no block behind it in any state: its brightness says what it w
 | `onValueChange` | `(value: string) => void` | - |
 | `onSubmit` | `(value: string) => void` | - |
 | `onStop` | `() => void` | - |
+| `textareaProps` | `Pick<ComponentProps<"textarea">, "id" \| "aria-label" \| "aria-labelledby" \| "aria-describedby">` | - |
 | `running` | `boolean` | `false` |
 | `leading` | `ReactNode` | - |
 | `tags` | `ReactNode` | - |
diff --git a/content/solid/turn-status.mdx b/content/solid/turn-status.mdx
index 9ab79a2..0078af8 100644
--- a/content/solid/turn-status.mdx
+++ b/content/solid/turn-status.mdx
@@ -40,6 +40,8 @@ import { TurnStatus } from "@/components/ui/turn-status"
 ## With steps
 
 Given children, the line is a button and opens to show them: the calls of the step in hand.
+The activity label is announced by a separate status region, so the button keeps
+its native role and updates to the clock and token count do not repeat the announcement.
 
 <ComponentPreview name="turn-status-steps" align="start" />
 
diff --git a/src/components/ui/composer.tsx b/src/components/ui/composer.tsx
index 697e3ca..57f4241 100644
--- a/src/components/ui/composer.tsx
+++ b/src/components/ui/composer.tsx
@@ -32,6 +32,7 @@ function Composer({
   onStop,
   running = false,
   placeholder,
+  textareaProps,
   leading,
   tags,
   above,
@@ -48,6 +49,8 @@ function Composer({
   onStop?: () => void
   running?: boolean
   placeholder?: string
+  /** Names and describes the input; other HTML attributes belong to the wrapper. */
+  textareaProps?: Pick<React.ComponentProps<"textarea">, "id" | "aria-label" | "aria-labelledby" | "aria-describedby">
   leading?: React.ReactNode
   tags?: React.ReactNode
   /** Stands above the line of text: pictures going with the message. */
@@ -101,6 +104,7 @@ function Composer({
             mark is never left on a line of its own. */}
         <div className={cn("flex min-w-48 flex-1 items-end gap-1", Boolean(tags) && "ml-1.5", !leading && !tags && "pl-1.5")}>
           <textarea
+            {...textareaProps}
             ref={textarea}
             rows={1}
             value={value}
diff --git a/src/components/ui/turn-status.tsx b/src/components/ui/turn-status.tsx
index 944cffa..b253027 100644
--- a/src/components/ui/turn-status.tsx
+++ b/src/components/ui/turn-status.tsx
@@ -81,11 +81,13 @@ function TurnStatus({
 
   return (
     <div data-slot="turn-status" className={cn("flex flex-col gap-1.5", className)}>
+      {/* Announce the activity separately: the line can be a button, and its
+          clock and animated count should not keep repeating the status. */}
+      <span role="status" className="sr-only">{label}</span>
       <div className="flex h-5 max-w-full items-center gap-1.5">
         {opens ? (
           <button
             type="button"
-            role="status"
             aria-expanded={open}
             onClick={() => setOpen((value) => !value)}
             className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:text-foreground"
@@ -94,7 +96,7 @@ function TurnStatus({
             <ChevronRight className={cn("size-3.5 shrink-0 transition-transform", open && "rotate-90")} />
           </button>
         ) : (
-          <div role="status" className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground">
+          <div className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground">
             {line}
           </div>
         )}
diff --git a/src/examples/composer-demo.tsx b/src/examples/composer-demo.tsx
index 34f337b..0ac2df4 100644
--- a/src/examples/composer-demo.tsx
+++ b/src/examples/composer-demo.tsx
@@ -35,6 +35,7 @@ export default function ComposerDemo() {
   return (
     <div className="w-full max-w-lg">
       <Composer
+        textareaProps={{ "aria-label": "Message" }}
         value={text}
         onValueChange={(value) => {
           setText(value)
diff --git a/src/examples/composer-running.tsx b/src/examples/composer-running.tsx
index bc8f241..f2808ac 100644
--- a/src/examples/composer-running.tsx
+++ b/src/examples/composer-running.tsx
@@ -8,6 +8,7 @@ export default function ComposerRunning() {
   const [text, setText] = React.useState("")
   return (
     <Composer
+      textareaProps={{ "aria-label": "Next message" }}
       className="w-full max-w-lg"
       value={text}
       onValueChange={setText}

From 238cb7016d818eb63bef9b126b347680a6ab1d99 Mon Sep 17 00:00:00 2001
From: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Date: Thu, 15 Oct 2026 19:02:29 +1100
Subject: [PATCH 2/3] Keep every turn status and message input named for
 assistive technology

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
---
 content/solid/turn-status.mdx     | 2 ++
 src/blocks/agent-workspace.tsx    | 1 +
 src/components/ui/turn-status.tsx | 6 +++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/content/solid/turn-status.mdx b/content/solid/turn-status.mdx
index 0078af8..12ede8f 100644
--- a/content/solid/turn-status.mdx
+++ b/content/solid/turn-status.mdx
@@ -42,6 +42,8 @@ import { TurnStatus } from "@/components/ui/turn-status"
 Given children, the line is a button and opens to show them: the calls of the step in hand.
 The activity label is announced by a separate status region, so the button keeps
 its native role and updates to the clock and token count do not repeat the announcement.
+When `label` is omitted, the activity name supplies the announcement and button
+name without adding visible text. Pass `label` to customize or translate it.
 
 <ComponentPreview name="turn-status-steps" align="start" />
 
diff --git a/src/blocks/agent-workspace.tsx b/src/blocks/agent-workspace.tsx
index 00da0d1..3466cee 100644
--- a/src/blocks/agent-workspace.tsx
+++ b/src/blocks/agent-workspace.tsx
@@ -564,6 +564,7 @@ export default function AgentWorkspace() {
         <div className="flex shrink-0 justify-center px-4 pb-4 md:px-6">
           <div className="w-full max-w-[600px]">
             <Composer
+              textareaProps={{ "aria-label": "Message" }}
               value={value}
               onValueChange={setValue}
               onSubmit={send}
diff --git a/src/components/ui/turn-status.tsx b/src/components/ui/turn-status.tsx
index b253027..b1e21d5 100644
--- a/src/components/ui/turn-status.tsx
+++ b/src/components/ui/turn-status.tsx
@@ -61,6 +61,9 @@ function TurnStatus({
   const [open, setOpen] = React.useState(false)
   const elapsed = useElapsed(since)
   const opens = Boolean(children)
+  // The glyph is decorative. Even without visible words, expose the activity
+  // and keep the disclosure's name independent of the clock and token count.
+  const activityLabel = label?.trim() || activity
 
   const line = (
     <>
@@ -83,11 +86,12 @@ function TurnStatus({
     <div data-slot="turn-status" className={cn("flex flex-col gap-1.5", className)}>
       {/* Announce the activity separately: the line can be a button, and its
           clock and animated count should not keep repeating the status. */}
-      <span role="status" className="sr-only">{label}</span>
+      <span role="status" className="sr-only">{activityLabel}</span>
       <div className="flex h-5 max-w-full items-center gap-1.5">
         {opens ? (
           <button
             type="button"
+            aria-label={activityLabel}
             aria-expanded={open}
             onClick={() => setOpen((value) => !value)}
             className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:text-foreground"

From e63779ceb0c63803d6ae406f17c00a42466c4bfd Mon Sep 17 00:00:00 2001
From: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Date: Thu, 15 Oct 2026 19:15:52 +1100
Subject: [PATCH 3/3] Keep the Composer labeling change independent of the
 client entrypoint split

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
---
 content/solid/turn-status.mdx     |  4 ----
 src/components/ui/turn-status.tsx | 10 ++--------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/content/solid/turn-status.mdx b/content/solid/turn-status.mdx
index 12ede8f..9ab79a2 100644
--- a/content/solid/turn-status.mdx
+++ b/content/solid/turn-status.mdx
@@ -40,10 +40,6 @@ import { TurnStatus } from "@/components/ui/turn-status"
 ## With steps
 
 Given children, the line is a button and opens to show them: the calls of the step in hand.
-The activity label is announced by a separate status region, so the button keeps
-its native role and updates to the clock and token count do not repeat the announcement.
-When `label` is omitted, the activity name supplies the announcement and button
-name without adding visible text. Pass `label` to customize or translate it.
 
 <ComponentPreview name="turn-status-steps" align="start" />
 
diff --git a/src/components/ui/turn-status.tsx b/src/components/ui/turn-status.tsx
index b1e21d5..944cffa 100644
--- a/src/components/ui/turn-status.tsx
+++ b/src/components/ui/turn-status.tsx
@@ -61,9 +61,6 @@ function TurnStatus({
   const [open, setOpen] = React.useState(false)
   const elapsed = useElapsed(since)
   const opens = Boolean(children)
-  // The glyph is decorative. Even without visible words, expose the activity
-  // and keep the disclosure's name independent of the clock and token count.
-  const activityLabel = label?.trim() || activity
 
   const line = (
     <>
@@ -84,14 +81,11 @@ function TurnStatus({
 
   return (
     <div data-slot="turn-status" className={cn("flex flex-col gap-1.5", className)}>
-      {/* Announce the activity separately: the line can be a button, and its
-          clock and animated count should not keep repeating the status. */}
-      <span role="status" className="sr-only">{activityLabel}</span>
       <div className="flex h-5 max-w-full items-center gap-1.5">
         {opens ? (
           <button
             type="button"
-            aria-label={activityLabel}
+            role="status"
             aria-expanded={open}
             onClick={() => setOpen((value) => !value)}
             className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:text-foreground"
@@ -100,7 +94,7 @@ function TurnStatus({
             <ChevronRight className={cn("size-3.5 shrink-0 transition-transform", open && "rotate-90")} />
           </button>
         ) : (
-          <div className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground">
+          <div role="status" className="flex w-fit max-w-full items-center gap-2 text-[12.5px] text-muted-foreground">
             {line}
           </div>
         )}