feat(auth): login a11y + 1Password username/password field metadata

Password managers (1Password etc.) failed to recognize the login form
because the identifier field used autocomplete="email" instead of
"username". Fix both real auth forms and close accessibility gaps.

- Auth.tsx + InviteLanding.tsx: identifier input autocomplete
  "email" -> "username" (keeps type="email", the recommended pattern).
- Add required + aria-required to email/password (and name on sign-up).
- Wrap auth errors in role="alert" aria-live="polite" with an id, and
  reference it from inputs via aria-describedby; toggle aria-invalid
  when an error is shown.
- InviteLanding: add namespaced stable ids (invite-email/password/name)
  + htmlFor to match Auth.tsx and ensure programmatic labels.
- Real <form method/action> and the password field lifetime are
  unchanged, preserving "save password?" heuristics.
- Add ui vitest coverage (Auth.test.tsx + InviteLanding.test.tsx)
  asserting autocomplete/id/required and the alert error region.

InviteUxLab.tsx left untouched: it is a static, read-only design
sandbox (readOnly inputs, no form action/submit) not surfaced to
password managers, so the functional fix does not apply there.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ui/src/pages/Auth.test.tsx

@@ -0,0 +1,205 @@
+// @vitest-environment jsdom
+
+import { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AuthPage } from "./Auth";
+
+const getSessionMock = vi.hoisted(() => vi.fn());
+const signInEmailMock = vi.hoisted(() => vi.fn());
+const signUpEmailMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../api/auth", () => ({
+  authApi: {
+    getSession: () => getSessionMock(),
+    signInEmail: (input: unknown) => signInEmailMock(input),
+    signUpEmail: (input: unknown) => signUpEmailMock(input),
+  },
+}));
+
+// The ASCII art animation drives a canvas/requestAnimationFrame loop that adds
+// nothing to these assertions, so stub it out.
+vi.mock("@/components/AsciiArtAnimation", () => ({
+  AsciiArtAnimation: () => null,
+}));
+
+// The router's navigate wrapper reads the active company prefix from context.
+vi.mock("@/context/CompanyContext", () => ({
+  useCompany: () => ({
+    selectedCompany: null,
+    selectedCompanyId: null,
+    companies: [],
+    selectionSource: "manual",
+    loading: false,
+    error: null,
+    setSelectedCompanyId: vi.fn(),
+    reloadCompanies: vi.fn(),
+    createCompany: vi.fn(),
+  }),
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function act(callback: () => void | Promise<void>) {
+  let result: void | Promise<void>;
+  flushSync(() => {
+    result = callback();
+  });
+  await result;
+}
+
+async function flushReact() {
+  await act(async () => {
+    await Promise.resolve();
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+  });
+  flushSync(() => {});
+}
+
+function renderAuthPage(container: HTMLElement) {
+  const root = createRoot(container);
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return { root, queryClient };
+}
+
+describe("AuthPage", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    getSessionMock.mockResolvedValue(null);
+    signInEmailMock.mockResolvedValue(undefined);
+    signUpEmailMock.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    container.remove();
+    document.body.innerHTML = "";
+    vi.clearAllMocks();
+  });
+
+  async function mount() {
+    const { root, queryClient } = renderAuthPage(container);
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/auth"]}>
+          <QueryClientProvider client={queryClient}>
+            <Routes>
+              <Route path="/auth" element={<AuthPage />} />
+            </Routes>
+          </QueryClientProvider>
+        </MemoryRouter>,
+      );
+    });
+    await flushReact();
+    await flushReact();
+    return root;
+  }
+
+  it("exposes password-manager metadata and a11y attributes on the sign-in form", async () => {
+    const root = await mount();
+
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement;
+
+    expect(emailInput).not.toBeNull();
+    expect(passwordInput).not.toBeNull();
+
+    // 1Password / password-manager recognition: identifier field is "username".
+    expect(emailInput.getAttribute("autocomplete")).toBe("username");
+    expect(emailInput.getAttribute("type")).toBe("email");
+    expect(passwordInput.getAttribute("autocomplete")).toBe("current-password");
+
+    // Stable ids/names for both inputs.
+    expect(emailInput.id).toBe("email");
+    expect(passwordInput.id).toBe("password");
+
+    // Required + programmatic required state.
+    expect(emailInput.required).toBe(true);
+    expect(emailInput.getAttribute("aria-required")).toBe("true");
+    expect(passwordInput.required).toBe(true);
+    expect(passwordInput.getAttribute("aria-required")).toBe("true");
+
+    // Programmatic labels.
+    expect(container.querySelector('label[for="email"]')).not.toBeNull();
+    expect(container.querySelector('label[for="password"]')).not.toBeNull();
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
+  it("uses new-password autocomplete in sign-up mode", async () => {
+    const root = await mount();
+
+    const createOne = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Create one",
+    );
+    expect(createOne).not.toBeNull();
+
+    await act(async () => {
+      createOne?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flushReact();
+
+    const nameInput = container.querySelector('input[name="name"]') as HTMLInputElement;
+    const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement;
+    expect(nameInput).not.toBeNull();
+    expect(nameInput.getAttribute("autocomplete")).toBe("name");
+    expect(nameInput.required).toBe(true);
+    expect(passwordInput.getAttribute("autocomplete")).toBe("new-password");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
+  it("renders auth errors in an assertive alert region referenced by the inputs", async () => {
+    const root = await mount();
+
+    const inputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value",
+    )?.set;
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement;
+
+    await act(async () => {
+      inputValueSetter!.call(emailInput, "jane@example.com");
+      emailInput.dispatchEvent(new Event("input", { bubbles: true }));
+      inputValueSetter!.call(passwordInput, "wrongpass");
+      passwordInput.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    signInEmailMock.mockRejectedValueOnce(new Error("Invalid email or password"));
+
+    const form = container.querySelector("form") as HTMLFormElement;
+    await act(async () => {
+      form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    });
+    await flushReact();
+    await flushReact();
+
+    const alert = container.querySelector('[role="alert"]') as HTMLElement;
+    expect(alert).not.toBeNull();
+    expect(alert.getAttribute("aria-live")).toBe("polite");
+    expect(alert.textContent).toContain("Invalid email or password");
+
+    const errorId = alert.id;
+    expect(errorId.length).toBeGreaterThan(0);
+    expect(emailInput.getAttribute("aria-describedby")).toBe(errorId);
+    expect(emailInput.getAttribute("aria-invalid")).toBe("true");
+    expect(passwordInput.getAttribute("aria-describedby")).toBe(errorId);
+    expect(passwordInput.getAttribute("aria-invalid")).toBe("true");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});

ui/src/pages/Auth.tsx

@@ -19,6 +19,7 @@ export function AuthPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const errorId = "auth-error";
 
   const nextPath = useMemo(
     () => searchParams.get("next") || getRememberedInvitePath() || "/",
@@ -115,6 +116,10 @@ export function AuthPage() {
                   value={name}
                   onChange={(event) => setName(event.target.value)}
                   autoComplete="name"
+                  required
+                  aria-required="true"
+                  aria-invalid={error ? true : undefined}
+                  aria-describedby={error ? errorId : undefined}
                   autoFocus
                 />
               </div>
@@ -128,7 +133,11 @@ export function AuthPage() {
                 type="email"
                 value={email}
                 onChange={(event) => setEmail(event.target.value)}
-                autoComplete="email"
+                autoComplete="username"
+                required
+                aria-required="true"
+                aria-invalid={error ? true : undefined}
+                aria-describedby={error ? errorId : undefined}
                 autoFocus={mode === "sign_in"}
               />
             </div>
@@ -142,9 +151,17 @@ export function AuthPage() {
                 value={password}
                 onChange={(event) => setPassword(event.target.value)}
                 autoComplete={mode === "sign_in" ? "current-password" : "new-password"}
+                required
+                aria-required="true"
+                aria-invalid={error ? true : undefined}
+                aria-describedby={error ? errorId : undefined}
               />
             </div>
-            {error && <p className="text-xs text-destructive">{error}</p>}
+            {error && (
+              <p id={errorId} role="alert" aria-live="polite" className="text-xs text-destructive">
+                {error}
+              </p>
+            )}
             <Button
               type="submit"
               disabled={mutation.isPending}

ui/src/pages/InviteLanding.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
+import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
@@ -61,11 +61,20 @@ vi.mock("@/context/CompanyContext", () => ({
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
+async function act(callback: () => void | Promise<void>) {
+  let result: void | Promise<void>;
+  flushSync(() => {
+    result = callback();
+  });
+  await result;
+}
+
 async function flushReact() {
   await act(async () => {
     await Promise.resolve();
     await new Promise((resolve) => window.setTimeout(resolve, 0));
   });
+  flushSync(() => {});
 }
 
 describe("InviteLandingPage", () => {
@@ -205,6 +214,126 @@ describe("InviteLandingPage", () => {
     });
   });
 
+  it("carries password-manager metadata and a11y attributes on the invite auth form", async () => {
+    const root = createRoot(container);
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/invite/pcp_invite_test"]}>
+          <QueryClientProvider client={queryClient}>
+            <Routes>
+              <Route path="/invite/:token" element={<InviteLandingPage />} />
+            </Routes>
+          </QueryClientProvider>
+        </MemoryRouter>,
+      );
+    });
+    await flushReact();
+    await flushReact();
+
+    const nameInput = container.querySelector('input[name="name"]') as HTMLInputElement;
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement;
+    expect(nameInput).not.toBeNull();
+    expect(emailInput).not.toBeNull();
+    expect(passwordInput).not.toBeNull();
+
+    // Default invite mode is sign-up.
+    expect(emailInput.getAttribute("autocomplete")).toBe("username");
+    expect(emailInput.getAttribute("type")).toBe("email");
+    expect(passwordInput.getAttribute("autocomplete")).toBe("new-password");
+    expect(nameInput.getAttribute("autocomplete")).toBe("name");
+
+    // Namespaced stable ids.
+    expect(emailInput.id).toBe("invite-email");
+    expect(passwordInput.id).toBe("invite-password");
+    expect(nameInput.id).toBe("invite-name");
+
+    // Required + programmatic required state.
+    expect(emailInput.required).toBe(true);
+    expect(emailInput.getAttribute("aria-required")).toBe("true");
+    expect(passwordInput.required).toBe(true);
+    expect(passwordInput.getAttribute("aria-required")).toBe("true");
+    expect(nameInput.required).toBe(true);
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
+  it("renders invite auth errors in an alert region referenced by the inputs", async () => {
+    signInEmailMock.mockRejectedValue(
+      Object.assign(new Error("Invalid email or password"), {
+        code: "INVALID_EMAIL_OR_PASSWORD",
+        status: 401,
+      }),
+    );
+
+    const root = createRoot(container);
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/invite/pcp_invite_test"]}>
+          <QueryClientProvider client={queryClient}>
+            <Routes>
+              <Route path="/invite/:token" element={<InviteLandingPage />} />
+            </Routes>
+          </QueryClientProvider>
+        </MemoryRouter>,
+      );
+    });
+    await flushReact();
+    await flushReact();
+
+    const inputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+
+    const existingAccountButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "I already have an account",
+    );
+    await act(async () => {
+      existingAccountButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flushReact();
+
+    const emailInput = container.querySelector('input[name="email"]') as HTMLInputElement;
+    const passwordInput = container.querySelector('input[name="password"]') as HTMLInputElement;
+
+    await act(async () => {
+      inputValueSetter!.call(emailInput, "jane@example.com");
+      emailInput.dispatchEvent(new Event("input", { bubbles: true }));
+      inputValueSetter!.call(passwordInput, "wrongpass");
+      passwordInput.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    const authForm = container.querySelector('[data-testid="invite-inline-auth"]') as HTMLFormElement;
+    await act(async () => {
+      authForm.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+    });
+    await flushReact();
+    await flushReact();
+
+    const alert = container.querySelector('[role="alert"]') as HTMLElement;
+    expect(alert).not.toBeNull();
+    expect(alert.getAttribute("aria-live")).toBe("polite");
+
+    const errorId = alert.id;
+    expect(errorId.length).toBeGreaterThan(0);
+    expect(emailInput.getAttribute("aria-describedby")).toBe(errorId);
+    expect(emailInput.getAttribute("aria-invalid")).toBe("true");
+    expect(passwordInput.getAttribute("aria-describedby")).toBe(errorId);
+    expect(passwordInput.getAttribute("aria-invalid")).toBe("true");
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+
   it("turns invalid sign-in responses into a clear invite-specific message", async () => {
     signInEmailMock.mockRejectedValue(
       Object.assign(new Error("Invalid email or password"), {

ui/src/pages/InviteLanding.tsx

@@ -229,6 +229,7 @@ export function InviteLandingPage() {
   const [error, setError] = useState<string | null>(null);
   const [authFeedback, setAuthFeedback] = useState<AuthFeedback | null>(null);
   const [autoAcceptStarted, setAutoAcceptStarted] = useState(false);
+  const authErrorId = "invite-auth-error";
 
   const healthQuery = useQuery({
     queryKey: queryKeys.health,
@@ -706,9 +707,10 @@ export function InviteLandingPage() {
                   data-testid="invite-inline-auth"
                 >
                   {authMode === "sign_up" ? (
-                    <label className="block text-sm">
+                    <label className="block text-sm" htmlFor="invite-name">
                       <span className="mb-1 block text-zinc-400">Name</span>
                       <input
+                        id="invite-name"
                         name="name"
                         className={fieldClassName}
                         value={name}
@@ -717,13 +719,18 @@ export function InviteLandingPage() {
                           setAuthFeedback(null);
                         }}
                         autoComplete="name"
+                        required
+                        aria-required="true"
+                        aria-invalid={authFeedback?.tone === "error" ? true : undefined}
+                        aria-describedby={authFeedback ? authErrorId : undefined}
                         autoFocus
                       />
                     </label>
                   ) : null}
-                  <label className="block text-sm">
+                  <label className="block text-sm" htmlFor="invite-email">
                     <span className="mb-1 block text-zinc-400">Email</span>
                     <input
+                      id="invite-email"
                       name="email"
                       type="email"
                       className={fieldClassName}
@@ -732,13 +739,18 @@ export function InviteLandingPage() {
                         setEmail(event.target.value);
                         setAuthFeedback(null);
                       }}
-                      autoComplete="email"
+                      autoComplete="username"
+                      required
+                      aria-required="true"
+                      aria-invalid={authFeedback?.tone === "error" ? true : undefined}
+                      aria-describedby={authFeedback ? authErrorId : undefined}
                       autoFocus={authMode === "sign_in"}
                     />
                   </label>
-                  <label className="block text-sm">
+                  <label className="block text-sm" htmlFor="invite-password">
                     <span className="mb-1 block text-zinc-400">Password</span>
                     <input
+                      id="invite-password"
                       name="password"
                       type="password"
                       className={fieldClassName}
@@ -748,10 +760,17 @@ export function InviteLandingPage() {
                         setAuthFeedback(null);
                       }}
                       autoComplete={authMode === "sign_in" ? "current-password" : "new-password"}
+                      required
+                      aria-required="true"
+                      aria-invalid={authFeedback?.tone === "error" ? true : undefined}
+                      aria-describedby={authFeedback ? authErrorId : undefined}
                     />
                   </label>
                   {authFeedback ? (
                     <p
+                      id={authErrorId}
+                      role="alert"
+                      aria-live="polite"
                       className={`text-xs ${
                         authFeedback.tone === "info" ? "text-amber-300" : "text-red-400"
                       }`}