[TextField] helperText accessibility

[ghost]

<TextField /> property helperText is not accessible. I believe aria-describedby should be applied to the InputElement and not to the FormControl 🤔

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Using the macOS Mojave screenreader, I should hear the helper text read aloud.

Current Behavior

I am not hearing the helperText

Steps to Reproduce 🕹

This behavior is evident in the TextField demos. The error text is not read aloud.

Context 🔦

I am trying to help users smoothly navigate a signup flow with various password creation requirements.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.0
React	v16.7.0
Browser	Chrome
TypeScript	Not in use

[oliviertassinari]

@enagy-earnup I think that you are right: https://www.w3.org/TR/WCAG20-TECHS/ARIA21.html. How do you think that we should solve the issue? Fix the demos with a documentation section on the accessible error messages?

[mlenser]

@oliviertassinari moving the aria-describedby to the input solves the accessibility issue - I just tested it with NVDA with the button demos and moving the aria tag via DOM editor.

Isn't this an issue that needs to be solved in the TextField component?

Suggestion:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TextField/TextField.js#L139 needs to be moved to the Select on line 153 and added to the InputElement on line 114.

[oliviertassinari]

@mlenser Yes, I think that you are right. We should push #9617 one step further. Do you want to open a pull-request? :) Also, it would be great to add an Accessibility section to the documentation for the textfield!

[mlenser]

@oliviertassinari ya, I'll send a PR to fix this, assuming I can set up the repo. I'll investigate now.

I've only briefly dove into material-ui's accessibility so probably best for someone who knows the whole scope to document what has been done.