DateSegment is not always associated with the field label
- 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
We experience quite a few flaky e2e tests at the moment, resulting from Playwright not finding certain elements.
They can be reproduced by running them multiple times, it's hard to reproduce them in isolation.
We use our own componets on react-aria-components, using SSR/streaming with nextjs.
### 🤔 Expected Behavior?
DateSegements are correctly associated via `aria-labelledby` to the id of the Field label.
### 😯 Current Behavior
Sometimes the field label has a different id as the one referenced within the DateSegements.
I took two dom snapshots from the component and strip the classnames etc from them.
**Working**
You can see the id `react-aria-_R_4eqlubsnubsnql9fivbH4_` is from the label and referenced 5 times including all segments.
```html
Label
icon
```
**Not working**
Funnily enough the same id `react-aria-_R_4eqlubsnubsnql9fivbH4_` is assigned to the label, but not reference in the segments. Instead the segments are associated with id `react-aria-_R_13mlfiv5viv5ul9fivbH4_` which does not exist (does also not exist in the surrounding document)
```html
Label
icon
```
### 💁 Possible Solution
I assume that this is a problem with the global `hookData` weakmap which is used to share exactly this state inside of `useDateField` via `hookData.set`. `useDateSegment` reads via `hookData.get` from this global weakmap.
But looks like the content is different. It may be related to SSR, but I can't say for sure.
I'm interested to learn why you opted for the global weakmap instead of sharing this via context which should solve the out of sync IDs.
### 🔦 Context
It's hard to tell if this has real world impact of this is just something that happens occasionally within our playwright tests.
I never encountered the problem whe working with our application, but I'm not an impaired users - so not relying on aria associations. The average user will not notice the problem
### 🖥️ Steps to Reproduce
Hard to isolate the problem.
### Version
react-aria-components@1.15.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
Chromium/Playwright
### What operating system are you using?
MacOS, Ubuntu (CI)
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start by inspecting useDateField, useDateSegment, and the global hookData WeakMap mentioned in the report. Reproduce the issue through the Playwright end-to-end tests while comparing server-rendered and client-rendered IDs. Done means every DateSegment consistently references an existing field-label ID in aria-labelledby.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, playwright, react, typescript
- Domain
- accessibility, frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 42/100