[TextField] Attach `aria-errormessage` attribute

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I noticed that the TextField component does not take advantage of the aria-errormessage attribute. In this example

<TextField
    label="Name"
    size='small'
    fullWidth
    margin='normal'
    placeholder='What do you want to call it?'
    error={Boolean(errors.name)}
    helperText={errors.name?.message}
/>

The input that is rendered in the DOM has aria-invalid="true" and aria-describedby=":rl:-helper-text" which points to <p id=":rl:-helper-text" ...>Must be at least 2 characters</p>. It does not have aria-errormessage attribute set. Please see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage

Examples 🌈

No response

Motivation 🔦

No response

Start at the TextField component entry point and inspect how its input, error state, and helper text currently produce aria-invalid and aria-describedby. Read the linked aria-errormessage reference; done means the rendered error state exposes the requested attribute pointing to the error message while preserving the existing accessibility attributes.