Fix invalid label for= references on the styles page (IBM label_ref_valid)

[vivi-the-going-merry]

What was broken

formidable-pro#6687's IBM Equal Access baseline flagged 15 label_ref_valid violations, all on the Formidable Lite Styles page (/wp-admin/admin.php?page=formidable-styles) — the checker and both a11y specs (admin-a11y.cy.js, form-preview-a11y.cy.js) live in this repo (Lite), not formidable-pro, even though the issue is tracked there per convention.

Reproduced locally (wp-env, port 3010) with a temporary instrumented checkIbmAccessibility that logged each violation's path/snippet. Of the 15, 6 were genuine broken for/id pairings, all on <label class="frm-style-item-heading"> section headings:

• "Vertical Spacing", "Input Field Padding", "Base Font Size", "Corner Radius" pointed at the slider component's type="hidden" storage input (FrmSliderStyleComponent) — a hidden input is not a labelable element, so the reference was never valid.
• "Field Shape" pointed at frm_field_shape, an id FrmFieldShapeStyleComponent's template never actually renders (its four radio inputs use their own hardcoded ids instead).
• "Style Class" (in both _quick-settings.php and _general.php) pointed at frm_style_class, which was never rendered anywhere — the adjacent content is a copy-to-clipboard <label class="frm-copy-text">, not a form control.

What changed

Dropped the dangling for attribute from all 6 headings (2 duplicated across _quick-settings.php/_field-sizes.php/_general.php since Quick Settings and the Advanced accordion sections render the same field twice). No CSS/JS change — .frm-style-item-heading is styled by class, not tag, and the underlying inputs/ids these headings never validly labeled are untouched (the hidden storage inputs are still read by js/admin/style.js for the slider widgets). Also dropped _quick-settings.php's now-fully-dead 'id' => 'frm_field_shape' array key — nothing consumes it.

What's still open (not touched here, on purpose)

The remaining 9/15 label_ref_valid instances have a real, unique, correctly-associated element at the target id — but each is genuinely inaccessible for a different reason than "broken pairing":

• 4 field-shape radio inputs (frm-field-shape-regular/-rounded-corners/-circle/-underline) are display:none (.frm-style-component .frm-radio-container input{display:none}, css/admin/frm-settings-components.css) — removed from the accessibility tree entirely, replaced visually by their sibling <label>'s SVG icon.
• 4 color-picker labels (frm_style_qsettings_submit_bg_color etc.) and 1 custom-CSS-toggle label (frm_enable_single_style_custom_css) target inputs that are also nested inside a second, JS-generated wrapping <label> (WP core's wp-color-picker/Iris for the colors; this plugin's own toggle markup for the checkbox) — a double-label situation the checker flags even though each individual pairing resolves.

Fixing either category needs a CSS change (visually-hidden-but-AT-visible pattern for the radios) or touching JS/markup structure the color-picker and toggle widgets depend on — both out of this issue's stated "markup-only, no CSS/JS" scope. Left for a follow-up once someone can review the visual/structural implications; noted on formidable-pro#6690 with the underlying cause named so the next pass doesn't have to re-diagnose it.

Verification

Real red/green Cypress run against a local wp-env site (not inferred): label_ref_valid on the styles page went from 15 → 9 instances after the fix, with the exact 6 fixed headings disappearing and no other page's violation count changing (checked all 11 admin pages + form-preview). PHPCS clean (./vendor/bin/phpcs on the changed files, no --standard override). php -l clean.

Closes Strategy11/formidable-pro#6690

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 723a84fa-161e-4d56-94ad-1ca33c43b88e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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.}

[deepsource-io]

DeepSource Code Review

We reviewed changes in e404085...2c6ba34 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Sep 17, 2026 9:01p.m.	Review ↗
JavaScript		Sep 17, 2026 9:01p.m.	Review ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[vivi-the-going-merry]

Filed Strategy11/formidable-pro#6709: the same dangling-`for`/hidden-input-or-dropped-id defect exists in 8 more headings in these same two files (Font Size, Height, Width, Border Width, Padding, Form Width, Alignment, Direction), verified live in the DOM. Not fixed here — the IBM checker's current scan doesn't reach them (they sit in a collapsed accordion section with no always-visible duplicate, unlike the 6 fixed here), so there's no red state to go green against. Root cause is component-level (`FrmSliderStyleComponent`/`FrmAlignStyleComponent`/`FrmDirectionStyleComponent`/`FrmFieldShapeStyleComponent` all mishandle the caller's `id`) — left for a scoped follow-up per #6709 rather than widened here without a verified red state.