Form field labels include messages on the component

[buckett]

Background Information

Package Version(s):

10.24.0

Browser:

Chrome (probably all)

OS:

MacOS (probably all)

Device:

MacBook

Component:

FormField

Describe the Issue

Form fields include any messages associated with the component as part of the label. This does mean that a user can click on the error messages to focus on the field but can lead to slightly confusing labels for form elements.

Steps To Reproduce

https://codesandbox.io/p/devbox/s22qpm

Click on the button and you see the innerText of the form label.

Expected Behavior

The messages remain distinct from the label of the form element.

Possibly using https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-errormessage so that the error messages are still associated with the form field. If the message isn't an error then it should probably use https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby

Screenshots

Additional Information

Current Workaround(s):

Not really

Products Affected:

Local tools.

Are you willing to submit a PR to fix?

• [ ] Yes, I'm willing to submit a PR

Requested Priority:

Normal

[matyasf]

hi! Thanks for the report! Can you please make the codesandbox link public?

[buckett]

hi! Thanks for the report! Can you please make the codesandbox link public?

Sorry about that @matyasf everyone should have access now.

[extra808]

Don't use aria-errormessage, it's not sufficiently well-supported.

There are two problems with this component:

• aria-describedby is on the wrong element; it's on the <label> but needs to be on the <input> (or <textarea>, I found this on the Textarea with errors).
• The <label> is around not only the input and the text meant to be the input's name but also the messages meant to be the description, not the name, of the input. There are two possible fixes:

1. Move the messages div outside the <label>
2. Move both the messages div and the input (or textarea) outside the <label> so only the name content is inside the <label>. Because the <label> is explicitly associated with the input through its for attribute, implicitly associating them by wrapping the label around the input is redundant.

Either way, for layout purposes you'll likely want a wrapper element around the <label> and everything not inside the the <label>.