Prefer using `aria-errormessage` above `aria-describedby`
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
Looking at https://w3c.github.io/aria/#aria-errormessage it seems this is the preferred way to reference an error. React aria is using `aria-describedby` instead to reference errors.
### 🤔 Expected Behavior?
I expect the error reference to use `aria-errormessage` as it's more accessible.
### 😯 Current Behavior
Looking at https://react-spectrum.adobe.com/react-aria/TextField.html#html-forms, the dom looks like this:
```html
Please include an '@' in the email address. 'asdasd' is missing an '@'.
```
### 💁 Possible Solution
Use `aria-errormessage`. This may be a breaking change.
### 🔦 Context
This is not playing nicely with Jest selectors: https://github.com/testing-library/jest-dom#toHaveAccessibleErrorMessage, which is probably the most common way to assert your app is accessible.
### 🖥️ Steps to Reproduce
1. Go to example https://react-spectrum.adobe.com/react-aria/TextField.html#html-forms
2. Inspect the DOM
### Version
react aria components@latest
### What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge, Other
### If other, please specify.
All likely
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the React Aria TextField HTML forms example and the linked ARIA definition; trace where the error reference is produced. Done means invalid fields expose aria-errormessage rather than aria-describedby, while the documented example and accessibility assertions remain correct, including compatibility with jest-dom's accessible-error-message selector.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100