Accessibility labels for form fields and fieldsets by arnelap · Pull Request #805 · ibericode/mailchimp-for-wordpress

arnelap · 2025-12-10T12:15:57Z

What I changed and tested > see comment below.

I propose to wrap every input in its label, that way we don't need to deal with ID's
this way we prevent any issues with duplicated IDs and are still w3c accessible compliant by Associating labels implicitly
https://www.w3.org/WAI/tutorials/forms/labels/#using-aria-label

to this end I

Removed the ID from the default form content
Wrapped inputs in their label
Added "fieldset" around checkbox and radios with the agree to terms excluded as that has only 1 choice it can still be wrapped in label
removed the wrap in P option for "fieldset" as a fieldset will close the p / can't be wrapped in p

this would close Small tweak for accessibility (currently fails two WCAG guidelines) #640

…plying fieldset to checkboxes/radios also changed the default form to not include any ID as that would cause invalid HTML if there are multiple forms on one page.

…el to wrap to new line for terms agreement

arnelap · 2025-12-13T15:28:00Z

Changes:
Updated default form code to NOT include id=...
Changed field generator to wrap inputs in their label
Changed field generator to wrap checkboxes and radio groups in fieldset with a legend
Removed option to wrap checkboxes and radio groups in P as a fieldset shouldn't be in a P

Tested:

Creating a new form, the new code from config/default-form-content.php is correctly loaded
Adding text fields with and without wrapping in P, with and without selecting "required"
Adding text fields without a label - no label tags are added, p wrapping still works
Adding address fields
Adding address type country as dropdown with and without P wrapping
Adding address type country as radio (results in fieldset, can't wrap in p)
Adding submit button, no label is added
Adding procapcha hidden field, no label is added
Adding Audience choice with radio and with checkbox, fieldset with legend is added, p wrapping is not avialable
Adding Audience with drop-down, the select is wrapped in label and p wrapping is available
Adding audience choice with checkboxes without setting a label, results in fieldset without legend
Repeated the same tests as audience field for the form action
Tested Agree to terms checkbox,it's wrapped in label because it always has only 1 checkbox so no fieldset required, the label now has a "span" inside of it (this was the way i got it to put on a new line...

dannyvankooten · 2025-12-15T13:19:01Z

    }),
    ' ',
-    label
+    m('span', label)


Why do we wrap the label in <span> here now?

if i don't, it puts on the same line as the already very long agree to terms text.
I tried to add ' ' and '\n' and that did nothing...

dannyvankooten · 2025-12-15T13:22:15Z

