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 all 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
6 changes: 3 additions & 3 deletions assets/src/css/form-basic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.mc4wp-form-basic {
margin: 1em 0;
}
.mc4wp-form-basic label,
.mc4wp-form-basic label span,
.mc4wp-form-basic input {
width: auto;
display: block;
Expand All @@ -14,13 +14,13 @@
vertical-align: baseline;
line-height: normal;
}
.mc4wp-form-basic label:after,
.mc4wp-form-basic label span:after,
.mc4wp-form-basic input:after {
content:"";
display:table;
clear:both;
}
.mc4wp-form-basic label {
.mc4wp-form-basic label span {
font-weight: bold;
margin-bottom: 6px;
display: block;
Expand Down
6 changes: 3 additions & 3 deletions assets/src/css/form-themes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.mc4wp-form-theme {
margin: 1em 0;
}
.mc4wp-form-theme label,
.mc4wp-form-theme label span,
.mc4wp-form-theme input {
width: auto;
display: block;
Expand All @@ -14,13 +14,13 @@
vertical-align: baseline;
line-height: normal;
}
.mc4wp-form-theme label:after,
.mc4wp-form-theme label span:after,
.mc4wp-form-theme input:after {
content:"";
display:table;
clear:both;
}
.mc4wp-form-theme label {
.mc4wp-form-theme label span {
font-weight: bold;
margin-bottom: 6px;
display: block;
Expand Down
6 changes: 4 additions & 2 deletions 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,9 +47,11 @@ forms.choice = function (config) {
visibleRows.push(rows.placeholder(config))
}

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

if (config.type === 'select' || config.type === 'radio') {
if (config.type === 'select') {
visibleRows.push(rows.isRequired(config))
}

Expand Down
77 changes: 43 additions & 34 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 @@ -52,6 +52,13 @@ generators.select = function (config) {
)
}

if (config.label && config.showLabel) {
return m('label', [
config.label,
m('select', attributes, options)
])
}

return m('select', attributes, options)
}

Expand All @@ -72,7 +79,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 All @@ -83,24 +90,26 @@ generators['terms-checkbox'] = function (config) {
* @returns {*}
*/
generators.checkbox = function (config) {
return config.choices.map(function (choice) {
const name = config.name + (config.type === 'checkbox' ? '[]' : '')
const required = config.required && config.type === 'radio'

return m('label', [
m('input', {
name,
type: config.type,
value: choice.value,
checked: choice.selected,
required,
oncreate: setAttributes
}),
' ',
m('span', choice.label)
]
)
})
return m('fieldset', [
config.label && config.showLabel ? m('legend', config.label) : null,
config.choices.map(function (choice) {
const name = config.name + (config.type === 'checkbox' ? '[]' : '')
const required = config.required && config.type === 'radio'

return m('label', [
m('input', {
name,
type: config.type,
value: choice.value,
checked: choice.selected,
required,
oncreate: setAttributes
}),
' ',
m('span', choice.label)
])
})
])
}
generators.radio = generators.checkbox

Expand All @@ -121,25 +130,32 @@ generators.default = function (config) {
attributes.name = config.name
}

if (config.min) {
if (config.min.length) {
attributes.min = config.min
}

if (config.max) {
if (config.max.length) {
attributes.max = config.max
}

if (config.value.length > 0) {
if (config.value.length) {
attributes.value = config.value
}

if (config.placeholder.length > 0) {
if (config.placeholder.length) {
attributes.placeholder = config.placeholder
}

attributes.required = config.required
attributes.oncreate = setAttributes

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

return m('input', attributes)
}

Expand All @@ -155,19 +171,12 @@ 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 content = (generators[config.type] || generators.default)(config)
const wrap = config.wrap && config.type !== 'radio' && config.type !== 'checkbox'
const htmlTemplate = wrap ? 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><span>{$email_label}</span>: \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;