Style builder: labels focus hidden inputs instead of the visible color-picker/slider controls

[robin-the-going-merry]

Requested by: @Crabcyborg

Problem

In the Style builder (Formidable > Styles), several <label for="..."> elements point at inputs that end up hidden from the DOM's visible/interactive perspective, so clicking or focusing the label doesn't reach the control the user actually interacts with.

Color pickers

• Template: classes/views/styles/components/templates/colorpicker.php — renders <input type="text" id="{component.id}" class="hex">.
• Labels reference that same id, e.g. classes/views/styles/_quick-settings.php:12-14 (for="frm_style_qsettings_submit_bg_color"), and similarly throughout _field-labels.php, _form-messages.php, _field-sizes.php.
• js/admin/style.js (~line 1469) calls .wpColorPicker({...}) on input.hex with no hide: false override. WP's default color picker behavior hides the original <input> and replaces the visible UI with a .wp-color-result swatch/button plus its own internal text field — neither of which carries the original id. Result: the label's for targets an input the user can no longer see or click.

Sliders

• Template: classes/views/styles/components/templates/slider.php — the value is stored in <input type="hidden" id="{component.id}"> (lines 118, 133, 173), while the actual interactive/visible element is the draggable slider handle (.frm-slider-container / .frm-slider-component) and its adjacent visible number <input> — neither carries the component's id.
• Labels like classes/views/styles/_field-sizes.php:8 (for="frm_field_font_size") etc. therefore point at the hidden value-holder input, not the visible slider/number field the user drags or types into.

Ask

Repoint (or add aria-labelledby/explicit association to) each of these labels so they target the actual visible/interactive control:

• Color pickers: the swatch button / visible .wp-color-result (or wire up aria-labelledby since WP's picker markup doesn't expose a clean id to for to).
• Sliders: the visible number input (already has aria-label per-axis, e.g. slider.php:29) rather than the hidden value input.

This affects clicking a label to focus the control, and screen-reader/keyboard users relying on label association — worth a look from an accessibility angle too, not just UX polish.

Repro

1. Formidable > Styles → edit any style.
2. Click a color swatch's label (e.g. "Primary" in Quick Settings) — focus doesn't land on anything visible/interactive.
3. Click a slider's label (e.g. "Padding" in Field Sizes) — same.

Source reported from

Michael Letellier (Slack DM, 2026-09-22): "Can we make the labels in our visual styler smarter? A lot of them might be pointing to hidden inputs. Instead it would be nice if they focused on the actual relevant visible inputs we use (ie for color pickers and for sliders)."

[vivi-the-going-merry]

PR #3449 addresses the color-picker and single-value-slider label targets, CI green (shard 1's failure is the known unrelated Form Templates flake). Padding/margin sliders intentionally left out of scope — see PR description for why (component would need to own the label association for its dual single/multi-value shapes).