From ed5cd4768086dd6ae672c7a95d6b46a3db17dd6a Mon Sep 17 00:00:00 2001
From: Andrew <andrew@johnson5.net>
Date: Sat, 5 Sep 2026 12:02:01 -0400
Subject: [PATCH 1/6] fix(web): announce composer suggestions to screen readers

---
 .../src/components/ComposerPromptEditor.tsx   | 27 ++++++-
 apps/web/src/components/chat/ChatComposer.tsx | 76 ++++++++++++++++---
 .../chat/ComposerCommandMenu.test.tsx         |  3 +
 .../components/chat/ComposerCommandMenu.tsx   | 15 +++-
 .../chat/composerMenuHighlight.test.ts        | 17 +++++
 5 files changed, 122 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 6b49ef884734..5ca8df8e4813 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -26,6 +26,7 @@ import {
   KEY_ARROW_UP_COMMAND,
   KEY_DOWN_COMMAND,
   KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
   KEY_TAB_COMMAND,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
@@ -918,6 +919,8 @@ interface ComposerPromptEditorProps {
   skills: ReadonlyArray<ServerProviderSkill>;
   disabled: boolean;
   placeholder: string;
+  suggestionListId?: string | undefined;
+  activeSuggestionId?: string | undefined;
   containerClassName?: string;
   className?: string;
   placeholderClassName?: string;
@@ -931,7 +934,7 @@ interface ComposerPromptEditorProps {
   ) => void;
   onVisibleSelectionChange?: () => void;
   onCommandKeyDown?: (
-    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
+    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab" | "Escape",
     event: KeyboardEvent,
   ) => boolean;
   onPageScrollKeyDown?: (key: "PageUp" | "PageDown") => void;
@@ -1004,7 +1007,7 @@ function caretLineRect(range: Range, edge: "start" | "end"): DOMRect | null {
 
 function ComposerCommandKeyPlugin(props: {
   onCommandKeyDown?: (
-    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
+    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab" | "Escape",
     event: KeyboardEvent,
   ) => boolean;
 }) {
@@ -1012,7 +1015,7 @@ function ComposerCommandKeyPlugin(props: {
 
   useEffect(() => {
     const handleCommand = (
-      key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
+      key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab" | "Escape",
       event: KeyboardEvent | null,
     ): boolean => {
       if (!props.onCommandKeyDown || !event) {
@@ -1052,12 +1055,18 @@ function ComposerCommandKeyPlugin(props: {
       (event) => handleCommand("Tab", event),
       COMMAND_PRIORITY_HIGH,
     );
+    const unregisterEscape = editor.registerCommand(
+      KEY_ESCAPE_COMMAND,
+      (event) => handleCommand("Escape", event),
+      COMMAND_PRIORITY_HIGH,
+    );
 
     return () => {
       unregisterArrowDown();
       unregisterArrowUp();
       unregisterEnter();
       unregisterTab();
+      unregisterEscape();
     };
   }, [editor, props]);
 
@@ -1635,6 +1644,8 @@ function ComposerPromptEditorInner({
   skills,
   disabled,
   placeholder,
+  suggestionListId,
+  activeSuggestionId,
   containerClassName,
   className,
   placeholderClassName,
@@ -1983,6 +1994,12 @@ function ComposerPromptEditorInner({
                   className,
                 )}
                 data-testid="composer-editor"
+                ariaLabel="Message"
+                ariaMultiline={true}
+                ariaAutoComplete="list"
+                ariaControls={suggestionListId}
+                ariaActiveDescendant={activeSuggestionId}
+                aria-haspopup="listbox"
                 aria-placeholder={placeholder}
                 placeholder={<span />}
                 onKeyDown={(event) => {
@@ -2065,6 +2082,8 @@ export function ComposerPromptEditor({
   skills,
   disabled,
   placeholder,
+  suggestionListId,
+  activeSuggestionId,
   containerClassName,
   className,
   placeholderClassName,
@@ -2115,6 +2134,8 @@ export function ComposerPromptEditor({
         skills={skills}
         disabled={disabled}
         placeholder={placeholder}
+        suggestionListId={suggestionListId}
+        activeSuggestionId={activeSuggestionId}
         {...(containerClassName ? { containerClassName } : {})}
         onRemoveTerminalContext={onRemoveTerminalContext}
         onChange={onChange}
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 30acb44dd423..b10b9e8c0af3 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -28,6 +28,7 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
@@ -163,7 +164,11 @@ import { measureRestingComposerControls } from "./restingComposerControlsMeasure
 import { observeResponsiveBreakpointFade, usePanelAnimationSettings } from "../../panelAnimations";
 import { type ComposerPromptEditorHandle, ComposerPromptEditor } from "../ComposerPromptEditor";
 import { ProviderModelPicker } from "./ProviderModelPicker";
-import { type ComposerCommandItem, ComposerCommandMenu } from "./ComposerCommandMenu";
+import {
+  type ComposerCommandItem,
+  ComposerCommandMenu,
+  composerSuggestionOptionId,
+} from "./ComposerCommandMenu";
 import { ComposerPendingApprovalActions } from "./ComposerPendingApprovalActions";
 import { CompactComposerControlsMenu } from "./CompactComposerControlsMenu";
 import { ComposerPrimaryActions } from "./ComposerPrimaryActions";
@@ -1792,6 +1797,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     detectComposerTrigger(prompt, prompt.length),
   );
   const [composerHighlightedItemId, setComposerHighlightedItemId] = useState<string | null>(null);
+  const composerSuggestionId = useId();
+  const composerSuggestionListId = `${composerSuggestionId}-${encodeURIComponent(draftId ?? activeThreadId ?? "new")}-suggestions`;
+  const dismissedComposerSnapshotRef = useRef<{ value: string; expandedCursor: number } | null>(
+    null,
+  );
   // Active ArrowUp recall. Cleared on edit and on thread switch.
   const promptHistoryPositionRef = useRef<ComposerPromptHistoryPosition | null>(null);
   const [composerHighlightedSearchKey, setComposerHighlightedSearchKey] = useState<string | null>(
@@ -2015,7 +2025,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
 
   const composerMenuOpen = Boolean(composerTrigger);
   const composerMenuSearchKey = composerTrigger
-    ? `${composerTrigger.kind}:${composerTrigger.query.trim().toLowerCase()}`
+    ? `${composerSuggestionListId}:${composerTrigger.kind}:${composerTrigger.query.trim().toLowerCase()}`
     : null;
   const activeComposerMenuItem = useMemo(() => {
     const activeItemId = resolveComposerMenuActiveItemId({
@@ -2042,6 +2052,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   );
 
   const isComposerApprovalState = activePendingApproval !== null;
+  const composerSuggestionsVisible = composerMenuOpen && !isComposerApprovalState;
+  const composerSuggestionListVisible = composerSuggestionsVisible && composerMenuItems.length > 0;
   const activePendingUserInput = pendingUserInputs[0] ?? null;
   const isChoiceOnlyPendingQuestion =
     activePendingProgress?.activeQuestion?.allowCustomAnswer === false;
@@ -2363,7 +2375,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // Reset compositor state on thread/draft change
   // ------------------------------------------------------------------
   useEffect(() => {
+    dismissedComposerSnapshotRef.current = null;
     setComposerHighlightedItemId(null);
+    setComposerHighlightedSearchKey(null);
     setComposerSubmissionError(null);
     setProviderInputSubmissionError(null);
     setComposerCursor(collapseExpandedComposerCursor(promptRef.current, promptRef.current.length));
@@ -2532,12 +2546,18 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       terminalContextIds: string[],
     ) => {
       expandComposerForEditorChange();
+      const dismissed = dismissedComposerSnapshotRef.current;
+      const isDismissed =
+        dismissed?.value === nextPrompt && dismissed.expandedCursor === expandedCursor;
+      if (!isDismissed) dismissedComposerSnapshotRef.current = null;
+      const nextTrigger =
+        cursorAdjacentToMention || isDismissed
+          ? null
+          : detectComposerTrigger(nextPrompt, expandedCursor);
       if (activePendingProgress?.activeQuestion && pendingUserInputs.length > 0) {
         if (activePendingProgress.activeQuestion.allowCustomAnswer === false) return;
         setComposerCursor(nextCursor);
-        setComposerTrigger(
-          cursorAdjacentToMention ? null : detectComposerTrigger(nextPrompt, expandedCursor),
-        );
+        setComposerTrigger(nextTrigger);
         onChangeActivePendingUserInputCustomAnswer(
           activePendingProgress.activeQuestion.id,
           nextPrompt,
@@ -2562,9 +2582,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         );
       }
       setComposerCursor(nextCursor);
-      setComposerTrigger(
-        cursorAdjacentToMention ? null : detectComposerTrigger(nextPrompt, expandedCursor),
-      );
+      setComposerTrigger(nextTrigger);
     },
     [
       activePendingProgress?.activeQuestion,
@@ -2678,9 +2696,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     trigger: ComposerTrigger | null;
   } => {
     const snapshot = readComposerSnapshot();
+    const dismissed = dismissedComposerSnapshotRef.current;
     return {
       snapshot,
-      trigger: detectComposerTrigger(snapshot.value, snapshot.expandedCursor),
+      trigger:
+        dismissed?.value === snapshot.value && dismissed.expandedCursor === snapshot.expandedCursor
+          ? null
+          : detectComposerTrigger(snapshot.value, snapshot.expandedCursor),
     };
   }, [readComposerSnapshot]);
 
@@ -3059,7 +3081,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // Callbacks: command key
   // ------------------------------------------------------------------
   const onComposerCommandKey = (
-    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
+    key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab" | "Escape",
     event: KeyboardEvent,
   ) => {
     if (key === "Tab" && event.shiftKey) {
@@ -3067,8 +3089,17 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       toggleInteractionMode();
       return true;
     }
-    const { trigger } = resolveActiveComposerTrigger();
+    const { trigger, snapshot } = resolveActiveComposerTrigger();
     const menuIsActive = composerMenuOpenRef.current || trigger !== null;
+    if (key === "Escape") {
+      if (!menuIsActive || event.isComposing) return false;
+      dismissedComposerSnapshotRef.current = snapshot;
+      composerMenuOpenRef.current = false;
+      setComposerTrigger(null);
+      setComposerHighlightedItemId(null);
+      setComposerHighlightedSearchKey(null);
+      return true;
+    }
     if (menuIsActive) {
       const currentItems = composerMenuItemsRef.current;
       const selectedItem = activeComposerMenuItemRef.current ?? currentItems[0];
@@ -5098,9 +5129,19 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 </ComposerCommandMenuLayer>
               )}
 
-              {composerMenuOpen && !isComposerApprovalState && (
+              <div role="status" aria-atomic="true" className="sr-only">
+                {composerSuggestionsVisible
+                  ? isComposerMenuLoading
+                    ? "Searching workspace files..."
+                    : composerMenuItems.length === 0
+                      ? composerMenuEmptyState
+                      : ""
+                  : ""}
+              </div>
+              {composerSuggestionsVisible && (
                 <ComposerCommandMenuLayer anchor={composerMenuAnchor}>
                   <ComposerCommandMenu
+                    listId={composerSuggestionListId}
                     items={composerMenuItems}
                     resolvedTheme={resolvedTheme}
                     isLoading={isComposerMenuLoading}
@@ -5446,6 +5487,17 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 )}
               >
                 <ComposerPromptEditor
+                  suggestionListId={
+                    composerSuggestionListVisible ? composerSuggestionListId : undefined
+                  }
+                  activeSuggestionId={
+                    composerSuggestionListVisible && activeComposerMenuItem
+                      ? composerSuggestionOptionId(
+                          composerSuggestionListId,
+                          activeComposerMenuItem.id,
+                        )
+                      : undefined
+                  }
                   editorRef={composerEditorRef}
                   value={
                     isComposerApprovalState
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
index 7a59d9054631..e087b0e9f4fc 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
@@ -8,6 +8,7 @@ describe("ComposerCommandMenu", () => {
   it("renders slash commands with their descriptions", () => {
     const markup = renderToStaticMarkup(
       <ComposerCommandMenu
+        listId="test-suggestions"
         items={[
           {
             id: "slash:model",
@@ -33,6 +34,7 @@ describe("ComposerCommandMenu", () => {
   it("shows the app source for an app skill", () => {
     const markup = renderToStaticMarkup(
       <ComposerCommandMenu
+        listId="test-suggestions"
         items={[
           {
             id: "skill:codex:browser",
@@ -67,6 +69,7 @@ describe("ComposerCommandMenu", () => {
   it("shows the repo source for a slash skill", () => {
     const markup = renderToStaticMarkup(
       <ComposerCommandMenu
+        listId="test-suggestions"
         items={[
           {
             id: "skill:codex:ask-matt",
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 8e940969e72d..a6c5bf6cb4eb 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -60,6 +60,7 @@ export type ComposerCommandItem =
     };
 
 export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
+  listId: string;
   items: ComposerCommandItem[];
   resolvedTheme: "light" | "dark";
   isLoading: boolean;
@@ -95,11 +96,16 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
         data-composer-command-drawer="true"
       >
         {props.items.length > 0 ? (
-          <CommandList className="max-h-72 min-h-0 scroll-pb-6">
+          <CommandList
+            id={props.listId}
+            aria-label="Composer suggestions"
+            className="max-h-72 min-h-0 scroll-pb-6"
+          >
             <CommandGroup>
               {props.items.map((item) => (
                 <ComposerCommandMenuItem
                   key={item.id}
+                  optionId={composerSuggestionOptionId(props.listId, item.id)}
                   item={item}
                   triggerKind={props.triggerKind}
                   resolvedTheme={props.resolvedTheme}
@@ -132,6 +138,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
 });
 
 const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
+  optionId: string;
   item: ComposerCommandItem;
   triggerKind: ComposerTriggerKind | null;
   resolvedTheme: "light" | "dark";
@@ -146,6 +153,8 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
 
   return (
     <CommandItem
+      render={<div id={props.optionId} />}
+      aria-selected={props.isActive}
       value={props.item.id}
       data-composer-item-id={props.item.id}
       className={cn(
@@ -194,6 +203,10 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   );
 });
 
+export function composerSuggestionOptionId(listId: string, itemId: string): string {
+  return `${listId}-${encodeURIComponent(itemId)}`;
+}
+
 const SKILL_SOURCE_ICON_BY_KIND: Record<ProviderSkillSourceKind, LucideIcon> = {
   app: BlocksIcon,
   repo: FolderIcon,
diff --git a/apps/web/src/components/chat/composerMenuHighlight.test.ts b/apps/web/src/components/chat/composerMenuHighlight.test.ts
index 549ad6bb09e8..74768d906878 100644
--- a/apps/web/src/components/chat/composerMenuHighlight.test.ts
+++ b/apps/web/src/components/chat/composerMenuHighlight.test.ts
@@ -48,4 +48,21 @@ describe("resolveComposerMenuActiveItemId", () => {
       }),
     ).toBe("top");
   });
+
+  it("clears the active result while async results are empty and resolves against restored results", () => {
+    const search = {
+      highlightedItemId: "second",
+      currentSearchKey: "path:src",
+      highlightedSearchKey: "path:src",
+    };
+    const cleared = resolveComposerMenuActiveItemId({ ...search, items: [] });
+    expect(cleared).toBeNull();
+    expect(
+      resolveComposerMenuActiveItemId({
+        ...search,
+        highlightedItemId: cleared,
+        items: [{ id: "new-result" }, { id: "second" }],
+      }),
+    ).toBe("new-result");
+  });
 });

From 5ddfc53642e9e1b452aeccbea6bff49f5e1e449f Mon Sep 17 00:00:00 2001
From: Andrew <andrew@johnson5.net>
Date: Sat, 5 Sep 2026 12:10:13 -0400
Subject: [PATCH 2/6] fix(web): identify skill chips to screen readers

---
 apps/web/src/components/ComposerPromptEditor.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 5ca8df8e4813..fc09b53eb922 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -272,6 +272,8 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
       contentEditable={false}
       spellCheck={false}
       data-composer-skill-chip="true"
+      role="img"
+      aria-label={`Skill: ${props.skillLabel}`}
     >
       <span
         aria-hidden="true"

From 17d6954481722769776afd9dfee0c87a050cb2bf Mon Sep 17 00:00:00 2001
From: "Khai Shern, Toh" <khaishern8235@gmail.com>
Date: Tue, 15 Sep 2026 07:03:59 +0800
Subject: [PATCH 3/6] fix(web): label composer suggestion lists by trigger

A single "Composer suggestions" name tells a screen reader user that a list
opened but not which one. Naming it by trigger ("Files and folders",
"Commands", "Skills", "Pull requests") says what the options are before
any row is read.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/chat/ComposerCommandMenu.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 6df5ca6806d2..b127e5148862 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -107,7 +107,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
         {props.items.length > 0 ? (
           <CommandList
             id={props.listId}
-            aria-label="Composer suggestions"
+            aria-label={props.triggerKind ? LISTBOX_LABEL_BY_TRIGGER[props.triggerKind] : undefined}
             className="max-h-72 min-h-0 scroll-pb-6"
           >
             <CommandGroup>
@@ -227,6 +227,13 @@ export function composerSuggestionOptionId(listId: string, itemId: string): stri
   return `${listId}-${encodeURIComponent(itemId)}`;
 }
 
+const LISTBOX_LABEL_BY_TRIGGER: Record<ComposerTriggerKind, string> = {
+  path: "Files and folders",
+  "pull-request": "Pull requests",
+  "slash-command": "Commands",
+  skill: "Skills",
+};
+
 const SKILL_SOURCE_ICON_BY_KIND: Record<ProviderSkillSourceKind, LucideIcon> = {
   app: BlocksIcon,
   repo: FolderIcon,

From fee7a7d666d22680976472405be133436cc51b4a Mon Sep 17 00:00:00 2001
From: "Khai Shern, Toh" <khaishern8235@gmail.com>
Date: Tue, 15 Sep 2026 07:08:26 +0800
Subject: [PATCH 4/6] fix(web): keep suggestion ARIA off editors without menus

ComposerPromptEditor is also the Settings font preview, which has no
trigger menus. Hardcoding the "Message" label, aria-autocomplete and
aria-haspopup on the editor made that preview announce as a chat field
with autocomplete. The chat composer now opts in by passing the label and
its listbox id; the font preview passes neither and reads as a plain
multiline field.

aria-controls follows the active option rather than list visibility, which
is the same moment in practice but keeps the reference from ever pointing
at a listbox with no highlighted row.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/components/ComposerPromptEditor.tsx   | 19 +++++++++++++++----
 apps/web/src/components/chat/ChatComposer.tsx |  5 ++---
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 08d7576636ec..4bb0a1de9c97 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -872,6 +872,14 @@ interface ComposerPromptEditorProps {
   skills: ReadonlyArray<ServerProviderSkill>;
   disabled: boolean;
   placeholder: string;
+  ariaLabel?: string | undefined;
+  /**
+   * Suggestion-menu wiring for screen readers. `suggestionListId` marks an
+   * editor that can open a suggestion list at all, so editors without menus
+   * (the Settings font preview) are not announced as having autocomplete.
+   * `activeSuggestionId` is the highlighted option while that list is
+   * rendered; it drives aria-activedescendant and aria-controls.
+   */
   suggestionListId?: string | undefined;
   activeSuggestionId?: string | undefined;
   containerClassName?: string;
@@ -1635,6 +1643,7 @@ function ComposerPromptEditorInner({
   skills,
   disabled,
   placeholder,
+  ariaLabel,
   suggestionListId,
   activeSuggestionId,
   containerClassName,
@@ -1995,12 +2004,12 @@ function ComposerPromptEditorInner({
                   className,
                 )}
                 data-testid="composer-editor"
-                ariaLabel="Message"
+                ariaLabel={ariaLabel}
                 ariaMultiline={true}
-                ariaAutoComplete="list"
-                ariaControls={suggestionListId}
+                ariaAutoComplete={suggestionListId ? "list" : undefined}
+                ariaControls={activeSuggestionId ? suggestionListId : undefined}
                 ariaActiveDescendant={activeSuggestionId}
-                aria-haspopup="listbox"
+                aria-haspopup={suggestionListId ? "listbox" : undefined}
                 aria-placeholder={placeholder}
                 placeholder={<span />}
                 onKeyDown={(event) => {
@@ -2088,6 +2097,7 @@ export function ComposerPromptEditor({
   skills,
   disabled,
   placeholder,
+  ariaLabel,
   suggestionListId,
   activeSuggestionId,
   containerClassName,
@@ -2137,6 +2147,7 @@ export function ComposerPromptEditor({
           skills={skills}
           disabled={disabled}
           placeholder={placeholder}
+          ariaLabel={ariaLabel}
           suggestionListId={suggestionListId}
           activeSuggestionId={activeSuggestionId}
           {...(containerClassName ? { containerClassName } : {})}
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 41ca47ba6955..ca5de4f7e400 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -6698,9 +6698,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 ) : null}
                 <ComposerContextActionsContext value={composerContextActions}>
                   <ComposerPromptEditor
-                    suggestionListId={
-                      composerSuggestionListVisible ? composerSuggestionListId : undefined
-                    }
+                    ariaLabel="Message"
+                    suggestionListId={composerSuggestionListId}
                     activeSuggestionId={
                       composerSuggestionListVisible && activeComposerMenuItem
                         ? composerSuggestionOptionId(

From a8228ef2132bdaa6728691f5f4de4d26c317aecf Mon Sep 17 00:00:00 2001
From: Andrew <andrew@johnson5.net>
Date: Fri, 18 Sep 2026 10:40:24 -0700
Subject: [PATCH 5/6] fix(web): encode suggestion IDs without rejecting lone
 surrogates

---
 .../chat/ComposerCommandMenu.test.tsx         | 26 ++++++++++++++++++-
 .../components/chat/ComposerCommandMenu.tsx   |  3 ++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
index e087b0e9f4fc..d26510ce0aef 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.test.tsx
@@ -2,7 +2,31 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { ProviderDriverKind } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
 
-import { ComposerCommandMenu } from "./ComposerCommandMenu";
+import { ComposerCommandMenu, composerSuggestionOptionId } from "./ComposerCommandMenu";
+
+describe("composerSuggestionOptionId", () => {
+  it("keeps whitespace, escape-like paths, and malformed UTF-16 distinct", () => {
+    const paths = [
+      "docs/my file.md",
+      "docs/my_file.md",
+      "docs/my%20file.md",
+      "docs/my\tfile.md",
+      "docs/\ud800.md",
+      "docs/\ud801.md",
+      "docs/\udc00.md",
+      "docs/\ufffd.md",
+      "docs/\\ud800.md",
+      "docs/\ud83d\ude80.md",
+    ];
+    const ids = paths.map((path) => composerSuggestionOptionId("suggestions", `path:file:${path}`));
+
+    expect(new Set(ids).size).toBe(paths.length);
+    for (const id of ids) expect(id).not.toMatch(/\s|[\ud800-\udfff]/u);
+    expect(composerSuggestionOptionId("other-composer", paths[0]!)).not.toBe(
+      composerSuggestionOptionId("suggestions", paths[0]!),
+    );
+  });
+});
 
 describe("ComposerCommandMenu", () => {
   it("renders slash commands with their descriptions", () => {
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index b127e5148862..1f2af6f1ba68 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -224,7 +224,8 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
 });
 
 export function composerSuggestionOptionId(listId: string, itemId: string): string {
-  return `${listId}-${encodeURIComponent(itemId)}`;
+  // JSON escapes lone UTF-16 surrogates before URI encoding without losing identity.
+  return `${listId}-${encodeURIComponent(JSON.stringify(itemId))}`;
 }
 
 const LISTBOX_LABEL_BY_TRIGGER: Record<ComposerTriggerKind, string> = {

From 12de523861836d339b3e91f06d0f72ea44e25222 Mon Sep 17 00:00:00 2001
From: Andrew <andrew@johnson5.net>
Date: Sat, 26 Sep 2026 05:53:24 -0400
Subject: [PATCH 6/6] fix(web): announce suggestion loading only when the list
 is empty

The status region said "Searching workspace files..." after every pause in
typing, even while earlier results stayed visible and an option remained
active. It now speaks only when the visible menu shows loading or empty text.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/chat/ChatComposer.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index b17f1402a658..f0383dbaf17b 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -6465,14 +6465,12 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
               )}
 
               <div role="status" aria-atomic="true" className="sr-only">
-                {composerSuggestionsVisible
+                {composerSuggestionsVisible && composerMenuItems.length === 0
                   ? isComposerMenuLoading
                     ? composerTriggerKind === "pull-request"
                       ? "Finding pull request..."
                       : "Searching workspace files..."
-                    : composerMenuItems.length === 0
-                      ? composerMenuEmptyState
-                      : ""
+                    : composerMenuEmptyState
                   : ""}
               </div>
               {composerSuggestionsVisible && (