+    ? field
+    : isNested
+      ? (hasLabel
+          ? m('label', [config.label, field])


Should we include a <span> or something here to make it a tiny bit easier to style the label text or have it be on a separate line from the field by default?

I think a lot of themes used to have display: block on the <label> element, resulting in a neat line-break between the label text and the input field. After this change, a lot of themes will have the input field on the same line as the label unless their input is display: block.

We should also check the CSS themes we ship to see what we're doing.

and styles builder possibly as well, will click around

added the span around text inside the label

made some changes to the default themes but warrants more testing.
also need to update the styles builder

…Also some CSS changes to target that span instead of label

dannyvankooten · 2025-12-15T14:52:07Z

Yes

…

On 15 December 2025 15:16:19 CET, Arne Lap ***@***.***> wrote: @arnelap commented on this pull request. > + const content = config.type === 'terms-checkbox' + ? field + : isNested + ? (hasLabel + ? m('label', [config.label, field]) I believe this is resolved with your push?

arnelap · 2025-12-15T15:46:32Z

I've put it back in draft mode now that I realize we have to update the styles builder too

arnelap · 2025-12-15T16:52:47Z

reminder for myself that the CSS changes also need to keep the old css in place for existing forms.
and that I need to make sure the styling stays consistent even if someone has a mix of old and new style in case someone adds a new field to an existing form.

Also made change to your last edit in form-generator to prevent a js error when adding fields and changed the default form content to be consistent.

arnelap · 2026-01-06T08:04:20Z

@dannyvankooten in my test setup your changes to field-generator caused a JS error when trying to add a field:
Uncaught TypeError: can't access property "length", e.min is undefined

So i changed that to if (config.min !== undefined && config.min.length) { ...
and i made the same change for some other config values.

I'm pretty sure I got th CSS down for both new and old style, using > and + to cover the different situation for the field inside and outside the label. Now the only small little detail is the CSS output of the styles builder in the Premium add-on... :)

arnelap · 2026-01-06T10:06:07Z

so we will always have the issue of Premium add-on being "out of sync" with this sort of update, I think the best solution we can offer is first publishing the Premium add-on update, wait a bit and then publish this update?

That is the main reason for me to leave this on draft for now, besides it still warranting some more testing I suppose.

Copilot

Pull request overview

This PR improves generated Mailchimp form accessibility by associating labels implicitly and grouping checkbox/radio choices with fieldsets.

Changes:

Wraps generated text/select inputs inside labels when labels are shown.
Wraps checkbox/radio groups in fieldsets with legends.
Updates basic/theme CSS for nested input layouts.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
`assets/src/js/admin/form-editor/field-generator.js`	Changes generated markup for labels, inputs, checkbox/radio groups, and wrapping behavior.
`assets/src/js/admin/form-editor/field-forms.js`	Adjusts editor options shown for choice fields.
`assets/src/css/form-basic.css`	Updates basic form styling for nested inputs.
`assets/src/css/form-themes.css`	Updates themed form styling for nested inputs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  if (config.label && config.showLabel) {
+    return m('label', [
+      config.label,
+      m('input', attributes)
+    ])


+  return m('fieldset', [
+    config.label && config.showLabel ? m('legend', config.label) : null,


+  }

-  if (config.type === 'select' || config.type === 'radio') {
+  if (config.type === 'select') {


+/* NEW STYLE: When input is nested inside label */
+.mc4wp-form-basic label > input {


+}
+
+/* NEW STYLE: When input is nested inside label */
+.mc4wp-form-theme label > input {


arnelap added 3 commits December 10, 2025 11:57

Associating labels implicitly by wrapping the inputs in labels and ap…

d25c8d5

…plying fieldset to checkboxes/radios also changed the default form to not include any ID as that would cause invalid HTML if there are multiple forms on one page.

it aint pretty(print) but it's the only way i managed to get the /lab…

ec3939d

…el to wrap to new line for terms agreement

my editor removed a return at the end of the file :/

99cb6ec

arnelap marked this pull request as draft December 10, 2025 12:17

es lint stuff

ceb4e3f

arnelap marked this pull request as ready for review December 10, 2025 12:25

arnelap marked this pull request as draft December 13, 2025 15:03

fixed the return before /label without a replace

c9e079e

arnelap marked this pull request as ready for review December 13, 2025 15:28

dannyvankooten reviewed Dec 15, 2025

View reviewed changes

dannyvankooten and others added 2 commits December 15, 2025 15:04

Update field-generator.js

9d282fb

Wrapping label text in span, and updating default form for the same. …

6541512

…Also some CSS changes to target that span instead of label

arnelap marked this pull request as draft December 15, 2025 15:46

CSS to support both new and old style

1c3b8bb

Also made change to your last edit in form-generator to prevent a js error when adding fields and changed the default form content to be consistent.

Merge branch 'main' into accessibility-labels

510c943

dannyvankooten marked this pull request as ready for review May 15, 2026 12:46

Copilot AI review requested due to automatic review settings May 15, 2026 12:46

dannyvankooten merged commit 607a9ed into ibericode:main May 15, 2026
8 checks passed

Copilot started reviewing on behalf of dannyvankooten May 15, 2026 12:46 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

		return m('fieldset', [
		config.label && config.showLabel ? m('legend', config.label) : null,

		/* NEW STYLE: When input is nested inside label */
		.mc4wp-form-basic label > input {

Conversation

arnelap commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arnelap commented Dec 13, 2025

Uh oh!

Uh oh!

dannyvankooten Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

arnelap Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

dannyvankooten Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

arnelap Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

arnelap Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

arnelap Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dannyvankooten commented Dec 15, 2025 via email

Uh oh!

arnelap commented Dec 15, 2025

Uh oh!

arnelap commented Dec 15, 2025

Uh oh!

arnelap commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arnelap commented Jan 6, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

arnelap commented Dec 10, 2025 •

edited

Loading

arnelap commented Jan 6, 2026 •

edited

Loading