fix(eslint-config): treat @cedarjs/forms fields as label controls

[Tobbe]

jsx-a11y/label-has-associated-control recognizes controls only by tag name, so a <label> that wraps a Cedar field component is reported as unassociated:

<label>
  <CheckboxField name="active" />
  Active
</label>

The shared ESLint config (applied when a11y is enabled in cedar.toml, which is the default) now sets the rule's controlComponents option to every @cedarjs/forms field component that renders an <input>, <select> or <textarea>. HiddenField is not included, because a hidden input can't be labelled. A <label> with no control still errors, so the a11y check stays in effect.

<Label> from @cedarjs/forms is not added to labelComponents. It associates through its name prop, which the rule doesn't understand, so the common <Label name="x">Text</Label> usage would start erroring.

The forms docs get a short section on nesting fields in a <label>, including how to set controlComponents for custom fields or a stricter local config.

Fixes #2634

[netlify]

✅ Deploy Preview for cedarjs ready!

Name	Link
🔨 Latest commit	7bf871c
🔍 Latest deploy log	https://app.netlify.com/projects/cedarjs/deploys/6aca462b817d36000870cf56
😎 Deploy Preview	https://deploy-preview-2974--cedarjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 36 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: a025ba97-79ac-4084-8463-3e2524cb284f

---

📥 Commits

Reviewing files that changed from the base of the PR and between 501afcf and 7bf871c.

---

📒 Files selected for processing (1)

• docs/docs/forms.md

---

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: e91e9da4-b8d3-44bc-8441-80a43b3df2e4

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between f21b071 and 501afcf.

---

---

📒 Files selected for processing (2)

• docs/docs/forms.md
• packages/eslint-config/index.mjs

---

---

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

---

---

---

📝 Summary

Summary by CodeRabbit

• Accessibility
  • ESLint now flags labels without associated controls as errors and recognizes Cedar form fields as controls.
• Documentation
  • Added guidance for configuring label checks with custom fields and stricter ESLint settings.

📝 Summary

Walkthrough

The ESLint configuration now recognizes Cedar form field components as controls for jsx-a11y/label-has-associated-control. The forms documentation explains how to configure custom controls and stricter local rules.

Changes

Label control linting

Layer / File(s)	Summary
Configure and document Cedar controls packages/eslint-config/index.mjs, docs/docs/forms.md	The ESLint configuration lists Cedar form components, excluding HiddenField, as controls for the label association rule. The documentation explains that controlComponents replaces Cedar’s list and shows how to include custom fields.

---

---

Priority: ⬇️ Low

Severity of issue fixed: Low

Merge Risk: 🔵 Low · up to 501af

A narrow accessibility-lint gap remains for labels containing only a hidden InputField. The other configured fields and the customization guidance match their contracts; address or accept this bounded risk before merging.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check		The description clearly explains the ESLint configuration change, the excluded HiddenField component, the documentation update, and the reported validation results.
Title check		The title clearly and concisely identifies the main change: treating @cedarjs/forms fields as label controls in the ESLint configuration.
Linked Issues check		Issue #2634 requires the shared a11y rule to recognize Cedar form controls, keep orphan labels invalid, and document the component list for stricter configurations. packages/eslint-config/index.mjs …
Out of Scope Changes check		The changes are limited to the shared ESLint rule configuration and related forms documentation. The configuration list supports issue #2634 by identifying Cedar controls. The documentation supports s…
Docstring Coverage		Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 …

---

---

---

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

• X
• Mastodon
• Reddit
• LinkedIn

---

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

[greptile-apps]

Confidence Score: 5/5

[Medium impact] The PR appears safe to merge, with the earlier documentation issue fixed.

Summary

The PR lets Cedar’s accessibility lint rule recognize form fields nested inside a plain <label>.

• Plain labels now recognize Cedar form fields as controls.

_{Reviews (2) · Last reviewed commit: "docs(forms): note HiddenField is not a l..." · Reviewed by Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7bf871c

Command	Status	Duration	Result
nx run-many -t build:pack --exclude create-ceda...	✅ Succeeded	3s	View ↗
nx run-many -t build	✅ Succeeded	<1s	View ↗
nx run-many -t build --output-style=stream	✅ Succeeded	4s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-10-10 14:17:54 UTC

[github-actions]

The changes in this PR are now available on npm.

Try them out by running yarn cedar upgrade -t 8.0.0-canary.3369

Or try it in a new app with yarn dlx create-cedar-app@8.0.0-canary.3369