Directory

Text correction on wordcamp Incident Report form · Issue #1177 · WordPress/wordcamp.org · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text correction on wordcamp Incident Report form #1177

Closed
harshgajipara opened this issue Dec 12, 2023 · 3 comments
Closed

Text correction on wordcamp Incident Report form #1177

harshgajipara opened this issue Dec 12, 2023 · 3 comments
Assignees

Comments

@harshgajipara
Copy link
Contributor

Describe the bug
In the Incident Report form "Yes" text is not visible. (https://central.wordcamp.org/incident-report/).

Steps to reproduce the behavior:

Expected behavior

  • it should be visible properly & easy to read.

Screenshots
image

Solution:

Just need to replace "legend" tag with "label"
image

@dd32
Copy link
Member

dd32 commented Dec 12, 2023

This HTML is generated by the Jetpack Contact form module.

The relevant shortcode is this:

[contact-field label="Was a police report filed?" type="radio" options="Yes,No"]

It looks like this changed the HTML markup intentionally:
Automattic/jetpack#34147

Unfortunately, the twentyten theme styles legends differently than labels, and I'm not sure Jetpack should expect otherwise.

@dd32
Copy link
Member

dd32 commented Dec 12, 2023

Additionally the above PR added an extra fieldset, so now it's fieldset > fieldset which results in the double padding and margins.

The fix required here is going to be a bunch of CSS styles that override twentytens styles, and/or a jetpack bug report to revert/change the behaviour.

@sabernhardt
Copy link

I did not find a problem with the Jetpack form in my own WordPress installation, so Automattic/jetpack#34147 seems to have fixed the Jetpack plugin. In my test, the group has one fieldset with a visible legend as its first child element, and each option has a visible label programmatically connected to its button.

Jetpack contact form radio buttons in WordPress 6.4

However, the WordCamp site has temporary tweaks from #874 that probably do not belong there anymore.

* Upstream issue: https://github.com/Automattic/jetpack/issues/16685.
* When that is fixed, this & `inject_css_for_fieldset` can be removed.
*
* @param string $rendered_field Contact Form HTML output.
* @param string $field_label Field label.
* @param int|null $post_id Post ID.
*/
function wrap_checkbox_radio_fieldset( $rendered_field, $field_label, $post_id ) {

The first item ("Yes") needs to be a label for the radio button, and the screen-reader-only styles for legend elements are not appropriate on the Incident Report page (any other forms likely should not hide the legend either).

@ryelle ryelle self-assigned this Jan 11, 2024
@ryelle ryelle closed this as completed in 65f2f4b Jan 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants