[material-ui][TextField] Attach `aria-errormessage` attribute

[sdemjanenko]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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

[blakenetz]

Though it's not explicitly called out in the W3 docs, it appears the aria-errormessage attribute should take the place of the aria-description attribute when the component is in an invalid state (i.e. aria-invalid="true"). I have a branch that makes these changes in the InputBase comp, but I'm not entirely sure y'all's stance on overwriting user-assign props. Alternatively, I can render both attributes and do some tests with VoiceOver, but I thought I'd start by polling here.

[blakenetz]

Just following up on this. As of today, it doesn't look like aria-errormessage has full browser support:

• https://a11ysupport.io/tech/aria/aria-errormessage_attribute
• https://caniuse.com/?search=aria-errormessage

[garyb1]

I agree with @blakenetz that support is not there yet.

Adrian Roselli wrote about exposing field errors in August and some of the findings are interesting. He also notes that some chromium browsers treat aria-describedby as a live region.

See active discussion about aria-errormessage support for NVDA which is open since 2018.