Form field labels include messages on the component

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