a11y: Error messages are not programmatically associated with form fields

[Kinbaum]

What package has an issue

@mantine/core

Describe the bug

Visible error messages are not programmatically associated with their related form fields. As a result, screen reader users will not hear an announcement of the associated error message when they focus on an input field.

What version of @mantine/hooks page do you have in package.json?

5.9.2

If possible, please include a link to a codesandbox with the reproduced problem

https://mantine.dev/core/text-input/

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

Programmatically associate the error message for any form field in error using aria-describedby.  Remove the aria-describedby attribute when errors are resolved and the visible error message disappears.

The role="alert" should not be on these errors either. That can make for a bunch of announcements if a user is just tabbing through each field with a screen reader on.

[rtivital]

@Kinbaum how should we handle the case when input has both error and description?

[Kinbaum]

They would both be referenced in the aria-describedby attribute, with the error first and description second. So if the error had an id="error-1" and the description was id="desc-1", the attribute on the <input> would be aria-describedby="error-1 desc-1"

Then when the error is cleared it would go back to just aria-describedby="desc-1"

[rtivital]

Alright, thanks for reporting and explanation, the issue will be fixed in one of the next patches

[rtivital]

Fixed in 5.9.4