Improve field accessibility semantics

[bnomei]

Motivation

• Make form controls in the admin UI use proper accessible semantics by connecting visible labels to inputs and grouping choice controls, so screen readers and accessibility audits can identify relationships.

Description

• Replace plain label spans with <label htmlFor={id}>/id associations for text/textarea/number/url subfields and for checkbox subfields in src/admin.tsx.
• Use Kumo label prop for Select controls and add explicit <label htmlFor=...> for link Value/Text inputs and the link checkbox control.
• Render choice collections with semantic <fieldset>/<legend> wrappers in both horizontal (card) and multiple-choice layouts, and give individual choice inputs explicit id/htmlFor associations while preserving visual styles.
• Add focused tests in test/semantics.test.mjs and expose npm test in package.json to make label/grouping semantics reviewable.

Testing

• Ran npm run check and it passed with no formatting or lint errors.
• Ran npm test which executed the new Node tests and all tests passed.
• Ran npm run typecheck (tsc --noEmit) and it completed successfully with no type errors.
• Ran npm run build and the package built successfully producing dist/ outputs.

Closes #3

---

Codex Task

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

Warning

Review limit reached

@bnomei, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 21 minutes and 53 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 802bd8bc-dddc-4fcb-bb89-b25526caa204

📥 Commits

Reviewing files that changed from the base of the PR and between 40bfa3d and 9a90616.

📒 Files selected for processing (3)

• package.json
• src/admin.tsx
• test/semantics.test.mjs

---

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 and usage tips.}

[augmentcode]

🤖 Augment PR Summary

Summary: This PR improves admin-field accessibility semantics by ensuring visible labels are programmatically associated with their controls.

Changes:

• Replaces plain label spans with <label htmlFor>/id pairings for text-like subfields and checkboxes.
• Updates Kumo Select usage to use its label prop instead of aria-label.
• Wraps choice groups in semantic <fieldset>/<legend> and gives each choice input an explicit id/htmlFor association.
• Adds a Node test that asserts the presence of these semantics and exposes npm test.

Technical Notes: The new tests validate label/grouping patterns at the source level to make accessibility semantics easy to review.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

[augmentcode]

src/admin.tsx:285 — This swaps aria-label for Kumo Select’s label prop; can we confirm label actually creates an accessible name association for the underlying control (otherwise this could be an a11y regression)? Other locations where this applies: src/admin.tsx:471.

Severity: medium

Other Locations

• src/admin.tsx:471

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

[augmentcode]

src/admin.tsx:598 — In the multiple branch, the wrapper changed from a focusable <div id={id} tabIndex={-1}> to a <fieldset id={id}>, which is not programmatically focusable by default. If any error/scroll-to-field code calls .focus() on the widget root by id, this could break that behavior.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

[augmentcode]

src/admin.tsx:601 — choiceInputId() sanitizes values, which can cause distinct choice.values to collapse to the same id (e.g., "a b" vs "a-b"), breaking label→input association and creating duplicate IDs. Consider ensuring IDs are guaranteed-unique even after normalization.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}