Give builder fields persistent labels, treat description as optional, and validate save-progress email with a real form. #77

Merged
an.di merged 1 commits from adilallo/fix/CR-185-builder-inputs into main 2026-09-10 17:40:55 +00:00
Owner

Overview

Builder text fields were placeholder-only, name and description used opposite empty-state rules, and the save-progress email step accepted invalid addresses without a real form. This makes those inputs labelled for assistive tech, keeps name required and description optional, and gates email on native validity plus form submit. It also drops a dead workshop link and fixes a few builder copy errors.

Changes

  • TextInput / TextArea keep a programmatic label when the visible form header is off (sr-only + htmlFor); InputWithCounter wires htmlFor / id.
  • Create-flow name, description, and email steps pass real inputLabel copy; review edit modals and custom-method wizard fields are labelled the same way.
  • Name stays required (footer still needs a trimmed value). Description is optional, uses a textarea, and Confirm description stays enabled when empty.
  • Save-progress email is a real form: type="email", autocomplete="email", inputmode="email", checkValidity() / reportValidity(), Submit Email as type="submit". Whitespace-only and invalid addresses stay disabled.
  • Intro no longer links to a workshop that does not exist. Structure, upload, and custom-method copy get a short proofread.

Screenshots

How to Test

  1. npm run dev and open /create/informational. Confirm the intro is a single sentence with no workshop link.
  2. /create/community-name: the field is named “Community name” and required. Confirm name is disabled when empty/whitespace and enables after typing a name.
  3. /create/community-context: the field is a labelled optional textarea (“Community description”). Confirm description is enabled when empty. Type a short paragraph with a line break.
  4. /create/community-save: the field is named “Email address”. Invalid values (not-an-email) keep Submit Email disabled; user@example.com enables it. Enter submits via the form. Save Later stays a button, not submit.
  5. /create/community-structure: “Choose tags that describe…”. /create/community-upload: “This photo will be used…”.
  6. Final review: edit name and description modals still have labelled fields. Custom-method wizard step 2 textarea is labelled.
  7. Optional: Storybook TextPage Community Description / Community Save stories; npx vitest run tests/components tests/unit.

Notes

  • Description is optional on purpose (review already omits empty context). Name is not.
  • The workshop sentence was removed rather than pointed at /learn, because there is no workshop URL yet.
  • Custom-method wizard step 1 still has no extra label on the policy-name counter field; it would duplicate the modal title.
  • A Next.js hydration overlay from HeaderLockup can appear while typing in the create flow. That component is unchanged here.
## Overview Builder text fields were placeholder-only, name and description used opposite empty-state rules, and the save-progress email step accepted invalid addresses without a real form. This makes those inputs labelled for assistive tech, keeps name required and description optional, and gates email on native validity plus form submit. It also drops a dead workshop link and fixes a few builder copy errors. ## Changes - `TextInput` / `TextArea` keep a programmatic label when the visible form header is off (`sr-only` + `htmlFor`); `InputWithCounter` wires `htmlFor` / `id`. - Create-flow name, description, and email steps pass real `inputLabel` copy; review edit modals and custom-method wizard fields are labelled the same way. - Name stays required (footer still needs a trimmed value). Description is optional, uses a textarea, and Confirm description stays enabled when empty. - Save-progress email is a real form: `type="email"`, `autocomplete="email"`, `inputmode="email"`, `checkValidity()` / `reportValidity()`, Submit Email as `type="submit"`. Whitespace-only and invalid addresses stay disabled. - Intro no longer links to a workshop that does not exist. Structure, upload, and custom-method copy get a short proofread. ## Screenshots ## How to Test 1. `npm run dev` and open `/create/informational`. Confirm the intro is a single sentence with no workshop link. 2. `/create/community-name`: the field is named “Community name” and required. Confirm name is disabled when empty/whitespace and enables after typing a name. 3. `/create/community-context`: the field is a labelled optional textarea (“Community description”). Confirm description is enabled when empty. Type a short paragraph with a line break. 4. `/create/community-save`: the field is named “Email address”. Invalid values (`not-an-email`) keep Submit Email disabled; `user@example.com` enables it. Enter submits via the form. Save Later stays a button, not submit. 5. `/create/community-structure`: “Choose tags that describe…”. `/create/community-upload`: “This photo will be used…”. 6. Final review: edit name and description modals still have labelled fields. Custom-method wizard step 2 textarea is labelled. 7. Optional: Storybook `TextPage` Community Description / Community Save stories; `npx vitest run tests/components tests/unit`. ## Notes - Description is optional on purpose (review already omits empty context). Name is not. - The workshop sentence was removed rather than pointed at `/learn`, because there is no workshop URL yet. - Custom-method wizard step 1 still has no extra label on the policy-name counter field; it would duplicate the modal title. - A Next.js hydration overlay from `HeaderLockup` can appear while typing in the create flow. That component is unchanged here.
an.di added 1 commit 2026-09-10 17:40:40 +00:00
Name stays required; description is a labelled optional textarea. Email uses native validity and form submit. Drop the dead workshop link and fix a few copy errors.

Co-authored-by: Cursor <cursoragent@cursor.com>
an.di self-assigned this 2026-09-10 17:40:46 +00:00
an.di merged commit 4055278628 into main 2026-09-10 17:40:55 +00:00
an.di deleted branch adilallo/fix/CR-185-builder-inputs 2026-09-10 17:40:55 +00:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#77