From 28cd6622234e9913e875f74ce7e9fcad19239513 Mon Sep 17 00:00:00 2001
From: pt-act <211776491+pt-act@users.noreply.github.com>
Date: Mon, 19 Oct 2026 12:59:38 +0100
Subject: [PATCH 1/3] feat(dashboard): give the mention picker real
 listbox/combobox semantics (A11Y-11)

Verified live first: 0 listbox/combobox/option roles existed anywhere under
pages/Chat. The menu was a stack of divs and buttons, so the highlight that the
arrow keys move was invisible to assistive tech - a screen reader got the text of
every suggestion with no indication which one Enter would pick.

The menu is now role="listbox" with role="option" children and aria-selected on
the active one, and the composer textarea is role="combobox" with
aria-activedescendant pointing at the active option's id. Focus stays in the
textarea and the highlighted item is announced, which is the ARIA 1.2 composite
pattern for a text input with a popup listbox.

Ids come from mentionOptionId(index) so they stay stable across re-renders and
solvable by getElementById - an aria-activedescendant that resolves to nothing is
inert. The empty state is a listbox too, because aria-controls points at
MENTION_LISTBOX_ID whenever the menu is open and a non-listbox target would break
the relationship.

Two things this surfaced:

1. role="combobox" on the textarea is a role CHANGE - a combobox is a composite
   widget, not a textbox, so getByRole("textbox") stops matching. That is correct
   per spec, and the four queries in ChatInput.prefill.test.tsx are updated
   rather than the role being weakened. A dynamic role (combobox only while
   expanded) was rejected: ARIA warns against roles that change, because AT
   caches them.

2. A combobox must have an accessible name, and it had none - only a
   placeholder, which disappears on first keystroke and is ignored by some AT.
   aria-label added.

Scope note: this covers the mention picker only. The six sibling picker popovers
(Expert, Knowledge, Skill, Subagent, Connector, HITL) still need the same
treatment; they do not all share this menu component.

Verified: tsc -b clean, eslint 0 errors (3 pre-existing exhaustive-deps warnings
in ChatInput.tsx, untouched), 7 new cases in MentionPickerMenu.a11y.test.tsx and
14 passing across the chat suites. Mutation-verified - removing role/aria-selected
fails 5 cases, and giving every option the same id fails exactly the one
id-resolution case.
---
 .../components/ChatInput.prefill.test.tsx     |   8 +-
 .../src/pages/Chat/components/ChatInput.tsx   |  20 ++-
 .../MentionPickerMenu.a11y.test.tsx           | 128 ++++++++++++++++++
 .../Chat/components/MentionPickerMenu.tsx     |  37 ++++-
 4 files changed, 185 insertions(+), 8 deletions(-)
 create mode 100644 dashboard/src/pages/Chat/components/MentionPickerMenu.a11y.test.tsx

