From 45e06f48a03354b600782259010ae6222241aff0 Mon Sep 17 00:00:00 2001
From: "Khai Shern, Toh" <55418374+Leos-Khai@users.noreply.github.com>
Date: Mon, 21 Sep 2026 05:46:08 +0800
Subject: [PATCH] fix: composer hero reads project name to screen readers
 (#12397)

---
 .../features/threads/NewTaskDraftScreen.tsx   |  2 +-
 .../src/components/chat/DraftHeroHeadline.tsx | 24 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx b/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
index 9732ed6865f54e6d459f76ba6d255eafa6f7d45a..681f6c5ee52d16ce253a59e34371ab247747bc73 100644
--- a/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
+++ b/apps/mobile/src/features/threads/NewTaskDraftScreen.tsx
@@ -1455,7 +1455,7 @@ export function NewTaskDraftScreen(props: {
           <Text className="text-2xl font-t3-medium tracking-tight text-foreground">in </Text>
           <Pressable
             accessibilityHint="Opens the project picker"
-            accessibilityLabel={`Change project from ${selectedProject.title}`}
+            accessibilityLabel={selectedProject.title}
             accessibilityRole="button"
             disabled={isComposerInteractionLocked}
             onPress={chooseProject}
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 07956c2b299e6fa3f18c4cc8e24c79b41e4fbfb8..d542cd6a8a9f28aae60094046d25a5d56e589340 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -136,10 +136,11 @@ export function DraftHeroHeadline({
       <Tooltip>
         <TooltipTrigger
           render={
-            <MenuTrigger
-              aria-label={hasResolvedProject ? "Change project" : "Choose a project"}
-              className="pointer-events-auto inline-block max-w-64 truncate border-foreground/60 border-b border-dotted align-baseline text-foreground transition-colors hover:border-foreground/80 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
-            />
+            // The trigger's accessible name comes from its visible text (the
+            // project title) so the hero sentence reads naturally: an
+            // aria-label here would replace the title with an action phrase
+            // mid-sentence and baffle screen-reader users.
+            <MenuTrigger className="pointer-events-auto inline-block max-w-64 truncate border-foreground/60 border-b border-dotted align-baseline text-foreground transition-colors hover:border-foreground/80 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring" />
           }
         >
           {activeProjectDisplayName ?? "Choose a project"}
@@ -233,8 +234,21 @@ export function DraftHeroHeadline({
     </button>
   );
 
+  // The composer hero is a sentence, so the heading's accessible name must be
+  // a complete sentence too. The project picker is a control rendered inline
+  // in the h1; without an explicit label its widget state bleeds into the
+  // announced phrase.
+  const headingLabel = hasResolvedProject
+    ? `What should we build in ${activeProjectDisplayName}?`
+    : canChooseProject
+      ? `${activeProjectDisplayName ?? "Choose a project"} to start`
+      : "Add a project to start";
+
   return (
-    <h1 className="mx-auto w-full max-w-5xl text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl">
+    <h1
+      aria-label={headingLabel}
+      className="mx-auto w-full max-w-5xl text-center font-normal text-2xl text-foreground tracking-tight sm:text-3xl"
+    >
       {hasResolvedProject ? (
         <>What should we build in {projectSelector}?</>
       ) : canChooseProject ? (
-- 
2.54.0