User tests: Successful: Unsuccessful:
Pull Request resolves #48243 .
This PR fixes accessibility issues reported in Issue #48243 where structural and non-standard fields (specifically Spacer and Captcha) generate invalid <label> markup.
Root cause:
These fields were rendering <label> tags that were either missing a for="..." attribute or pointing to a DOM ID that did not exist (since structural elements and JS widgets do not render standard <input id="..."> controls). This triggers "label not associated with a form control" warnings in developer consoles and accessibility testing tools.
Changes:
renderlabel.php Layout: Detects if the $for attribute is empty. If it is, it outputs a <span> instead of a <label>, ensuring semantic validity while preserving styling. It also accepts a predefined $id variable instead of enforcing $for . '-lbl'.CaptchaField: Overrides getLabel() to pass an empty string for the for attribute and passes the id explicitly, triggering the new <span> behavior since the JS captcha widget doesn't render a matching input ID.SpacerField: Modifies the hardcoded label string generation to natively output a <span> element instead of a <label>, as spacer fields act strictly as structural dividers.com_contact menu item.<label> tags are incorrectly used for elements that are not form controls, causing accessibility validation errors: "A form label must be associated with a control".jform_spacer-lbl or jform_captcha-lbl.<span> tags rather than invalid <label> tags.Please select:
Documentation link for guide.joomla.org:
No documentation changes for guide.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
| Category | ⇒ | Layout Libraries |
| Labels |
Added:
PR-5.4-dev
|
||
| Title |
|
||||||
A span instead of a label for the spacer could be correct, but the captcha is an input element and needs a label
| Labels |
Added:
a11y
|
||
| Labels |
Added:
Updates Requested
|
||
I have tested this item ✅ successfully on c37a232
I have tested this item ✅ successfully on c37a232
I have not tested this item.
Label is fixed on spacer when using any captcha. When using Aimy Captcha-Less the original problem still exists.
I have not tested this item.
Label is fixed on spacer when using any captcha. When using Aimy Captcha-Less the original problem still exists.
I am changing my result as it doesnt resolve the issue for all captcha plugins
FriendlyCaptcha ✖️
HashCash ✖️
JOfun ✖️
Q & A ✔️
@alwaysalearner1234 Please stick with the pull request template.
You have removed the AI policy confirmation. Please add that back and check the check box to confirm the AI policy.
In addition, please add a
Pull Request resolves #48243 .to the top so the issue is correctly referenced. That was also a part of the pull request template which you have removed.Please check and fix.
Thanks in advance.