From 687f8f9a6d899e79e882a2fab020e1023e4a34fb Mon Sep 17 00:00:00 2001
From: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Date: Fri, 16 Oct 2026 17:49:58 +1100
Subject: [PATCH] Keep turn status disclosures reachable and activity
 announcements quiet

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

diff --git a/content/solid/turn-status.mdx b/content/solid/turn-status.mdx
index 9ab79a2..4724a10 100644
--- a/content/solid/turn-status.mdx
+++ b/content/solid/turn-status.mdx
@@ -40,6 +40,10 @@ 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 or blank, 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 944cffa..9d411c5 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 = (
     <>
@@ -81,11 +84,13 @@ function TurnStatus({
 
   return (
     <div data-slot="turn-status" className={cn("flex flex-col gap-1.5", className)}>
+      {/* Announce activity changes without repeating the clock and count. */}
+      <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"
-            role="status"
+            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"
@@ -94,7 +99,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>
         )}