ListBoxItem removes aria attributes in Safari, causing hydration issues

[cbodin]

Provide a general summary of the issue here

Aria attributes are removed client-side from the ListBoxItem in Safari, causing accessibility and hydration issues.

🤔 Expected Behavior?

Aria attributes should preferably not be removed.

😯 Current Behavior

Next.js shows hydration issues when using SSR and ListBox.

💁 Possible Solution

No response

🔦 Context

I am trying to use ListBox with SSR to create a list of items with a fancy design but i want to provide a custom text for screen readers to better understand the focused item.

🖥️ Steps to Reproduce

Open the following in Safari and preview the site. Nextjs will show hydration errors. https://codesandbox.io/p/devbox/2fycxh

Version

1.15.1

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

MacOS 26.3

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like it's caused by

react-spectrum/packages/@react-aria/listbox/src/useOption.ts

Line 114 in a9fccbd

if (!(isMac() && isWebKit())) {

Which is there due to a browser+VO bug, we should re-evaluate that to see if it's still necessary. According to the comments, it was fixed in 2023, which should be long enough ago for what we support.

Would you like to put together a branch to test with?

[cbodin]

Yes! That was the culprit. I created a PR which removes the workaround and updated a storybook example to be able to test it.