Skip to content

Fix screen reader labels broken in field settings panel#3015

Merged
Crabcyborg merged 5 commits into
masterfrom
fix/6383-screen-reader-field-labels
Mar 13, 2026
Merged

Fix screen reader labels broken in field settings panel#3015
Crabcyborg merged 5 commits into
masterfrom
fix/6383-screen-reader-field-labels

Conversation

@shervElmi

@shervElmi shervElmi commented Mar 13, 2026

Copy link
Copy Markdown
Contributor

Fixes https://github.com/Strategy11/formidable/issues/6383

Testing

  1. Open the form builder with VoiceOver enabled
  2. Click a field (e.g., "Check Boxes") in the builder preview
  3. Click the field label text in the preview → VoiceOver should announce "Check Boxes, selected, text field" (not "advance")
  4. Tab through settings inputs → all should be properly announced
  5. Click the "Advanced" heading to expand it → smooth slide animation should still work
  6. Collapse and re-expand "Advanced" → animation still works
  7. Switch to different fields → primary section inputs are immediately accessible each time

Demo

https://cleanshot.com/share/nzYcG0fP

Summary by CodeRabbit

  • New Features
    • Added support for PayPal order fields: email/name/address fields can be marked as PayPal order fields, will be auto-populated and excluded from form HTML, with a visible note explaining this behavior.
  • Bug Fixes
    • Restored and improved admin animations: neighboring element animations re-run when collapsing field groups; expanded field settings open immediately without delayed transitions.

@coderabbitai

coderabbitai Bot commented Mar 13, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

Restores and adjusts admin UI animations in js/src/admin/admin.js and adds a new PayPal fields controller paypal/controllers/FrmPayPalLiteFieldsController.php that hides/annotates PayPal order fields in form rendering.

Changes

Cohort / File(s) Summary
Admin animation logic
js/src/admin/admin.js
Restores CSS animations on neighboring elements when collapsing field groups; cancels slide/transition animations for expanded sections when opening a single field's settings so inputs are immediately accessible after DOM re-insertion.
PayPal fields controller
paypal/controllers/FrmPayPalLiteFieldsController.php
Adds FrmPayPalLiteFieldsController with hide_paypal_order_fields($show_normal_field_type, $type, $field) to suppress rendering of PayPal order fields for email, name, address, and add_paypal_order_field_note($field, $display, $values) to output a note indicating automatic population/exclusion from form HTML.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I nibble code, then hop with glee,

Animations sing and fields hide free,
PayPal notes tucked neat in line,
Quick settings open — oh how fine! 🎉

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Title check ⚠️ Warning The title focuses on fixing screen reader labels in the field settings panel, but the actual changes include both accessibility fixes (animation restoration) and new PayPal controller functionality that is not mentioned in the title. Update the title to reflect the complete scope of changes, such as 'Fix screen reader labels and add PayPal order fields controller' or verify if the PayPal changes are out of scope for this PR.
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/6383-screen-reader-field-labels
📝 Coding Plan
  • Generate coding plan for human review comments

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@js/src/admin/admin.js`:
- Around line 7628-7630: The forEach callback on
singleField.querySelectorAll('h3:not(.frm-collapsed) + .frm-collapse-me')
currently uses a concise arrow body that returns the assignment expression;
change it to a block-bodied arrow function so it performs the assignment as a
statement (e.g., section.style.animation = 'none';) without an implicit return.
Locate the forEach call in admin.js and replace the concise arrow callback with
a block callback to avoid returning a value from the handler.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1fc92e88-0938-4b52-a81a-2e7508ddd250

📥 Commits

Reviewing files that changed from the base of the PR and between 7535ca2 and 0e44d07.

📒 Files selected for processing (3)
  • css/frm_admin.css
  • js/formidable_admin.js
  • js/src/admin/admin.js

Comment thread js/src/admin/admin.js
@Crabcyborg Crabcyborg added this to the 6.30 milestone Mar 13, 2026

@Crabcyborg Crabcyborg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @shervElmi!

This looks good to me.

🚀

@deepsource-io

deepsource-io Bot commented Mar 13, 2026

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in 3804363...950ffc2 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 Mar 13, 2026 7:03p.m. Review ↗
JavaScript Mar 13, 2026 7:03p.m. Review ↗

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
paypal/controllers/FrmPayPalLiteFieldsController.php (1)

29-41: Minor documentation inconsistencies.

  1. Missing @since tag: Unlike hide_paypal_order_fields, this method lacks a @since x.x annotation.

  2. Type inconsistency: The $field parameter is documented as array here, but as object in hide_paypal_order_fields. Since FrmField::get_option() handles both, consider clarifying with array|object for consistency.

  3. Unused parameters: Static analysis flags $display and $values as unused. If this method is a hook callback with a mandated signature, consider adding a brief inline comment or suppressing the warning to clarify intent.

📝 Suggested documentation improvements
 	/**
+	 * Add a note about PayPal order fields in the form builder.
+	 *
+	 * `@since` x.x
+	 *
-	 * `@param` array $field The field settings.
-	 * `@param` array $display The display settings for the field.
-	 * `@param` array $values The values associated with the field.
+	 * `@param` array|object $field   The field settings.
+	 * `@param` array        $display The display settings for the field (unused, required by hook signature).
+	 * `@param` array        $values  The values associated with the field (unused, required by hook signature).
 	 *
 	 * `@return` void
 	 */
-	public static function add_paypal_order_field_note( $field, $display, $values ) {
+	public static function add_paypal_order_field_note( $field, $display, $values ) { // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundAfterLastUsed
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@paypal/controllers/FrmPayPalLiteFieldsController.php` around lines 29 - 41,
The add_paypal_order_field_note method is missing a `@since` tag, documents $field
as array only (inconsistent with hide_paypal_order_fields), and leaves $display
and $values unused; update the PHPDoc for add_paypal_order_field_note to include
the same `@since` annotation as hide_paypal_order_fields, change the `@param` for
$field to "array|object" to reflect FrmField::get_option input, and add a short
inline comment (e.g., /* unused: required by hook signature */) or a suppression
annotation for $display and $values to silence static analysis while keeping the
hook-compatible signature.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@paypal/controllers/FrmPayPalLiteFieldsController.php`:
- Around line 29-41: The add_paypal_order_field_note method is missing a `@since`
tag, documents $field as array only (inconsistent with
hide_paypal_order_fields), and leaves $display and $values unused; update the
PHPDoc for add_paypal_order_field_note to include the same `@since` annotation as
hide_paypal_order_fields, change the `@param` for $field to "array|object" to
reflect FrmField::get_option input, and add a short inline comment (e.g., /*
unused: required by hook signature */) or a suppression annotation for $display
and $values to silence static analysis while keeping the hook-compatible
signature.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0fce5195-d8fb-477e-b854-42993a57997f

📥 Commits

Reviewing files that changed from the base of the PR and between 0e44d07 and 090bf5b.

📒 Files selected for processing (1)
  • paypal/controllers/FrmPayPalLiteFieldsController.php

@Crabcyborg Crabcyborg merged commit f032024 into master Mar 13, 2026
22 checks passed
@Crabcyborg Crabcyborg deleted the fix/6383-screen-reader-field-labels branch March 13, 2026 19:10
stephywells pushed a commit that referenced this pull request Apr 4, 2026
…-labels

Fix screen reader labels broken in field settings panel
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants