[React 19] aria attributes on custom elements behave maybe incorrectly
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
Summary
In React 18, passing aria-disabled={true} to a custom element serialized that value as "true". That seemed good and as far as I can tell worked as expected.
In React 19, that same code adds the aria-disabled attribute, but doesn't set it to anything. That doesn't work as well. It appears to me (although I'm not certain) that it breaks accessibility for these custom elements. It definitely breaks @testing-library/jest-dom's toBeChecked matcher with aria-checked (https://github.com/testing-library/jest-dom/blob/918b6fbcde10d4409ee8f05c6e4eecbe96a72b7a/src/to-be-checked.js#L31).
For these aria attributes that require strings instead of booleans to function properly, is this an intended change?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the React 18 and React 19 CodeSandbox reproductions for aria-disabled and aria-checked on custom elements. Read the referenced jest-dom src/to-be-checked.js matcher to understand the observed failure, then trace React's custom-element ARIA attribute handling. Done means the intended serialization behavior is established and covered by an appropriate regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 56/100