diff --git a/dashboard/src/pages/Chat/components/ChatInput.prefill.test.tsx b/dashboard/src/pages/Chat/components/ChatInput.prefill.test.tsx
index 13f64f4d2f..2d3582f477 100644
--- a/dashboard/src/pages/Chat/components/ChatInput.prefill.test.tsx
+++ b/dashboard/src/pages/Chat/components/ChatInput.prefill.test.tsx
@@ -162,7 +162,7 @@ describe("ChatInput prefill clear-on-send", () => {
       />,
     );
 
-    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    const textarea = screen.getByRole("combobox") as HTMLTextAreaElement;
     const prefill = "请填写收件人：";
 
     act(() => {
@@ -214,7 +214,7 @@ describe("ChatInput prefill clear-on-send", () => {
       />,
     );
 
-    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    const textarea = screen.getByRole("combobox") as HTMLTextAreaElement;
     const prefill = "请填写收件人：";
     parentPrefill = prefill;
 
@@ -260,7 +260,7 @@ describe("ChatInput prefill clear-on-send", () => {
     };
     const { rerender } = render(<ChatInput {...props} agentId="agent-1" />);
 
-    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    const textarea = screen.getByRole("combobox") as HTMLTextAreaElement;
     expect(textarea.value).toBe("previous expert prompt");
 
     rerender(<ChatInput {...props} agentId="agent-2" />);
@@ -283,7 +283,7 @@ describe("ChatInput prefill clear-on-send", () => {
         threadId="thread-1"
       />,
     );
-    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    const textarea = screen.getByRole("combobox") as HTMLTextAreaElement;
     fireEvent.change(textarea, { target: { value: "second question" } });
     fireEvent.click(screen.getByRole("button", { name: "send" }));
     expect(onSend).toHaveBeenCalledWith("second question", undefined);
diff --git a/dashboard/src/pages/Chat/components/ChatInput.tsx b/dashboard/src/pages/Chat/components/ChatInput.tsx
index 257688728e..13fa55f74d 100644
--- a/dashboard/src/pages/Chat/components/ChatInput.tsx
+++ b/dashboard/src/pages/Chat/components/ChatInput.tsx
@@ -25,7 +25,10 @@ import type { KnowledgeBase } from "../../../api/modules/knowledgeBases";
 import type { SkillSpec } from "../../Agent/Skills/useSkills";
 import type { ChatAgentOption } from "./ExpertAgentAvatar";
 import type { AgentSubagentSummary } from "../../../api/modules/subagents";
-import MentionPickerMenu from "./MentionPickerMenu";
+import MentionPickerMenu, {
+  MENTION_LISTBOX_ID,
+  mentionOptionId,
+} from "./MentionPickerMenu";
 import ChatInputPreviewBar from "./ChatInputPreviewBar";
 import ChatInputActionsRow from "./ChatInputActionsRow";
 import ChatQueuedMessages from "./ChatQueuedMessages";
@@ -801,6 +804,21 @@ const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
             <textarea
               ref={textareaRef}
               className={styles.textarea}
+              // Combobox semantics: the textarea owns the popup, and
+              // aria-activedescendant names the option the arrow keys have
+              // highlighted, so the highlighted item is announced while focus
+              // stays in the input. Without this the menu was a visually-only
+              // affordance — 0 listbox/combobox roles existed in pages/Chat.
+              role="combobox"
+              // A combobox must have a name. The placeholder is not one: it
+              // disappears once the user types, and some AT ignores it.
+              aria-label={t("chatWelcome.inputPlaceholder", "Message Octop...")}
+              aria-expanded={mentionMenuOpen}
+              aria-controls={mentionMenuOpen ? MENTION_LISTBOX_ID : undefined}
+              aria-activedescendant={
+                mentionMenuOpen ? mentionOptionId(mentionMenuIndex) : undefined
+              }
+              aria-autocomplete="list"
               value={text}
               onChange={(e) => {
                 userHasEditedRef.current = true;
diff --git a/dashboard/src/pages/Chat/components/MentionPickerMenu.a11y.test.tsx b/dashboard/src/pages/Chat/components/MentionPickerMenu.a11y.test.tsx
new file mode 100644
index 0000000000..d8815ba89c
--- /dev/null
+++ b/dashboard/src/pages/Chat/components/MentionPickerMenu.a11y.test.tsx
@@ -0,0 +1,128 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+/**
+ * A11Y-11 regression guard (mention picker half).
+ *
+ * The mention menu was a stack of <div>s and <button>s with no listbox or
+ * combobox semantics — 0 such roles existed anywhere under pages/Chat. So the
+ * highlight that arrow keys move was invisible to assistive tech: a screen
+ * reader got the text of every suggestion but no indication which one Enter
+ * would pick.
+ */
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => fallback ?? key,
+  }),
+}));
+
+vi.mock("./ExpertAgentAvatar", () => ({
+  default: () => null,
+}));
+
+import MentionPickerMenu, {
+  MENTION_LISTBOX_ID,
+  mentionOptionId,
+  type MentionPick,
+} from "./MentionPickerMenu";
+
+const items: MentionPick[] = [
+  { kind: "connector", name: "c1", label: "Connector One" },
+  { kind: "agent", agent_id: "a1", label: "Agent One" },
+  { kind: "subagent", slug: "s1", label: "Subagent One" },
+];
+
+function setup(activeIndex: number) {
+  return render(
+    <MentionPickerMenu
+      items={items}
+      query=""
+      activeIndex={activeIndex}
+      onSelect={vi.fn()}
+      onHover={vi.fn()}
+    />,
+  );
+}
+
+describe("mention picker listbox (A11Y-11)", () => {
+  it("renders the menu as a labelled listbox", () => {
+    setup(0);
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toHaveAttribute("id", MENTION_LISTBOX_ID);
+    expect(listbox).toHaveAccessibleName();
+  });
+
+  it("exposes every suggestion as an option", () => {
+    setup(0);
+    expect(screen.getAllByRole("option")).toHaveLength(3);
+  });
+
+  it("marks exactly the active option as selected", () => {
+    // This is the whole point: the arrow-key highlight has to be announced.
+    setup(1);
+    const selected = screen
+      .getAllByRole("option")
+      .filter((el) => el.getAttribute("aria-selected") === "true");
+    expect(selected).toHaveLength(1);
+    expect(selected[0]).toHaveTextContent("Agent One");
+  });
+
+  it("gives each option the id the composer points at", () => {
+    // aria-activedescendant must resolve to a real element or it is inert.
+    setup(2);
+    const active = document.getElementById(mentionOptionId(2));
+    expect(active).not.toBeNull();
+    expect(active).toHaveAttribute("aria-selected", "true");
+    expect(active).toHaveTextContent("Subagent One");
+  });
+
+  it("keeps ids stable across active-index changes", () => {
+    const { rerender } = setup(0);
+    const firstIds = screen.getAllByRole("option").map((el) => el.id);
+    rerender(
+      <MentionPickerMenu
+        items={items}
+        query=""
+        activeIndex={2}
+        onSelect={vi.fn()}
+        onHover={vi.fn()}
+      />,
+    );
+    expect(screen.getAllByRole("option").map((el) => el.id)).toEqual(firstIds);
+  });
+
+  it("still selects on click (the roles did not break interaction)", () => {
+    const onSelect = vi.fn();
+    render(
+      <MentionPickerMenu
+        items={items}
+        query=""
+        activeIndex={0}
+        onSelect={onSelect}
+        onHover={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByRole("option", { name: /Agent One/ }));
+    expect(onSelect).toHaveBeenCalledWith(items[1]);
+  });
+
+  it("renders the empty state as a listbox too", () => {
+    // aria-controls points here whenever the menu is open; pointing at a
+    // non-listbox would break the relationship.
+    render(
+      <MentionPickerMenu
+        items={[]}
+        query=""
+        activeIndex={0}
+        onSelect={vi.fn()}
+        onHover={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole("listbox")).toHaveAttribute(
+      "id",
+      MENTION_LISTBOX_ID,
+    );
+    expect(screen.queryAllByRole("option")).toHaveLength(0);
+  });
+});
diff --git a/dashboard/src/pages/Chat/components/MentionPickerMenu.tsx b/dashboard/src/pages/Chat/components/MentionPickerMenu.tsx
index 0e599d97ef..3e2ffaf328 100644
--- a/dashboard/src/pages/Chat/components/MentionPickerMenu.tsx
+++ b/dashboard/src/pages/Chat/components/MentionPickerMenu.tsx
@@ -31,6 +31,18 @@ export function firstFileMentionIndex(items: MentionPick[]): number {
   return items.findIndex((item) => item.kind === "file");
 }
 
+/** Id of the menu container, referenced by the composer's aria-controls. */
+export const MENTION_LISTBOX_ID = "octop-mention-listbox";
+
+/**
+ * DOM id for the option at a flat index. The composer points
+ * aria-activedescendant at this so a screen reader announces the highlighted
+ * item while focus stays in the textarea.
+ */
+export function mentionOptionId(index: number): string {
+  return `octop-mention-option-${index}`;
+}
+
 export function buildMentionItems(
   query: string,
   connectors: ChatConnectorOption[],
@@ -149,9 +161,16 @@ export default function MentionPickerMenu({
   const hasFilePick = fileCount > 0;
 
   if (items.length === 0 && !fileHint) {
+    // Still a listbox: the composer's aria-controls points here whenever the
+    // menu is open, and pointing at a non-listbox breaks the relationship.
     return (
-      <div className={styles.mentionMenu}>
-        <div className={styles.mentionEmpty}>
+      <div
+        className={styles.mentionMenu}
+        id={MENTION_LISTBOX_ID}
+        role="listbox"
+        aria-label={t("mention.listLabel", "Mentions")}
+      >
+        <div className={styles.mentionEmpty} role="presentation">
           {t("mention.empty", "No matches")}
         </div>
       </div>
@@ -172,7 +191,12 @@ export default function MentionPickerMenu({
 
   let flatIndex = -1;
   return (
-    <div className={styles.mentionMenu}>
+    <div
+      className={styles.mentionMenu}
+      id={MENTION_LISTBOX_ID}
+      role="listbox"
+      aria-label={t("mention.listLabel", "Mentions")}
+    >
       {sections.map((section) => (
         <div key={section.title}>
           <div className={styles.mentionCategory}>{section.title}</div>
@@ -202,10 +226,17 @@ export default function MentionPickerMenu({
             }
             const pathHint =
               item.kind === "file" && item.path !== item.label ? item.path : "";
+            // role="option" on a real <button> keeps click and focus behaviour
+            // while giving the listbox its children. The active index is owned
+            // by the composer (it follows the typing), so aria-selected tracks
+            // that rather than local focus.
             return (
               <button
                 key={mentionPickKey(item)}
                 type="button"
+                id={mentionOptionId(idx)}
+                role="option"
+                aria-selected={active}
                 className={`${styles.mentionItem} ${
                   active ? styles.mentionItemActive : ""
                 }`}

From 90eb7d07787840a845059288ed2f0e79254f8dfa Mon Sep 17 00:00:00 2001
From: pt-act <211776491+pt-act@users.noreply.github.com>
Date: Mon, 19 Oct 2026 13:21:40 +0100
Subject: [PATCH 2/3] feat(dashboard): label the shared picker panel and speak
 selected state (A11Y-11)

SearchablePickerPanel backs five of the six chat pickers (expert, knowledge,
skill, subagent, connector) - they are thin wrappers that own no list markup, so
this one component was the whole remaining surface for those five. It had zero
ARIA: the search input was named only by a placeholder, the list was a bare div,
filtering was silent, and three callers carried their selected state in a CSS
class alone.

What changed:

- The search input gets aria-label (a new required ariaLabel prop, wired at all
  five call sites from existing translation keys - no new strings).
- The list becomes role="group" with that same label.
- A visually hidden role="status" aria-live="polite" announces the result count.

Why group+aria-pressed and NOT listbox+aria-selected: these are multi-select
toggles in a popover, and the rows contain real <button>s (switch, hide, select).
An option may not contain interactive descendants, so listbox would have been
invalid nesting. The items therefore keep toggle semantics.

aria-pressed added where selection was CSS-only: SubagentPickerPopover and
ExpertPickerPopover. Connector and Knowledge need nothing - they already use an
antd Switch, which exposes role="switch" with aria-checked.

The live region is rendered in the empty branch too. An aria-live region must
exist before its content changes or the change is not announced, so rendering it
only alongside results would break precisely the case that needs announcing
most; there is a test pinning that.

Verified: tsc -b clean, eslint 0 errors on all eight files, 6 new cases in
SearchablePickerPanel.a11y.test.tsx. All 5 call sites updated (the prop is
required, so tsc proves there are no others).

Note on the wider suite: TrajectoryInspector > "loads full content on the Preview
tab" failed once and passed twice across three runs of the same command with the
same working tree, and passes in isolation. That is the pre-existing load-order
flakiness (roadmap item 6), not this change.
---
 .../SearchablePickerPanel.a11y.test.tsx       | 117 ++++++++++++++++++
 .../ChatPicker/SearchablePickerPanel.tsx      |  33 ++++-
 .../components/ChatPicker/picker.module.less  |  14 +++
 .../components/ConnectorPickerPopover.tsx     |   1 +
 .../Chat/components/ExpertPickerPopover.tsx   |   8 ++
 .../components/KnowledgePickerPopover.tsx     |   1 +
 .../Chat/components/SkillPickerPopover.tsx    |   1 +
 .../Chat/components/SubagentPickerPopover.tsx |   4 +
 8 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 dashboard/src/components/ChatPicker/SearchablePickerPanel.a11y.test.tsx

diff --git a/dashboard/src/components/ChatPicker/SearchablePickerPanel.a11y.test.tsx b/dashboard/src/components/ChatPicker/SearchablePickerPanel.a11y.test.tsx
new file mode 100644
index 0000000000..6023c26e79
--- /dev/null
+++ b/dashboard/src/components/ChatPicker/SearchablePickerPanel.a11y.test.tsx
@@ -0,0 +1,117 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+/**
+ * A11Y-11 regression guard (shared picker panel half).
+ *
+ * SearchablePickerPanel backs five of the six chat pickers (expert, knowledge,
+ * skill, subagent, connector), which own no list markup themselves. Before this
+ * fix it had zero ARIA: the search box was named only by a placeholder, and
+ * filtering was completely silent.
+ *
+ * These panels are MULTI-SELECT TOGGLES inside a popover, not comboboxes. That
+ * is why the list is role="group" with aria-pressed on the items rather than
+ * role="listbox" with aria-selected: the rows contain real <button>s, and an
+ * option may not contain interactive descendants.
+ */
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    // Resolve to the fallback, as the shared test setup does, so assertions
+    // read the literal string rather than a locale lookup.
+    t: (_key: string, fallback?: string, options?: { count?: number }) =>
+      fallback === undefined
+        ? _key
+        : fallback.replace("{{count}}", String(options?.count ?? "")),
+  }),
+}));
+
+import SearchablePickerPanel from "./SearchablePickerPanel";
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+const rows: Row[] = [
+  { id: "a", name: "Alpha" },
+  { id: "b", name: "Beta" },
+];
+
+function setup(
+  overrides: Partial<Parameters<typeof SearchablePickerPanel<Row>>[0]> = {},
+) {
+  return render(
+    <SearchablePickerPanel<Row>
+      items={rows}
+      filterFn={(item, query) =>
+        item.name.toLowerCase().includes(query.toLowerCase())
+      }
+      searchPlaceholder="Search things"
+      ariaLabel="Things"
+      emptyMessage="Nothing here"
+      renderItem={(item) => (
+        <button type="button" aria-pressed={item.id === "a"}>
+          {item.name}
+        </button>
+      )}
+      footerIcon={null}
+      footerLabel="Manage"
+      onFooterClick={vi.fn()}
+      {...overrides}
+    />,
+  );
+}
+
+describe("searchable picker panel (A11Y-11)", () => {
+  it("gives the search field an accessible name, not just a placeholder", () => {
+    setup();
+    // The placeholder disappears on first keystroke and is not a name.
+    expect(screen.getByRole("searchbox")).toHaveAccessibleName("Things");
+  });
+
+  it("exposes the list as a labelled group", () => {
+    setup();
+    expect(screen.getByRole("group")).toHaveAccessibleName("Things");
+  });
+
+  it("announces the result count through a live region", () => {
+    // Filtering was previously silent: the list could shrink to nothing with no
+    // announcement at all.
+    setup();
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "polite");
+    expect(status).toHaveTextContent("2 results");
+  });
+
+  it("keeps the live region present even when the filter matches nothing", () => {
+    // An aria-live region must exist BEFORE its content changes, or the update
+    // is not announced. Rendering it only in the non-empty branch would break
+    // exactly the case that needs announcing most.
+    setup({ items: [] });
+    expect(screen.getByRole("status")).toHaveTextContent("0 results");
+  });
+
+  it("still renders the items and the empty state", () => {
+    setup();
+    expect(screen.getAllByRole("button")).toHaveLength(3); // 2 rows + footer
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+
+    setup({ items: [] });
+    expect(screen.getByText("Nothing here")).toBeInTheDocument();
+  });
+
+  it("carries aria-pressed through from renderItem", () => {
+    // The panel does not own toggle state - callers pass it in renderItem - so
+    // this pins that the panel does not strip it.
+    setup();
+    expect(screen.getByRole("button", { name: "Alpha" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(screen.getByRole("button", { name: "Beta" })).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+  });
+});
diff --git a/dashboard/src/components/ChatPicker/SearchablePickerPanel.tsx b/dashboard/src/components/ChatPicker/SearchablePickerPanel.tsx
index bbbe62d7ea..b09a85b8c7 100644
--- a/dashboard/src/components/ChatPicker/SearchablePickerPanel.tsx
+++ b/dashboard/src/components/ChatPicker/SearchablePickerPanel.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { Search } from "lucide-react";
 import { useFilteredList } from "../../hooks/useFilteredList";
 import styles from "./picker.module.less";
@@ -22,6 +23,13 @@ interface SearchablePickerPanelProps<T> {
   footerMuted?: boolean;
   /** Optional row(s) rendered between the list and the primary footer. */
   beforeFooter?: ReactNode;
+  /**
+   * Names the search field and the option group. These panels are multi-select
+   * toggles inside a popover, so their items are buttons with aria-pressed
+   * rather than listbox options — the label is what tells a screen reader what
+   * the set of toggles controls.
+   */
+  ariaLabel: string;
 }
 
 export default function SearchablePickerPanel<T>({
@@ -38,7 +46,9 @@ export default function SearchablePickerPanel<T>({
   onFooterClick,
   footerMuted = false,
   beforeFooter,
+  ariaLabel,
 }: SearchablePickerPanelProps<T>) {
+  const { t } = useTranslation();
   const { query, setQuery, filtered } = useFilteredList(items, filterFn);
   const panelClass =
     width === "compact"
@@ -53,6 +63,9 @@ export default function SearchablePickerPanel<T>({
         <input
           type="search"
           className={styles.searchInput}
+          // The placeholder is not an accessible name: it disappears once the
+          // user types, and some AT ignores it entirely.
+          aria-label={ariaLabel}
           placeholder={searchPlaceholder}
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -60,7 +73,25 @@ export default function SearchablePickerPanel<T>({
         <Search size={15} className={styles.searchIcon} aria-hidden />
       </div>
 
-      <div className={styles.list} data-picker-list="">
+      {/* Filtering is visually obvious and was completely silent to assistive
+          tech: the list can shrink to empty with no announcement. */}
+      <div
+        className={styles.searchStatus}
+        role="status"
+        aria-live="polite"
+        data-picker-status=""
+      >
+        {t("chat.pickerResultCount", "{{count}} results", {
+          count: filtered.length,
+        })}
+      </div>
+
+      <div
+        className={styles.list}
+        data-picker-list=""
+        role="group"
+        aria-label={ariaLabel}
+      >
         {filtered.length === 0 ? (
           <div className={styles.empty}>{emptyMessage}</div>
         ) : (
diff --git a/dashboard/src/components/ChatPicker/picker.module.less b/dashboard/src/components/ChatPicker/picker.module.less
index 56d06fddb4..02ec29a2b0 100644
--- a/dashboard/src/components/ChatPicker/picker.module.less
+++ b/dashboard/src/components/ChatPicker/picker.module.less
@@ -51,6 +51,20 @@
   pointer-events: none;
 }
 
+/* Visually hidden: the result count is announced, not shown. Filtering already
+   has a visible signal (the list shrinks), so this must not alter layout. */
+.searchStatus {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .list {
   max-height: 320px;
   overflow-y: auto;
diff --git a/dashboard/src/pages/Chat/components/ConnectorPickerPopover.tsx b/dashboard/src/pages/Chat/components/ConnectorPickerPopover.tsx
index eb433dc8e3..e674022052 100644
--- a/dashboard/src/pages/Chat/components/ConnectorPickerPopover.tsx
+++ b/dashboard/src/pages/Chat/components/ConnectorPickerPopover.tsx
@@ -45,6 +45,7 @@ export default function ConnectorPickerPopover({
       items={connectors}
       filterFn={filterFn}
       searchPlaceholder={t("connectors.chatPickerSearch")}
+      ariaLabel={t("connectors.chatPickerSearch")}
       emptyMessage={t("connectors.chatEmptyHint")}
       width="narrow"
       footerIcon={<Settings2 size={15} aria-hidden />}
diff --git a/dashboard/src/pages/Chat/components/ExpertPickerPopover.tsx b/dashboard/src/pages/Chat/components/ExpertPickerPopover.tsx
index 3cff18de52..7b9f8adb85 100644
--- a/dashboard/src/pages/Chat/components/ExpertPickerPopover.tsx
+++ b/dashboard/src/pages/Chat/components/ExpertPickerPopover.tsx
@@ -73,6 +73,11 @@ export default function ExpertPickerPopover({
           ? t("chat.expertPickerHiddenSearch")
           : t("chat.expertPickerSearch")
       }
+      ariaLabel={
+        viewingHidden
+          ? t("chat.expertPickerHiddenSearch")
+          : t("chat.expertPickerSearch")
+      }
       emptyMessage={
         viewingHidden
           ? t("chat.expertPickerHiddenEmpty")
@@ -151,6 +156,9 @@ export default function ExpertPickerPopover({
             <button
               type="button"
               className={styles.expertPickerSelect}
+              // Selection was CSS-only, so which experts are active was
+              // invisible to assistive tech.
+              aria-pressed={active}
               onClick={() => onSelect(agent)}
             >
               <ExpertAgentAvatar
diff --git a/dashboard/src/pages/Chat/components/KnowledgePickerPopover.tsx b/dashboard/src/pages/Chat/components/KnowledgePickerPopover.tsx
index 1a33befe8f..b5bc20b8b6 100644
--- a/dashboard/src/pages/Chat/components/KnowledgePickerPopover.tsx
+++ b/dashboard/src/pages/Chat/components/KnowledgePickerPopover.tsx
@@ -43,6 +43,7 @@ export default function KnowledgePickerPopover({
       items={knowledgeBases}
       filterFn={filterFn}
       searchPlaceholder={t("chat.knowledgePickerSearch")}
+      ariaLabel={t("chat.knowledgePickerSearch")}
       emptyMessage={t("chat.knowledgePickerEmpty")}
       width="narrow"
       footerIcon={
diff --git a/dashboard/src/pages/Chat/components/SkillPickerPopover.tsx b/dashboard/src/pages/Chat/components/SkillPickerPopover.tsx
index 38335cc874..bbd21758c9 100644
--- a/dashboard/src/pages/Chat/components/SkillPickerPopover.tsx
+++ b/dashboard/src/pages/Chat/components/SkillPickerPopover.tsx
@@ -85,6 +85,7 @@ export default function SkillPickerPopover({
       items={enabledSkills}
       filterFn={filterFn}
       searchPlaceholder={t("chat.skillPickerSearch", "Search skills")}
+      ariaLabel={t("chat.skillPickerSearch", "Search skills")}
       emptyMessage={t("chat.skillPickerEmpty")}
       width="wide"
       footerIcon={
diff --git a/dashboard/src/pages/Chat/components/SubagentPickerPopover.tsx b/dashboard/src/pages/Chat/components/SubagentPickerPopover.tsx
index 249f6b875c..e2fd4c8a91 100644
--- a/dashboard/src/pages/Chat/components/SubagentPickerPopover.tsx
+++ b/dashboard/src/pages/Chat/components/SubagentPickerPopover.tsx
@@ -40,6 +40,7 @@ export default function SubagentPickerPopover({
       items={subagents}
       filterFn={filterFn}
       searchPlaceholder={t("chat.subagentPickerSearch")}
+      ariaLabel={t("chat.subagentPickerSearch")}
       emptyMessage={t("chat.subagentPickerEmpty")}
       width="compact"
       footerIcon={
@@ -72,6 +73,9 @@ export default function SubagentPickerPopover({
             className={`${styles.skillPickerItem} ${
               active ? styles.subagentPickerItemActive : ""
             }`}
+            // The selected state was carried by a CSS class only, so a screen
+            // reader could not tell an installed subagent from one that is not.
+            aria-pressed={active}
             onClick={() => onSelect(subagent)}
           >
             <span className={styles.skillPickerAvatar} aria-hidden>

From 29d9e2c126be067e457b22fc032e213cd2d6bba5 Mon Sep 17 00:00:00 2001
From: pt-act <211776491+pt-act@users.noreply.github.com>
Date: Mon, 19 Oct 2026 13:28:48 +0100
Subject: [PATCH 3/3] fix(dashboard): announce the active HITL approval mode
 (A11Y-11)

The last picker with a live gap, and the only one that does not use
SearchablePickerPanel. Its two mode buttons ("ask" / "allow all") carried the
active mode in a CSS class alone - a screen reader heard two identical toggles
with no way to tell which policy is in force, which for a tool-approval control
is the whole point of the widget.

aria-pressed added to both mode buttons, and the menu is now role="group" with
the existing chat.hitl.policy.picker label.

The trigger button and the per-tool remove buttons already had aria-label, so
they are untouched.

Verified: tsc -b clean, eslint 0 errors, 5 passing cases in
HitlPolicyPicker.test.tsx (2 new). Mutation-verified - removing both
aria-pressed attributes and the group role fails exactly the 2 new cases while
the 3 pre-existing ones still pass.
---
 .../Chat/components/HitlPolicyPicker.test.tsx | 25 +++++++++++++++++++
 .../Chat/components/HitlPolicyPicker.tsx      | 10 +++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/dashboard/src/pages/Chat/components/HitlPolicyPicker.test.tsx b/dashboard/src/pages/Chat/components/HitlPolicyPicker.test.tsx
index a4860aa39c..edaf4587bb 100644
--- a/dashboard/src/pages/Chat/components/HitlPolicyPicker.test.tsx
+++ b/dashboard/src/pages/Chat/components/HitlPolicyPicker.test.tsx
@@ -21,6 +21,31 @@ describe("HitlPolicyPicker", () => {
     expect(onChange).toHaveBeenCalledWith({ mode: "ask" });
   });
 
+  it("announces which approval mode is in force (A11Y-11)", async () => {
+    // The active mode was carried by a CSS class alone, so a screen reader
+    // could not tell "ask" from "allow all".
+    render(
+      <HitlPolicyPicker policy={{ mode: "allow_all" }} onChange={vi.fn()} />,
+    );
+    fireEvent.click(screen.getByTestId("hitl-policy-picker"));
+
+    const allowAll = await screen.findByText("chat.hitl.policy.allowAll");
+    const allowAllBtn = allowAll.closest("button");
+    expect(allowAllBtn).toHaveAttribute("aria-pressed", "true");
+
+    const ask = await screen.findByText("chat.hitl.policy.ask");
+    expect(ask.closest("button")).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("groups the mode buttons under a label (A11Y-11)", async () => {
+    render(<HitlPolicyPicker policy={{ mode: "ask" }} onChange={vi.fn()} />);
+    fireEvent.click(screen.getByTestId("hitl-policy-picker"));
+    // find the group by its label to prove the relationship resolves
+    expect(
+      await screen.findByRole("group", { name: "chat.hitl.policy.picker" }),
+    ).toBeInTheDocument();
+  });
+
   it("can remove one allowed tool without closing the menu", async () => {
     const onChange = vi.fn();
     render(
diff --git a/dashboard/src/pages/Chat/components/HitlPolicyPicker.tsx b/dashboard/src/pages/Chat/components/HitlPolicyPicker.tsx
index 0423731f44..7bbfa3c948 100644
--- a/dashboard/src/pages/Chat/components/HitlPolicyPicker.tsx
+++ b/dashboard/src/pages/Chat/components/HitlPolicyPicker.tsx
@@ -39,12 +39,19 @@ export default function HitlPolicyPicker({
       onOpenChange={setOpen}
       overlayClassName={styles.modelPopover}
       content={
-        <div className={styles.modeMenu}>
+        <div
+          className={styles.modeMenu}
+          role="group"
+          aria-label={t("chat.hitl.policy.picker")}
+        >
           <button
             type="button"
             className={`${styles.modeMenuItem} ${
               policy.mode === "ask" ? styles.modeMenuItemActive : ""
             }`}
+            // The active policy was carried by a CSS class alone, so a screen
+            // reader could not tell which mode is in force.
+            aria-pressed={policy.mode === "ask"}
             onClick={() => {
               onChange({ mode: "ask" });
               setOpen(false);
@@ -63,6 +70,7 @@ export default function HitlPolicyPicker({
             className={`${styles.modeMenuItem} ${
               policy.mode === "allow_all" ? styles.modeMenuItemActive : ""
             }`}
+            aria-pressed={policy.mode === "allow_all"}
             onClick={() => {
               onChange({ mode: "allow_all" });
               setOpen(false);