[TextField] aria-live="polite" should be added to input errors

[BennyAlex]

Summary

When an input is in the error state and has an helper text there should be an aria-live="polite" attribute so screenreader users will be notified correctly.

Examples

No response

Motivation

Make the web more accessible

Search keywords: aria-live

[mnajdova]

Is there an official recommendation for the errored text fields errors to be using aria-live="polite"? It may be a bit too aggressive in my opinion to have it by default.

You can add it yourself by using the slotProps prop, e.g.:

 <TextField
   error
   id="filled-error-helper-text"
   label="Error"
   defaultValue="Hello World"
   helperText="Incorrect entry."
+  slotProps={{ formHelperText: { 'aria-live': 'polite' } }}
 />

cc @colmtuite do you maybe have some suggestion here?

[colmtuite]

@BennyAlex @mnajdova The required, aria-describedby, and aria-invalid attrs should handle this by announcing the required field and its corresponding helper text when focus is placed back on the invalid input after the attempted form submission.

It would be different if you have a block of error messages above your form, but in that case, the error block would typically be role="alert" anyway.

So either way, adding aria-live="polite" by default is a bit aggressive, yep.

[BennyAlex]

Its not only the textfield its for all errors on inputs, so checkboxes and autocomplete for example would need this to.

When an user types or selects something and the state changes (becomes errorneous) the user needs an feedback. For seeing users this is already solved, but screenreader users only see the difference when they proceed / go down to the helper text.

For such dynamic content aria-live was introduced.

[mnajdova]

I'll wait for more upvotes or comment before doing any action about this issue. There is a way for users to add the prop if they feel like that is the best use-case for their forms.