@@ -893,9 +893,11 @@ interface ComposerPromptEditorProps {
   onPaste: React.ClipboardEventHandler<HTMLElement>;
   editorRef: React.RefObject<ComposerPromptEditorHandle | null>;
   /**
-   * Listbox of the open trigger menu and its highlighted option. Wiring them
-   * into aria-controls / aria-activedescendant lets screen readers follow the
-   * menu while focus never leaves the editor.
+   * Trigger-menu wiring for screen readers. `menuListboxId` is the listbox the
+   * menus render into and, when present, advertises list autocomplete.
+   * `menuActiveOptionId` is the highlighted option while that listbox is
+   * rendered; it drives aria-activedescendant so the reader follows the menu
+   * without focus ever leaving the editor.
    */
   menuListboxId?: string | undefined;
   menuActiveOptionId?: string | undefined;
@@ -1994,8 +1996,8 @@ function ComposerPromptEditorInner({
                 )}
                 data-testid="composer-editor"
                 aria-placeholder={placeholder}
-                ariaAutoComplete="list"
-                ariaControls={menuListboxId}
+                ariaAutoComplete={menuListboxId ? "list" : undefined}
+                ariaControls={menuActiveOptionId ? menuListboxId : undefined}
                 ariaActiveDescendant={menuActiveOptionId}
                 placeholder={<span />}
                 onKeyDown={(event) => {
 
@@ -2467,13 +2467,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
 
   const isComposerApprovalState = activePendingApproval !== null;
 
-  // The editor only references the listbox while it is actually rendered, so
-  // aria-controls and aria-activedescendant never point at missing nodes.
+  // The editor only references an option while the listbox is actually
+  // rendered, so aria-activedescendant never points at a missing node.
   const composerMenuListboxId = useId();
-  const composerMenuListboxRendered =
-    composerMenuOpen && !isComposerApprovalState && composerMenuItems.length > 0;
   const composerMenuActiveOptionDomId =
-    composerMenuListboxRendered && activeComposerMenuItem
+    composerMenuOpen &&
+    !isComposerApprovalState &&
+    composerMenuItems.length > 0 &&
+    activeComposerMenuItem
       ? composerCommandOptionDomId(composerMenuListboxId, activeComposerMenuItem.id)
       : undefined;
 
@@ -6655,7 +6656,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     onChange={onPromptChange}
                     onVisibleSelectionChange={expandComposerForEditorChange}
                     onCommandKeyDown={onComposerCommandKey}
-                    menuListboxId={composerMenuListboxRendered ? composerMenuListboxId : undefined}
+                    menuListboxId={composerMenuListboxId}
                     menuActiveOptionId={composerMenuActiveOptionDomId}
                     onPageScrollKeyDown={onPageScrollKeyDown}
                     onPageScrollKeyUp={onPageScrollKeyUp}
 
@@ -2,7 +2,19 @@ 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, composerCommandOptionDomId } from "./ComposerCommandMenu";
+
+describe("composerCommandOptionDomId", () => {
+  it("produces a whitespace-free id that stays distinct across near-identical paths", () => {
+    const spaced = composerCommandOptionDomId("menu", "path:file:docs/my file.md");
+    const underscored = composerCommandOptionDomId("menu", "path:file:docs/my_file.md");
+    const escaped = composerCommandOptionDomId("menu", "path:file:docs/my%0020file.md");
+
+    expect(spaced).not.toMatch(/\s/);
+    expect(new Set([spaced, underscored, escaped]).size).toBe(3);
+    expect(composerCommandOptionDomId("menu", "slash:model")).toBe("menu-slash:model");
+  });
+});
 
 describe("ComposerCommandMenu", () => {
   it("renders slash commands with their descriptions", () => {
 
@@ -70,10 +70,15 @@ export type ComposerCommandItem =
 
 /**
  * DOM id of a menu option, so the editor's aria-activedescendant can point at
- * it. Item ids embed paths and may contain whitespace, which an IDREF cannot.
+ * it. Item ids embed paths and may contain whitespace, which an IDREF cannot;
+ * the fixed-width escape keeps ids that differ only there distinct.
  */
 export function composerCommandOptionDomId(listboxId: string, itemId: string): string {
-  return `${listboxId}-${itemId.replace(/\s/g, "_")}`;
+  const escaped = itemId.replace(
+    /[\s%]/g,
+    (char) => `%${char.charCodeAt(0).toString(16).padStart(4, "0")}`,
+  );
+  return `${listboxId}-${escaped}`;
 }
 
 const LISTBOX_LABEL_BY_TRIGGER: Record<ComposerTriggerKind, string> = {