Blogs Engineering

Connecting TinaCMS's Boolean Toggle to Its Label

Artículo en inglés. 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.

respuesta corta

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.

Preguntas frecuentes

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.

el objetivo

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

Ejecuta el ciclo

Convierte señales de producción en fixes revisados.

Empieza una prueba gratuita y descubre cómo Prilog conecta incidentes reales con pull requests a nivel de código.