🎨 Changed `signup-form` email input to use 'email' type #25648

kevinansfield · 2025-12-08T11:47:40Z

closes https://linear.app/ghost/issue/BER-3092/

using type="email" improves usability by allowing browsers to auto-fill and display an email-focused keyboard on mobile
added noValidate={true} to disable browsers built-in validation as we already have custom validation handling

coderabbitai · 2025-12-08T11:47:54Z

Walkthrough

FormView now generates an errorMessageId via React.useId and passes it into the Form component. FormProps and the Form signature accept an optional errorMessageId?: string. The form element uses noValidate={true}. The email input type changed from text to email, gained autoComplete="email", and conditionally includes aria-describedby={errorMessageId} and aria-invalid when an error exists. Error paragraphs render with id={errorMessageId} and retain data-testid="error-message". E2E tests were updated to use toHaveText() for three error-message assertions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Check apps/signup-form/src/components/pages/form-view.tsx for correct React.useId usage and that the generated id is passed to Form.
Verify FormProps typing and Form signature accept and forward errorMessageId without breaking existing props.
Confirm aria-describedby and aria-invalid are applied only when errors exist and reference the correct id.
Validate noValidate={true} aligns with intended validation flow.
Ensure changing input type to email and autoComplete="email" does not conflict with validation or tests.
Review apps/signup-form/test/e2e/form.test.ts changes to toHaveText() to ensure assertions target the same elements and semantics.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: converting the email input from text type to email type, which is the primary focus of the PR.
Description check	✅ Passed	The description is directly related to the changeset, explaining the rationale for using type='email' and the addition of noValidate to disable browser validation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch signup-form-email-input

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ca876fb and 278ee2f.

📒 Files selected for processing (2)

apps/signup-form/src/components/pages/form-view.tsx (4 hunks)
apps/signup-form/test/e2e/form.test.ts (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

apps/signup-form/test/e2e/form.test.ts
apps/signup-form/src/components/pages/form-view.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: Unit tests (Node 22.18.0)
GitHub Check: Signup-form tests
GitHub Check: Build & Push

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/signup-form/src/components/pages/form-view.tsx (1)

62-68: Email input semantics and validation configuration look correct

Adding noValidate={true} on the form while switching the field to type="email" cleanly achieves the PR goal (better autofill/mobile keyboards) without letting native browser validation interfere with your existing custom validation flow in submitHandler/onSubmit. As an optional follow‑up, consider wiring the input to the error message via something like aria-invalid={!!error} and aria-describedby on the input plus an id on the error <p> so that, with native validation disabled, assistive tech still gets a clear association between the field and its error state.

apps/signup-form/test/e2e/form.test.ts (1)

168-172: Switch to toHaveText strengthens error message assertions

Using await expect(errorMessage).toHaveText(...) for the invalid‑email, network‑error, and 4xx cases is a solid improvement over asserting on innerText(): you get Playwright’s auto‑waiting and clearer diagnostics while keeping the intent of the tests unchanged. If these strings are likely to evolve, you could optionally relax them to toContainText or a regex, but the current exact matches are perfectly fine if the copy is stable. Based on learnings, this aligns well with the recommended Playwright‑style assertions for e2e tests.

Also applies to: 205-208, 228-232

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6606ab7 and fe54b07.

📒 Files selected for processing (2)

apps/signup-form/src/components/pages/form-view.tsx (1 hunks)
apps/signup-form/test/e2e/form.test.ts (3 hunks)

🧰 Additional context used

🧠 Learnings (12)

📓 Common learnings

Learnt from: CR
Repo: TryGhost/Ghost PR: 0
File: apps/shade/AGENTS.md:0-0
Timestamp: 2025-11-26T11:05:59.314Z
Learning: For new UI components, prioritize comprehensive Storybook stories; add focused unit tests where they provide real value (e.g., hooks, utils, logic-heavy parts)

Learnt from: CR
Repo: TryGhost/Ghost PR: 0
File: e2e/AGENTS.md:0-0
Timestamp: 2025-11-24T17:29:43.865Z
Learning: Applies to e2e/**/*.test.ts : Use `getByTestId()` only when semantic locators are unavailable, and suggest adding `data-testid` to Ghost codebase when needed

Learnt from: CR
Repo: TryGhost/Ghost PR: 0
File: e2e/AGENTS.md:0-0
Timestamp: 2025-11-24T17:29:43.865Z
Learning: Applies to e2e/**/*.test.ts : Prefer semantic locators (`getByRole`, `getByLabel`, `getByText`) over test IDs and never use CSS selectors, XPath, nth-child, or class names

Learnt from: CR
Repo: TryGhost/Ghost PR: 0
File: e2e/AGENTS.md:0-0
Timestamp: 2025-11-24T17:29:43.865Z
Learning: Applies to e2e/**/*.test.ts : Never use CSS/XPath selectors - only use semantic locators or data-testid