Skip to content

Accessibility labels for form fields and fieldsets #805

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.

Sign up for GitHub

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

Draft
arnelap wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Accessibility labels for form fields and fieldsets #805

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d25c8d5
Associating labels implicitly by wrapping the inputs in labels and ap…
arnelap Dec 10, 2025
ec3939d
it aint pretty(print) but it's the only way i managed to get the /lab…
arnelap Dec 10, 2025
99cb6ec
my editor removed a return at the end of the file :/
arnelap Dec 10, 2025
ceb4e3f
es lint stuff
arnelap Dec 10, 2025
c9e079e
fixed the return before /label without a replace
arnelap Dec 13, 2025
9d282fb
Update field-generator.js
dannyvankooten Dec 15, 2025
6541512
Wrapping label text in span, and updating default form for the same. …
arnelap Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion assets/src/js/admin/form-editor/field-forms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ forms.choice = function (config) {
visibleRows.push(rows.placeholder(config))
}

visibleRows.push(rows.useParagraphs(config))
if (config.type !== 'checkbox') {
visibleRows.push(rows.useParagraphs(config))
}

if (config.type === 'select' || config.type === 'radio') {
visibleRows.push(rows.isRequired(config))
Expand Down
28 changes: 17 additions & 11 deletions assets/src/js/admin/form-editor/field-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ generators['terms-checkbox'] = function (config) {
required: config.required
}),
' ',
label
m('span', label)
Copy link
Member

@dannyvankooten dannyvankooten Dec 15, 2025

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

@arnelap arnelap Dec 15, 2025

Choose a reason for hiding this comment

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

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...

])
}

Expand Down Expand Up @@ -155,19 +155,25 @@ generators.procaptcha = function (config) {
* @returns {string}
*/
function generate (config) {
const labelAtts = {}
const label = config.label.length > 0 && config.showLabel ? m('label', labelAtts, config.label) : ''
const field = typeof (generators[config.type]) === 'function' ? generators[config.type](config) : generators.default(config)
const htmlTemplate = config.wrap ? m('p', [label, field]) : [label, field]

// render in vdom
const isNested = !['checkbox', 'radio'].includes(config.type)
const field = (generators[config.type] || generators.default)(config)
const hasLabel = config.label.length > 0 && config.showLabel

const content = config.type === 'terms-checkbox'
? field
: isNested
? (hasLabel
? m('label', [config.label, field])
Copy link
Member

@dannyvankooten dannyvankooten Dec 15, 2025

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

@arnelap arnelap Dec 15, 2025

Choose a reason for hiding this comment

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

Good idea

Copy link
Contributor Author

@arnelap arnelap Dec 15, 2025

Choose a reason for hiding this comment

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

and styles builder possibly as well, will click around

Copy link
Contributor Author

@arnelap arnelap Dec 15, 2025

Choose a reason for hiding this comment

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

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

: field)
: m('fieldset', [hasLabel
? m('legend', config.label)
: '', field])

const htmlTemplate = (config.wrap && isNested) ? m('p', content) : content
const vdom = document.createElement('div')
m.render(vdom, htmlTemplate)

// prettify html
const html = htmlutil.prettyPrint(vdom.innerHTML)

return html + '\n'
return htmlutil.prettyPrint(vdom.innerHTML) + '\n'
}

module.exports = generate
4 changes: 2 additions & 2 deletions config/default-form-content.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
$email_placeholder_attr = esc_attr__('Your email address', 'mailchimp-for-wp');
$signup_button_value = esc_attr__('Sign up', 'mailchimp-for-wp');

$content = "<p>\n\t<label for=\"email\">{$email_label}: \n";
$content .= "\t\t<input type=\"email\" id=\"email\" name=\"EMAIL\" placeholder=\"{$email_placeholder_attr}\" required>\n\t</label>\n</p>\n\n";
$content = "<p>\n\t<label>{$email_label}: \n";
$content .= "\t\t<input type=\"email\" name=\"EMAIL\" placeholder=\"{$email_placeholder_attr}\" required>\n\t</label>\n</p>\n\n";
$content .= "<p>\n\t<input type=\"submit\" value=\"{$signup_button_value}\">\n</p>";

return $content;