adobe / adobe/react-spectrum

Prefer using `aria-errormessage` above `aria-describedby`

Open
#7,425 8 comments 2 reactions 0 assignees View on GitHub
accessibility needs investigation
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



Email



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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.