From 139cdebe510d7ba704e780586b56d2c26b0d876c Mon Sep 17 00:00:00 2001 From: Dotta <34892728+cryppadotta@users.noreply.github.com> Date: Sat, 6 Jun 2026 11:40:59 -0500 Subject: [PATCH] [codex] Improve login accessibility and password-manager metadata (#7660) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - Human operators sign in through the main auth page and through invite acceptance flows. > - Those forms need to be understandable to assistive technology and password managers. > - The login fields did not consistently expose stable names, ids, autocomplete hints, required state, and error relationships. > - That made it easier for password managers such as 1Password to miss the username/password pairing and harder for screen readers to associate validation errors. > - This pull request tightens the auth and invite form metadata while keeping the visible flow unchanged. > - The benefit is a smoother login and invite-acceptance experience without changing server-side auth behavior. ## Linked Issues or Issue Description No matching GitHub issue found after searching `login accessibility 1Password username password` in `paperclipai/paperclip` issues and PRs. ## What happened? Login and invite auth fields were missing password-manager and accessibility metadata, including stable field identifiers, autocomplete hints, required semantics, and error-region relationships. That made it easier for password managers such as 1Password to miss the username/password pairing and harder for screen readers to associate validation errors. ## Expected behavior Auth fields should be discoverable as username/password fields, distinguish sign-in and sign-up password autocomplete behavior, and expose validation errors through an alert region referenced by invalid inputs. ## Steps to reproduce 1. Open the main `/auth` form or an invite auth form. 2. Inspect the email, password, and sign-up name field attributes. 3. Trigger a validation/auth error and inspect whether invalid inputs reference the displayed error text. ## Paperclip version or commit Prior to this PR on `master`. ## Deployment mode Board UI, all deployments using these forms. ## What Changed - Added stable `id`, `name`, `required`, `aria-required`, `aria-invalid`, `aria-describedby`, and autocomplete metadata to the main auth form. - Added invite auth field metadata so invite sign-up uses `new-password`, invite sign-in uses `current-password`, and the email field is recognized as `username`. - Added alert regions for auth and invite auth errors so invalid fields can reference the displayed error text. - Added focused Vitest coverage for the main auth form and invite auth flow metadata/error behavior. ## Verification - `pnpm exec vitest run ui/src/pages/Auth.test.tsx ui/src/pages/InviteLanding.test.tsx` passes: 2 files, 16 tests. - `pnpm build` passes locally. - PR CI is green on head `3531d1900`, including Build, Canary Dry Run, Typecheck + Release Registry, e2e, general/serialized test shards, policy, commitperclip review, security checks, and aggregate `verify`. - Greptile Review is passing on head `3531d1900`; the P2 alert/live-region review thread was fixed and resolved. - Rebasing onto `public-gh/master` completed cleanly; current base ref is `e50666e4c`. - Confirmed the branch diff does not include `pnpm-lock.yaml`, `.github/workflows`, migrations, or design/image assets. - No screenshots attached: this is a form metadata/accessibility change, and the task specifically asked not to add design screenshots or images unless they are part of the work. ## Risks Low risk. The change is limited to UI form attributes and error wiring. Main risk is password-manager/browser interpretation differences, covered by asserting the emitted DOM metadata rather than a specific vendor integration. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex, GPT-5-based coding model with repository tool use and shell execution. Exact hosted model ID/context window are not exposed in this runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Claude Opus 4.8 --- ui/src/pages/Auth.test.tsx | 205 ++++++++++++++++++++++++++++ ui/src/pages/Auth.tsx | 21 ++- ui/src/pages/InviteLanding.test.tsx | 131 +++++++++++++++++- ui/src/pages/InviteLanding.tsx | 26 +++- 4 files changed, 376 insertions(+), 7 deletions(-) create mode 100644 ui/src/pages/Auth.test.tsx diff --git a/ui/src/pages/Auth.test.tsx b/ui/src/pages/Auth.test.tsx new file mode 100644 index 00000000..39682c34 --- /dev/null +++ b/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) { + let result: void | Promise = undefined; + 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( + + + + } /> + + + , + ); + }); + 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.hasAttribute("aria-live")).toBe(false); + 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(); + }); + }); +}); diff --git a/ui/src/pages/Auth.tsx b/ui/src/pages/Auth.tsx index 56e67fc1..fc2f7a84 100644 --- a/ui/src/pages/Auth.tsx +++ b/ui/src/pages/Auth.tsx @@ -19,6 +19,7 @@ export function AuthPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(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 /> @@ -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"} /> @@ -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} /> - {error &&

{error}

} + {error && ( + + )}