Blogs Engineering

Connecting TinaCMS's Boolean Toggle to Its Label

Englischer Artikel. TinaCMS's boolean field rendered a checkbox with an empty id, so its label wasn't associated. The merged fix falls back to the form field name.

TypeScripttinacms/tinacmsReactaccessibilityheadless CMS

A prop that never arrived, so screen readers got an unlabelled checkbox.

Kurze Antwort

TinaCMS's boolean field renders a hidden checkbox behind a styled switch. Both the input's id and the label's htmlFor came from a name prop that the field wrapper never passed, so both rendered empty and the label was not associated with any control. The fix falls back to input.name when no name prop is given. It was merged as PR #7478 and closed issue #7473.

The problem

TinaCMS is an open-source headless CMS with visual editing. Issue #7473 spelled out the effect: "Screen readers get an unlabelled checkbox, and the label is inert." Clicking the switch still worked, because the hidden input sits on top of it, which is why the bug went unnoticed visually.

The fix

+  const inputId = name ?? input.name;
...
-        <ToggleInput id={name} type='checkbox' {...input} />
+        <ToggleInput type='checkbox' {...input} id={inputId} />
...
-          htmlFor={name}
+          htmlFor={inputId}

The name prop became optional, and ToggleFieldDefinition is now exported so the types build can name it. A patch changeset was added for the tinacms package.

By the numbers

  • Repository: tinacms/tinacms, 13,864 stars (Nov 3, 2026), TypeScript, Apache-2.0
  • Files changed: 2
  • Lines: +10 / -4
  • Commits: 3 (2 from the PR author, 1 maintainer merge of main)
  • Opened: Aug 21, 2026. Merged: Sep 16, 2026. Time to merge: 25 days, 11 hours
  • Review: approved and merged by a maintainer; CLA signed

How the review went

The maintainer asked: "Could you please fix the CI and add a changeset?" The follow-up commit exported ToggleFieldDefinition, which the types build had failed to name once name became optional, and added the changeset. The maintainer approved with "LGTM" and merged.

FAQ

Did the PR include the claimed unit test?

The PR description claimed a unit test, but the merged diff contains the component change and a changeset, with no test file. The reviewing maintainer had already described the root cause in the issue.

Where can I read more?

See the pull request and the original issue.

Das Ziel

A control that works with a mouse but not with a screen reader is half-built. Wiring the label to its input fixes both.

Loop ausführen

Verwandle Produktionssignale in geprüfte Fixes.

Starte eine kostenlose Testversion und sieh, wie Prilog reale Incidents mit Pull Requests auf Code-Ebene verbindet.