@assistant-ui/react-mcp 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-mcp",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "MCP server configuration and connection primitives for @assistant-ui",
   "keywords": [
     "mcp",
@@ -27,13 +27,13 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.18",
+    "@assistant-ui/core": "^0.3.19",
     "@assistant-ui/store": "^0.3.13",
     "@assistant-ui/tap": "^0.9.17",
     "@modelcontextprotocol/client": "^2.0.0",
     "@modelcontextprotocol/core": "^2.0.0",
     "@radix-ui/react-primitive": "^2.1.10",
-    "assistant-stream": "^0.3.42"
+    "assistant-stream": "^0.3.43"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -45,13 +45,13 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/x-buildutils": "0.0.26",
+    "@assistant-ui/x-buildutils": "0.0.27",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.2.18",
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   },
   "publishConfig": {
     "access": "public",

package/src/primitives/addForm/McpAddFormAccessibility.test.tsx

@@ -0,0 +1,261 @@
+// @vitest-environment jsdom
+
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createRef } from "react";
+
+const mocks = vi.hoisted(() => ({ addCustomServer: vi.fn() }));
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useAui: () => ({ mcp: { addCustomServer: mocks.addCustomServer } }),
+}));
+
+import { McpAddFormPrimitiveRoot as Root } from "./McpAddFormRoot";
+import { McpAddFormPrimitiveNameField as NameField } from "./McpAddFormNameField";
+import { McpAddFormPrimitiveUrlField as UrlField } from "./McpAddFormUrlField";
+import { McpAddFormPrimitiveAuthSelect as AuthSelect } from "./McpAddFormAuthSelect";
+import { McpAddFormPrimitiveAuthFields as AuthFields } from "./McpAddFormAuthFields";
+import { McpAddFormPrimitiveError as ErrorMessage } from "./McpAddFormError";
+
+const Form = ({ name = "Add server" }: { name?: string }) => (
+  <Root aria-label={name}>
+    <label>
+      Name
+      <NameField />
+    </label>
+    <label>
+      URL
+      <UrlField />
+    </label>
+    <label>
+      Auth
+      <AuthSelect />
+    </label>
+    <AuthFields />
+    <ErrorMessage />
+  </Root>
+);
+
+beforeEach(() => {
+  mocks.addCustomServer.mockReset().mockResolvedValue("server");
+});
+afterEach(cleanup);
+
+describe("MCP add form accessibility", () => {
+  it("does not add a wrapper around an asChild error without a custom ID", () => {
+    render(
+      <Root aria-label="Add server">
+        <NameField aria-label="Name" />
+        <ErrorMessage asChild>
+          <div>Enter the server name.</div>
+        </ErrorMessage>
+      </Root>,
+    );
+    fireEvent.submit(screen.getByRole("form"));
+    const error = screen.getByRole("alert");
+    expect(error.parentElement).toBe(screen.getByRole("form"));
+    expect(error.id).not.toBe("");
+    expect(
+      screen
+        .getByRole("textbox", { name: "Name" })
+        .getAttribute("aria-describedby"),
+    ).toBe(error.id);
+  });
+
+  it.each(["element", "slot", "child"] as const)(
+    "keeps a custom error ID on the %s associated with fields",
+    (target) => {
+      const ref = createRef<HTMLDivElement>();
+      render(
+        <Root aria-label="Add server">
+          <NameField aria-label="Name" />
+          <ErrorMessage
+            {...(target !== "child" && { id: "custom-error" })}
+            asChild={target !== "element"}
+            ref={ref}
+          >
+            {target !== "element" ? (
+              <div {...(target === "child" && { id: "custom-error" })}>
+                Enter the server name.
+              </div>
+            ) : (
+              "Enter the server name."
+            )}
+          </ErrorMessage>
+        </Root>,
+      );
+      fireEvent.submit(screen.getByRole("form"));
+      const error = screen.getByRole("alert");
+      expect(error.id).toBe("custom-error");
+      expect(ref.current).toBe(error);
+      const descriptionId = screen
+        .getByRole("textbox", { name: "Name" })
+        .getAttribute("aria-describedby")!;
+      expect(document.getElementById(descriptionId)?.textContent).toBe(
+        "Enter the server name.",
+      );
+      expect(document.querySelectorAll(`[id="${descriptionId}"]`)).toHaveLength(
+        1,
+      );
+    },
+  );
+
+  it("keeps enclosing labels as the accessible names", () => {
+    render(
+      <Root>
+        <label>
+          Server name
+          <NameField />
+        </label>
+        <label>
+          Server address
+          <UrlField />
+        </label>
+        <label>
+          Authentication method
+          <AuthSelect />
+        </label>
+      </Root>,
+    );
+    expect(screen.getByRole("textbox", { name: "Server name" })).toBeTruthy();
+    expect(
+      screen.getByRole("textbox", { name: "Server address" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("combobox", { name: "Authentication method" }),
+    ).toBeTruthy();
+  });
+  it("preserves field labels and only marks the field with an error", () => {
+    render(<Form />);
+    const name = screen.getByRole("textbox", { name: "Name" });
+    const url = screen.getByRole("textbox", { name: "URL" });
+    const auth = screen.getByRole("combobox", { name: "Auth" });
+    expect(screen.getByRole("textbox", { name: "OAuth scopes" })).toBeTruthy();
+
+    fireEvent.submit(screen.getByRole("form"));
+    const error = screen.getByRole("alert");
+    expect(error.textContent).toBe("Name is required");
+    expect(name.getAttribute("aria-invalid")).toBe("true");
+    expect(name.getAttribute("aria-describedby")).toBe(error.id);
+    expect(url.hasAttribute("aria-invalid")).toBe(false);
+
+    fireEvent.change(name, { target: { value: "Docs" } });
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(name.hasAttribute("aria-invalid")).toBe(false);
+    fireEvent.submit(screen.getByRole("form"));
+    expect(url.getAttribute("aria-describedby")).toBe(
+      screen.getByRole("alert").id,
+    );
+    fireEvent.change(url, { target: { value: "https://example.com/mcp" } });
+    fireEvent.change(auth, { target: { value: "bearer" } });
+    fireEvent.submit(screen.getByRole("form"));
+    const token = screen.getByLabelText("Bearer token");
+    expect(token.getAttribute("aria-invalid")).toBe("true");
+    expect(token.getAttribute("aria-describedby")).toBe(
+      screen.getByRole("alert").id,
+    );
+    fireEvent.change(auth, { target: { value: "none" } });
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(screen.queryByLabelText("Bearer token")).toBeNull();
+  });
+
+  it("announces server errors without marking unrelated fields invalid", async () => {
+    mocks.addCustomServer.mockRejectedValue(new Error("Connection failed"));
+    render(<Form />);
+    fireEvent.change(screen.getByRole("textbox", { name: "Name" }), {
+      target: { value: "Docs" },
+    });
+    fireEvent.change(screen.getByRole("textbox", { name: "URL" }), {
+      target: { value: "https://example.com/mcp" },
+    });
+    fireEvent.submit(screen.getByRole("form"));
+    await waitFor(() =>
+      expect(screen.getByRole("alert").textContent).toBe("Connection failed"),
+    );
+    expect(document.querySelector('[aria-invalid="true"]')).toBeNull();
+  });
+
+  it("uses distinct IDs for simultaneously mounted forms", () => {
+    render(
+      <>
+        <Form name="First" />
+        <Form name="Second" />
+      </>,
+    );
+    const first = screen.getByRole("form", { name: "First" });
+    const second = screen.getByRole("form", { name: "Second" });
+    fireEvent.submit(first);
+    fireEvent.submit(second);
+    const firstError = within(first).getByRole("alert");
+    const secondError = within(second).getByRole("alert");
+    expect(firstError.id).not.toBe(secondError.id);
+    expect(
+      within(first)
+        .getByRole("textbox", { name: "Name" })
+        .getAttribute("aria-describedby"),
+    ).toBe(firstError.id);
+    expect(
+      within(second)
+        .getByRole("textbox", { name: "Name" })
+        .getAttribute("aria-describedby"),
+    ).toBe(secondError.id);
+  });
+
+  it("preserves caller IDs and ARIA overrides while associating errors", () => {
+    render(
+      <Root aria-label="Add server">
+        <NameField
+          id="server-name"
+          aria-label="Server name"
+          aria-describedby="hint"
+          aria-invalid={false}
+        />
+        <p id="hint">Use a recognizable name.</p>
+        <ErrorMessage />
+      </Root>,
+    );
+    const field = screen.getByRole("textbox", { name: "Server name" });
+    expect(field.id).toBe("server-name");
+    expect(field.getAttribute("aria-describedby")).toBe("hint");
+    fireEvent.submit(screen.getByRole("form"));
+    expect(field.getAttribute("aria-invalid")).toBe("false");
+    expect(field.getAttribute("aria-describedby")).toBe(
+      `hint ${screen.getByRole("alert").id}`,
+    );
+    fireEvent.change(field, { target: { value: "Docs" } });
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(field.getAttribute("aria-describedby")).toBe("hint");
+  });
+
+  it("keeps URL help text associated when validation errors appear and clear", () => {
+    render(
+      <Root aria-label="Add server">
+        <NameField aria-label="Name" />
+        <UrlField aria-label="URL" aria-describedby="url-hint url-format" />
+        <p id="url-hint">Use the server endpoint.</p>
+        <p id="url-format">An HTTP or HTTPS URL is required.</p>
+        <ErrorMessage />
+      </Root>,
+    );
+    fireEvent.change(screen.getByRole("textbox", { name: "Name" }), {
+      target: { value: "Docs" },
+    });
+    const field = screen.getByRole("textbox", { name: "URL" });
+    fireEvent.submit(screen.getByRole("form"));
+    expect(field.getAttribute("aria-invalid")).toBe("true");
+    expect(field.getAttribute("aria-describedby")).toBe(
+      `url-hint url-format ${screen.getByRole("alert").id}`,
+    );
+    fireEvent.change(field, { target: { value: "https://example.com/mcp" } });
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(field.hasAttribute("aria-invalid")).toBe(false);
+    expect(field.getAttribute("aria-describedby")).toBe("url-hint url-format");
+  });
+});

package/src/primitives/addForm/McpAddFormAuthFields.tsx

@@ -14,7 +14,7 @@ export namespace McpAddFormPrimitiveAuthFields {
 export const McpAddFormPrimitiveAuthFields: FC<
   McpAddFormPrimitiveAuthFields.Props
 > = ({ children }) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
 
   if (children) {
     const Render = children;
@@ -23,25 +23,43 @@ export const McpAddFormPrimitiveAuthFields: FC<
 
   if (state.authType === "bearer") {
     return (
-      <input
-        type="password"
-        placeholder="Bearer token"
-        value={state.bearerToken}
-        onChange={(e) => setField("bearerToken", e.target.value)}
-        data-mcp-auth-field="bearer-token"
-      />
+      <div>
+        <label
+          htmlFor={ids.bearerToken}
+          data-mcp-auth-field-label="bearer-token"
+        >
+          Bearer token
+        </label>
+        <input
+          id={ids.bearerToken}
+          type="password"
+          value={state.bearerToken}
+          onChange={(e) => setField("bearerToken", e.target.value)}
+          aria-invalid={state.errorField === "bearerToken" ? true : undefined}
+          aria-describedby={
+            state.errorField === "bearerToken" ? ids.error : undefined
+          }
+          data-mcp-auth-field="bearer-token"
+        />
+      </div>
     );
   }
 
   if (state.authType === "oauth") {
     return (
-      <input
-        type="text"
-        placeholder="Scopes (space-separated, optional)"
-        value={state.scopes}
-        onChange={(e) => setField("scopes", e.target.value)}
-        data-mcp-auth-field="oauth-scopes"
-      />
+      <div>
+        <label htmlFor={ids.scopes} data-mcp-auth-field-label="oauth-scopes">
+          OAuth scopes
+        </label>
+        <input
+          id={ids.scopes}
+          type="text"
+          placeholder="Scopes (space-separated, optional)"
+          value={state.scopes}
+          onChange={(e) => setField("scopes", e.target.value)}
+          data-mcp-auth-field="oauth-scopes"
+        />
+      </div>
     );
   }
 

package/src/primitives/addForm/McpAddFormError.tsx

@@ -2,6 +2,7 @@ import {
   type ComponentPropsWithoutRef,
   type ComponentRef,
   forwardRef,
+  isValidElement,
 } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useAddForm } from "./context";
@@ -15,13 +16,26 @@ export const McpAddFormPrimitiveError = forwardRef<
   McpAddFormPrimitiveError.Element,
   McpAddFormPrimitiveError.Props
 >((props, ref) => {
-  const { state } = useAddForm();
+  const { state, ids } = useAddForm();
   if (!state.error) return null;
-  return (
-    <Primitive.div {...props} ref={ref}>
+  const childId =
+    props.asChild && isValidElement<{ id?: string }>(props.children)
+      ? props.children.props.id
+      : undefined;
+  const customId = childId ?? props.id;
+  const needsDescriptionWrapper =
+    customId !== undefined && customId !== ids.error;
+  const error = (
+    <Primitive.div
+      {...props}
+      id={needsDescriptionWrapper ? props.id : ids.error}
+      role={props.role ?? "alert"}
+      ref={ref}
+    >
       {props.children ?? state.error}
     </Primitive.div>
   );
+  return needsDescriptionWrapper ? <div id={ids.error}>{error}</div> : error;
 });
 
 McpAddFormPrimitiveError.displayName = "McpAddFormPrimitive.Error";

package/src/primitives/addForm/McpAddFormNameField.tsx

@@ -18,12 +18,24 @@ export const McpAddFormPrimitiveNameField = forwardRef<
   McpAddFormPrimitiveNameField.Element,
   McpAddFormPrimitiveNameField.Props
 >((props, ref) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
   return (
     <Primitive.input
       type="text"
       placeholder="Name"
       {...props}
+      aria-invalid={
+        props["aria-invalid"] ??
+        (state.errorField === "name" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "name" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
       ref={ref}
       value={state.name}
       onChange={(e) => setField("name", e.target.value)}

package/src/primitives/addForm/McpAddFormRoot.tsx

@@ -4,12 +4,17 @@ import {
   type FormEventHandler,
   forwardRef,
   useCallback,
+  useId,
   useMemo,
   useState,
 } from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { useAui } from "@assistant-ui/store";
-import { AddFormContext, type AddFormState } from "./context";
+import {
+  AddFormContext,
+  type AddFormFieldIds,
+  type AddFormState,
+} from "./context";
 import type { MCPAuthConfig } from "../../mcp-scope";
 import { invokeMcpCallback } from "../../utils/invokeMcpCallback";
 
@@ -21,6 +26,7 @@ const INITIAL: AddFormState = {
   scopes: "",
   submitting: false,
   error: null,
+  errorField: null,
 };
 
 function validateUrl(raw: string): { url: string } | { error: string } {
@@ -54,11 +60,30 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   McpAddFormPrimitiveRoot.Props
 >(({ onSubmitted, onCancel, ...props }, ref) => {
   const aui = useAui();
+  const formId = useId();
   const [state, setState] = useState<AddFormState>(INITIAL);
+  const ids = useMemo<AddFormFieldIds>(
+    () => ({
+      bearerToken: `${formId}-bearer-token`,
+      scopes: `${formId}-oauth-scopes`,
+      error: `${formId}-error`,
+    }),
+    [formId],
+  );
 
   const setField = useCallback(
     <K extends keyof AddFormState>(key: K, value: AddFormState[K]) => {
-      setState((prev) => ({ ...prev, [key]: value }));
+      setState((prev) => {
+        const clearsError =
+          prev.errorField === "form" ||
+          prev.errorField === key ||
+          (key === "authType" && prev.errorField === "bearerToken");
+        return {
+          ...prev,
+          [key]: value,
+          ...(clearsError ? { error: null, errorField: null } : {}),
+        };
+      });
     },
     [],
   );
@@ -87,19 +112,36 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   const submit = useCallback(async () => {
     if (state.submitting) return;
     if (!state.name.trim()) {
-      setState((p) => ({ ...p, error: "Name is required" }));
+      setState((p) => ({
+        ...p,
+        error: "Name is required",
+        errorField: "name",
+      }));
       return;
     }
     if (state.authType === "bearer" && !state.bearerToken.trim()) {
-      setState((p) => ({ ...p, error: "Bearer token is required" }));
+      setState((p) => ({
+        ...p,
+        error: "Bearer token is required",
+        errorField: "bearerToken",
+      }));
       return;
     }
     const urlResult = validateUrl(state.url);
     if ("error" in urlResult) {
-      setState((p) => ({ ...p, error: urlResult.error }));
+      setState((p) => ({
+        ...p,
+        error: urlResult.error,
+        errorField: "url",
+      }));
       return;
     }
-    setState((p) => ({ ...p, submitting: true, error: null }));
+    setState((p) => ({
+      ...p,
+      submitting: true,
+      error: null,
+      errorField: null,
+    }));
     try {
       const id = await aui.mcp.addCustomServer({
         name: state.name.trim(),
@@ -113,6 +155,7 @@ export const McpAddFormPrimitiveRoot = forwardRef<
         ...p,
         submitting: false,
         error: err instanceof Error ? err.message : String(err),
+        errorField: "form",
       }));
     }
   }, [aui, buildAuth, onSubmitted, state]);
@@ -123,8 +166,8 @@ export const McpAddFormPrimitiveRoot = forwardRef<
   }, [onCancel]);
 
   const value = useMemo(
-    () => ({ state, setField, reset, submit, cancel }),
-    [state, setField, reset, submit, cancel],
+    () => ({ state, ids, setField, reset, submit, cancel }),
+    [state, ids, setField, reset, submit, cancel],
   );
 
   const onFormSubmit: FormEventHandler<HTMLFormElement> = (e) => {

package/src/primitives/addForm/McpAddFormUrlField.tsx

@@ -18,13 +18,24 @@ export const McpAddFormPrimitiveUrlField = forwardRef<
   McpAddFormPrimitiveUrlField.Element,
   McpAddFormPrimitiveUrlField.Props
 >((props, ref) => {
-  const { state, setField } = useAddForm();
+  const { state, ids, setField } = useAddForm();
   return (
     <Primitive.input
       type="url"
       inputMode="url"
       placeholder="https://example.com/mcp"
       {...props}
+      aria-invalid={
+        props["aria-invalid"] ?? (state.errorField === "url" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "url" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
       ref={ref}
       value={state.url}
       onChange={(e) => setField("url", e.target.value)}

package/src/primitives/addForm/context.tsx

@@ -3,6 +3,14 @@ import type { MCPAuthConfig } from "../../mcp-scope";
 
 export type AddFormAuthType = MCPAuthConfig["type"];
 
+export type AddFormErrorField = "name" | "url" | "bearerToken" | "form" | null;
+
+export type AddFormFieldIds = {
+  bearerToken: string;
+  scopes: string;
+  error: string;
+};
+
 export type AddFormState = {
   name: string;
   url: string;
@@ -11,10 +19,12 @@ export type AddFormState = {
   scopes: string;
   submitting: boolean;
   error: string | null;
+  errorField: AddFormErrorField;
 };
 
 export type AddFormContextValue = {
   state: AddFormState;
+  ids: AddFormFieldIds;
   setField: <K extends keyof AddFormState>(
     key: K,
     value: AddFormState[K],