adobe / adobe/react-spectrum

DateSegment is not always associated with the field label

Open
#9,675 2 comments 0 reactions 0 assignees View on GitHub
needs investigation ssr
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


mm/dd/yyyy




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


mm/dd/yyyy




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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.