Forms: Ensure form choice buttons have a fallback text color if text and background are the same

[coder-karen]

Fixes https://github.com/Automattic/vulcan/issues/539

Proposed changes:

• This PR checks if the form button text color matches the background color, and if so sets the text color to the general button default. This fixes an issue on multiple themes where multi-choice and single-choice form options (when using the button style), had the same text and button color.
  • There was only one theme and environment that I encountered where the fix did not apply - Twenty Fifteen on WoA sites only. As it appears quite theme specific at this stage, I've left it, as some workarounds I attempted then had affects on other theme button styling.
  • There are existing discrepancies between editor and front-end across themes, noted in the original PR here - Forms: Multiple Choice and Single Choice fields style variations #30319 (comment) - but the main aim of this PR is ensure button text is readable on the front-end where-ever possible.
• It also ensures the single option text color is consistent with the multi choice text color in buttons, currently only noticeable as an issue in Astra, by ensuring the color is applied to the text there as it is for the multi choice buttons, as it wasn't previously.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

https://github.com/Automattic/vulcan/issues/539

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Self-hosted:

• On trunk, add a form and add both multi-choice and single choice field options to a post or page. Test the following with the Twenty Twenty, Astra, Twenty Fifteen and Twenty Fourteen themes:
  • On the front-end of the site, notice that the text and button color is the same, unless you deliberately highlight the text. Astra is slightly different in that the single choice options do show a text color.
• Apply this PR, and test with the same themes. Notice each now show the same default text color as you see in other form buttons on the post / page.
• If you can, test with any other themes as well.
• There are existing discrepancies between editor and front-end across themes, mentioned under 'Proposed changes' above, so this is expected at the moment.

WoA:

• As with self-hosted, however the only exception is Twenty Fifteen, which is the only theme I've tested with these changes whose button styles on the front-end are not fixed by this PR (the button background color and text are marginally different).

Simple:

• As with self-hosted (using the command in the generated comment below, for a sandboxed Simple site). Note that Astra is not available for Simple sites.
• There are additional themes that had broken button styling on the front-end, only on Simple, that are fixed by this PR as well: Dara and Sketch.

Screenshots to demo the difference

Twenty Twenty before:

Twenty Twenty after:

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the fix/forms-button-style branch.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack fix/forms-button-style
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Choose a review path based on your changes:
   • A. Team Review: add the "[Status] Needs Team Review" label
     • For most changes, including minor cross-team impacts.
     • Example: Updating a team-specific component or a small change to a shared library.
   • B. Crew Review: add the "[Status] Needs Review" label
     • For significant changes to core functionality.
     • Example: Major updates to a shared library or complex features.
   • C. Both: Start with Team, then request Crew
     • For complex changes or when you need extra confidence.
     • Example: Refactor affecting multiple systems.
3. Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

---

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

• WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).
• WoA releases happen weekly.
• Releases to self-hosted sites happen monthly. The next release is scheduled for November 5, 2024 (scheduled code freeze on November 4, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[fgiannar]

While testing on Simple I noticed that for multiple choice options the UI is not reflecting the selected one (in the screenshot below I had selected both):

Do you think this something we could also fix under the context of the current PR or a follow up?

[coder-karen]

Nice catch! That looks like Twenty Twenty, and it seems to be the case for Twenty Fifteen as well on Simple, but not Twenty Fourteen (all had the same issue originally where no text displayed). I think it makes sense to fix that in this PR as it does introduce it with the text color change in those cases.