Contact Form: multiple choice checkbox labels are semi-transparent

[sophiegyo]

Quick summary

Checkbox labels have partial opacity in their CSS, rendering them harder to see and read.

We've had a couple of user reports about this:
https://wordpress.com/forums/topic/faded-words-in-my-contact-forms/?view=all&spf_use_2022_style=yes
https://wordpress.com/forums/topic/how-to-change-color-of-checkbox-radio-form-block/?view=all

I'm now convinced it's bug-report-worthy.

I've tested on a self-hosted site using Jetpack and that's fine, this seems to be exclusive to wpcom.
Incidentally, the first report linked above actually uses a classic block, and therefore a classic/shortcode contact form, but this affects old and current contact forms alike.

Steps to reproduce

1. Start at any wpcom Simple or Atomic site, any theme
2. Create a page, insert a contact form
3. Add a multiple choice checkboxes
4. Preview in a new tab or publish the page

What you expected to happen

The multiple choice checkboxes should not be faded and therefore harder to read, like this screenshot from my self-hosted site using WP 6.1.1, Jetpack 11.7.1, and Gutenberg 15.0.1

What actually happened

The multiple choice checkboxes are faded - screenshot from my Atomic site:

Same with Simple:

Screenshot including the CSS on my Simple site:

Impact

Most (> 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Plugin version: Jetpack 11.7.1
Browser: Firefox 109.0.1
Mac OS: 12.6

I tried seeing if the field text colour setting would affect anything, but it did not.

[sophiegyo]

Judging from the comment on a similar issue for radio buttons, it is what I thought - the opacity that was originally for "required" labels is applying to other labels too.

[dpasque]

@sophiegyo I think this is actually fixed! There's quite the comical race condition here of timing going on here... 😆

Here's what my testing showed as of today:

• Testing on a DotCom Simple Site (running Jetpack 11.9 a3): did not reproduce
• Testing on a Jurassic Ninja site running Jetpack 11.8.4: does reproduce.

From what I can tell, this was actually fixed in this Jetpack PR: Automattic/jetpack#28212 -- it strips the span wrapper on the checkbox label, which was what was causing the bad styling.

That PR was included in 11.9 a1, which deployed to simple late last week (not long after this was opened! The timing! How about that turn around? 😁 ): p8oabR-156-p2

So, I think that's why it's now fixed on WPCOM, and it should be fixed for everyone else once we release 11.9 publicly and they add it to their self hosted sites.

@sophiegyo would you mind double checking whether this is still reproducing on WPCOM for you?

If not, we can close this as fixed! 🥳

[vajrasar]

Closing this. @sophiegyo pls feel free to reopen if you can still replicate this.