@assistant-ui/react-mcp 0.1.17 → 0.1.19

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

@@ -0,0 +1,310 @@
+// @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 { McpAddFormPrimitiveBearerTokenField as BearerTokenField } from "./McpAddFormBearerTokenField";
+import { McpAddFormPrimitiveScopesField as ScopesField } from "./McpAddFormScopesField";
+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>
+        <label>
+          Permissions
+          <ScopesField />
+        </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();
+    expect(screen.getByRole("textbox", { name: "Permissions" })).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("associates a missing token error with a custom bearer token field", () => {
+    render(
+      <Root aria-label="Add server">
+        <NameField aria-label="Name" />
+        <AuthSelect aria-label="Auth" />
+        <AuthFields>
+          {({ authType }) =>
+            authType === "bearer" ? (
+              <>
+                <label htmlFor="api-key">API key</label>
+                <BearerTokenField
+                  id="api-key"
+                  aria-describedby="api-key-hint"
+                />
+                <p id="api-key-hint">Paste the key from your dashboard.</p>
+              </>
+            ) : null
+          }
+        </AuthFields>
+        <ErrorMessage />
+      </Root>,
+    );
+    fireEvent.change(screen.getByRole("textbox", { name: "Name" }), {
+      target: { value: "Docs" },
+    });
+    fireEvent.change(screen.getByRole("combobox", { name: "Auth" }), {
+      target: { value: "bearer" },
+    });
+    const field = screen.getByLabelText("API key");
+    fireEvent.submit(screen.getByRole("form"));
+    const error = screen.getByRole("alert");
+    expect(error.textContent).toBe("Bearer token is required");
+    expect(field.getAttribute("aria-invalid")).toBe("true");
+    expect(field.getAttribute("aria-describedby")).toBe(
+      `api-key-hint ${error.id}`,
+    );
+    fireEvent.change(field, { target: { value: "secret" } });
+    expect(screen.queryByRole("alert")).toBeNull();
+    expect(field.hasAttribute("aria-invalid")).toBe(false);
+    expect(field.getAttribute("aria-describedby")).toBe("api-key-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

@@ -1,11 +1,14 @@
 import type { FC } from "react";
+import { McpAddFormPrimitiveBearerTokenField } from "./McpAddFormBearerTokenField";
+import { McpAddFormPrimitiveScopesField } from "./McpAddFormScopesField";
 import { type AddFormAuthType, useAddForm } from "./context";
 
 export namespace McpAddFormPrimitiveAuthFields {
   export type Props = {
     /**
      * Optional render override. Receives the current auth type so apps can render
-     * fully custom inputs. Defaults to a minimal built-in for bearer / oauth.
+     * fully custom inputs, bound to the form through `BearerTokenField` and
+     * `ScopesField`. Defaults to a minimal built-in for bearer / oauth.
      */
     children?: FC<{ authType: AddFormAuthType }>;
   };
@@ -14,7 +17,7 @@ export namespace McpAddFormPrimitiveAuthFields {
 export const McpAddFormPrimitiveAuthFields: FC<
   McpAddFormPrimitiveAuthFields.Props
 > = ({ children }) => {
-  const { state, setField } = useAddForm();
+  const { state, ids } = useAddForm();
 
   if (children) {
     const Render = children;
@@ -23,25 +26,32 @@ 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>
+        <McpAddFormPrimitiveBearerTokenField
+          id={ids.bearerToken}
+          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>
+        <McpAddFormPrimitiveScopesField
+          id={ids.scopes}
+          data-mcp-auth-field="oauth-scopes"
+        />
+      </div>
     );
   }
 

package/src/primitives/addForm/McpAddFormBearerTokenField.tsx

@@ -0,0 +1,46 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  forwardRef,
+} from "react";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useAddForm } from "./context";
+
+export namespace McpAddFormPrimitiveBearerTokenField {
+  export type Element = ComponentRef<typeof Primitive.input>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.input>,
+    "value" | "onChange" | "type"
+  >;
+}
+
+export const McpAddFormPrimitiveBearerTokenField = forwardRef<
+  McpAddFormPrimitiveBearerTokenField.Element,
+  McpAddFormPrimitiveBearerTokenField.Props
+>((props, ref) => {
+  const { state, ids, setField } = useAddForm();
+  return (
+    <Primitive.input
+      type="password"
+      {...props}
+      aria-invalid={
+        props["aria-invalid"] ??
+        (state.errorField === "bearerToken" ? true : undefined)
+      }
+      aria-describedby={
+        [
+          props["aria-describedby"],
+          state.errorField === "bearerToken" ? ids.error : null,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined
+      }
+      ref={ref}
+      value={state.bearerToken}
+      onChange={(e) => setField("bearerToken", e.target.value)}
+    />
+  );
+});
+
+McpAddFormPrimitiveBearerTokenField.displayName =
+  "McpAddFormPrimitive.BearerTokenField";

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.test.tsx

@@ -7,6 +7,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import type { ComponentProps } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
@@ -20,12 +21,18 @@ vi.mock("@assistant-ui/store", async (importOriginal) => ({
   }),
 }));
 
+import { McpAddFormPrimitiveAuthFields } from "./McpAddFormAuthFields";
+import { McpAddFormPrimitiveAuthSelect } from "./McpAddFormAuthSelect";
+import { McpAddFormPrimitiveBearerTokenField } from "./McpAddFormBearerTokenField";
 import { McpAddFormPrimitiveError } from "./McpAddFormError";
 import { McpAddFormPrimitiveNameField } from "./McpAddFormNameField";
 import { McpAddFormPrimitiveRoot } from "./McpAddFormRoot";
+import { McpAddFormPrimitiveScopesField } from "./McpAddFormScopesField";
 import { McpAddFormPrimitiveSubmit } from "./McpAddFormSubmit";
 import { McpAddFormPrimitiveUrlField } from "./McpAddFormUrlField";
 
+const CustomInput = (props: ComponentProps<"input">) => <input {...props} />;
+
 describe("McpAddFormPrimitiveRoot", () => {
   beforeEach(() => {
     mocks.addCustomServer.mockReset();
@@ -37,6 +44,64 @@ describe("McpAddFormPrimitiveRoot", () => {
     vi.restoreAllMocks();
   });
 
+  it.each([
+    [
+      "bearer",
+      McpAddFormPrimitiveBearerTokenField,
+      "secret",
+      { type: "bearer", token: "secret" },
+    ],
+    [
+      "oauth",
+      McpAddFormPrimitiveScopesField,
+      "read, write",
+      { type: "oauth", scopes: ["read", "write"] },
+    ],
+  ] as const)(
+    "submits a custom %s input bound through its field part",
+    async (authType, Field, value, auth) => {
+      render(
+        <McpAddFormPrimitiveRoot>
+          <McpAddFormPrimitiveNameField aria-label="Name" />
+          <McpAddFormPrimitiveUrlField aria-label="URL" />
+          <McpAddFormPrimitiveAuthSelect aria-label="Auth" />
+          <McpAddFormPrimitiveAuthFields>
+            {({ authType: current }) =>
+              current === authType ? (
+                <Field asChild>
+                  <CustomInput aria-label="Credential" />
+                </Field>
+              ) : null
+            }
+          </McpAddFormPrimitiveAuthFields>
+          <McpAddFormPrimitiveError />
+          <McpAddFormPrimitiveSubmit>Submit</McpAddFormPrimitiveSubmit>
+        </McpAddFormPrimitiveRoot>,
+      );
+
+      fireEvent.change(screen.getByLabelText("Name"), {
+        target: { value: "Docs" },
+      });
+      fireEvent.change(screen.getByLabelText("URL"), {
+        target: { value: "https://example.com/mcp" },
+      });
+      fireEvent.change(screen.getByLabelText("Auth"), {
+        target: { value: authType },
+      });
+      fireEvent.change(screen.getByLabelText("Credential"), {
+        target: { value },
+      });
+      fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+      await waitFor(() => expect(mocks.addCustomServer).toHaveBeenCalledOnce());
+      expect(mocks.addCustomServer).toHaveBeenCalledWith({
+        name: "Docs",
+        url: "https://example.com/mcp",
+        auth,
+      });
+    },
+  );
+
   it.each(["throws", "rejects"] as const)(
     "does not turn a successful add into an error when onSubmitted %s",
     async (mode) => {