Give appraisal intake fields persistent, programmatic labels - #154
Conversation
Both intake forms (homepage and /audit) named their fields only with placeholder text plus an invisible aria-label: the name vanished the moment a buyer typed, and aria-label alone is not a persistent label. Each website/email field now carries a visible <label> caption bound to the input via label[for]/input[id], so the name stays on screen and stays exposed to assistive tech and browser validation. - index.html and audit.html: wrap each input in <label><span>..</span> <input id=..></label>; placeholders become samples (you@company.com) - shared.css: label columns with caption rules inside the .lead.two pill, desktop and stacked mobile treatments, divider moved to the label boundary - check-site.mjs: intake-label guard now requires the for/id binding (persistent AND programmatic) instead of an aria-label alone
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe intake forms now use visible labels associated with website and email inputs. Shared CSS styles the labels and mobile layout. Site checks validate ChangesIntake form labeling
Estimated code review effort: 2 (Simple) | ~10 minutes Mergeability Score: ⚪ Minimal · up to The change adds persistent visible labels to the appraisal intake fields and updates the corresponding validation checks; no actionable merge-blocking risk remains beyond normal checks and review. Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c0607b8cdf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <label for="intake-website"><span>Your website domain</span><input type="text" name="website" id="intake-website" required inputmode="url" autocomplete="url" placeholder="yourwebsite.com" pattern="(https?://)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:[0-9]+)?(/[^\s]*)?" title="Enter your domain, like example.com"></label> | ||
| <label for="intake-email"><span>Your work email</span><input type="email" name="email" id="intake-email" required placeholder="you@company.com"></label> |
There was a problem hiding this comment.
The homepage loads only index.css, while the new label-column rules were added exclusively to shared.css, which is used by /audit. Consequently, on / the existing form.two input rules still assume the inputs are direct flex children: the wrapper labels receive no flex sizing or grid layout, the captions remain unstyled inline content, and both nested inputs match input:first-of-type, producing incorrect dividers and sizing in the primary intake form. Mirror the label rules in index.css or load a stylesheet that supplies them.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0528571d1a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const labelBody = pageHtml.match( | ||
| new RegExp(`<label\\b[^>]*\\bfor="${id}"[^>]*>([\\s\\S]*?)<\\/label>`, "i") | ||
| )?.[1] ?? ""; | ||
| if (!labelBody.trim()) { |
There was a problem hiding this comment.
When a caption is emptied or removed while the input remains inside its <label>, labelBody still contains the <input> markup and therefore passes this non-empty check. The guard would consequently accept an intake field with no persistent visible label, defeating the regression protection introduced here; strip tags and verify non-empty visible text, or explicitly validate the caption element's text.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@scripts/check-site.mjs`:
- Around line 1656-1660: Update the label validation near labelBody to strip
nested markup and evaluate the label’s text content, requiring non-whitespace
visible text rather than merely any captured HTML. Preserve the existing failure
message and add a regression case covering a label containing only a nested
input.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f0bac28a-f916-4aef-97fc-6523330d2b0d
📒 Files selected for processing (4)
public/audit.htmlpublic/index.htmlpublic/shared.cssscripts/check-site.mjs
| const labelBody = pageHtml.match( | ||
| new RegExp(`<label\\b[^>]*\\bfor="${id}"[^>]*>([\\s\\S]*?)<\\/label>`, "i") | ||
| )?.[1] ?? ""; | ||
| if (!labelBody.trim()) { | ||
| failures.push(`Intake input on ${pageName} must be bound to a persistent programmatic <label for="${id}"> (placeholder-only labels disappear as buyers type): ${tag}`); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Validate label text, not only label markup.
labelBody.trim() succeeds when the label contains only the nested <input>. A future input-only label can therefore pass without a visible caption. Extract the label's text content and require non-whitespace text. Add a regression case for an input-only label.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@scripts/check-site.mjs` around lines 1656 - 1660, Update the label validation
near labelBody to strip nested markup and evaluate the label’s text content,
requiring non-whitespace visible text rather than merely any captured HTML.
Preserve the existing failure message and add a regression case covering a label
containing only a nested input.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f0acbfa317
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const labelBody = pageHtml.match( | ||
| new RegExp(`<label\\b[^>]*\\bfor="${id}"[^>]*>([\\s\\S]*?)<\\/label>`, "i") | ||
| )?.[1] ?? ""; |
There was a problem hiding this comment.
If a future edit accidentally assigns the same id to both intake inputs, each iteration finds the same first matching <label for> and this guard still passes. In the browser, both explicit labels then resolve to the first element with that ID, leaving the second field without the intended programmatic label; verify IDs are unique (and that each matched label resolves to the current input) before accepting the association.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7e9b85850f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const labelBody = pageHtml.match( | ||
| new RegExp(`<label\\b[^>]*\\bfor="${id}"[^>]*>([\\s\\S]*?)<\\/label>`, "i") | ||
| )?.[1] ?? ""; |
There was a problem hiding this comment.
If an intake form is commented out while its old markup remains in the page, both the input scan and this label lookup still inspect the commented markup, so the check reports success even though the browser serves no intake controls. Strip HTML comments before scanning, as the canonical-link check above already does, so only live inputs and labels can satisfy this regression guard.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
…tain email autocomplete)
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
…on on current main (2026-08-21) (#272) The review item "Put a real 'Request the appraisal' action inside the pricing page's closing callout" is already fixed on origin/main 92d55c3 by merged PR #194 (76fe17b, 2026-08-19), hardened by #154 (persistent labels) and #251 (44px tap targets). Re-verification-only closeout: the closing .band form, the check-site.mjs guard, and the suite are all green; the live page's missing form is the documented deploy lag to the pre-fix release pin (release-state-tinystudio-io.json b4d80f1, 2026-08-17), not a source regression. Co-authored-by: minimax-vps <minimax-vps@local> Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
1 participant
What
Both appraisal intake forms — the homepage and
/audit— named their two fields (website,email) only with placeholder text plus an invisiblearia-label. Placeholder text disappears the moment a buyer starts typing, andaria-labelis programmatic but never visible: neither is a persistent label.Each intake field now carries a visible
<label>caption bound to the input vialabel[for]/input[id], so the field's name:Changes
public/index.html<label for=..><span>caption</span><input id=..></label>; email placeholder becomes a sample value (you@company.com) since the caption is now the namepublic/audit.htmlpublic/shared.css.lead.twopill re-laid-out as label columns with caption rules (desktop two-up, stacked mobile); divider moves to the label boundaryscripts/check-site.mjsidbound to a non-empty<label for>on the same page (was:aria-labelalone)Verification
npm test— all 92 tests pass (check, headings, sitemap, worker, ui, contract)npm run check:render-blocking— all six pages PASS (font stylesheet non-blocking under production CSP)public/:el.labelsto the right inputs on both pages/tmp/opencode/{index,audit}-*-form.pngCloses the unreviewed-by-grok item: Give both appraisal intake fields persistent, programmatic labels — the homepage and /audit.
Summary by CodeRabbit