Draw the true/false switch the markup always promised - #6
Merged
Merged
Conversation
atcf_control_true_false() has printed a track span since day one, and the stylesheet never once mentioned it — it just inflated the native checkbox to 40×22, which renders as a blue rectangle wearing a tick. The JS renderer was worse off still: it never emitted the track at all. Now the checkbox is visually hidden but keeps its place in the tree — keyboard focus, screen reader announcement and form submission are all still the input's job — stretched over the track so the click target is the thing that looks clickable, and the track is a real switch: a pill, a thumb, `:checked +` doing all the state work with no JavaScript. Focus-visible ring, disabled dimming, logical properties so RTL mirrors for free, transitions that honour prefers-reduced-motion, and a forced-colors block that says with borders and system colours what the track normally says with background. The JS renderer gains the same track span the PHP renderer prints, so switches inside repeater rows and the Field Inspector match the metabox exactly. The builder's canvas preview and the class-parity guard already spoke these class names — this is the stylesheet finally holding up its end. 369 JS and 195 PHP tests green; no markup contract changed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HLZL6dY61BkPPmGyy6F9Us
The second box of the link control said "Add" — the generic button string borrowed via the wrong l10n key — which reads as a mystery input rather than as the box for the words a link shows. A placeholder is the only name an optional input gets, so it now says "Link text", with its own translatable string. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HLZL6dY61BkPPmGyy6F9Us
# Conflicts: # assets/js/builder.min.js # assets/js/fields.min.js # assets/js/widget.min.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The bug
The true/false field looked like a blue rectangle wearing a checkmark. The reason is almost funny:
atcf_control_true_false()has printed a.atcf-switch__trackspan since day one — and the stylesheet never once mentioned it. All the CSS did was inflate the native checkbox to 40×22px, which is exactly the ugly pill in the screenshot. The JS renderer (repeater rows, Field Inspector widget) was worse off still: it never emitted the track span at all.The fix
The checkbox is now visually hidden but keeps its place in the tree — keyboard focus, screen-reader announcement, and the form submission (including the hidden-
0off-value trick) all remain the input's job — stretched over the track so the click target is the thing that looks clickable. The track becomes a real switch::checked +doing all the state work — no JavaScript owns this:focus-visiblering,:disableddimming (and the label loses its pointer cursor via:has())prefers-reduced-motionforced-colorsblock that says with borders and system colours (ButtonText/Highlight) what the track normally says with background — high-contrast themes flatten backgrounds, which was everything the design hadThe JS renderer gains the same track span the PHP renderer prints, so switches inside repeater rows and the Field Inspector now match the metabox exactly. No markup contract changed — the builder's canvas preview and the vitest class-parity guard already spoke these class names; this is the stylesheet finally holding up its end.
(Not touched here: the shell's own
<os-switch>off-state bug documented inBUG-os-switch-off-state-holo-fill.md— that lives in the OpenStation component, upstream of this repo. This PR fixes every switch this plugin draws itself.)Verification
tscclean, bundles rebuilt🤖 Generated with Claude Code
https://claude.ai/code/session_01HLZL6dY61BkPPmGyy6F9Us