No title id is returned when useDialog and useOverlayTriggerState are used in the same component

[loicplaire]

Provide a general summary of the issue here

We are building an AlertDialog component in our components library using the useDialog, useModalOverlay and useOverlayTriggerState hooks.

It seems, that using useOverlayTriggerState in the same component as useDialog seems to trigger a rerender which causes the titleProps.id to be undefined on the second pass.

This causes accessibility issues as the dialog can't be properly labelled without that id.

🤔 Expected Behavior?

The titleProps.id should not be undefined.

😯 Current Behavior

You can verify this issue in this codesanbox: view in Codesanbox.

In the console, you'll notice that the id is correct on the first pass but undefined on the rerender.

💁 Possible Solution

Our current solution is to create a separate child component so that useDialog and useOverlayTriggerState are not used in the same component however this is not ideal.

Is the issue potentially with useSlotId or are we using the hook(s) the wrong way?

Thank you!

🔦 Context

No response

🖥️ Steps to Reproduce

As per the details above, we copied your AlertDialog codesanbox and adapted it to match our implementation: view codesanbox.

Version

3.30.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

That is interesting, because we do a search in the dom to find out if there is a title which is using the id so we don't label by an id which doesn't exist, which would also be an issue. That's what useSlotId does https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/dialog/src/useDialog.ts#L34

If you can separate them, that'd be preferable, and you'll get more reusability out of the deal. There may be some other issues if you use both in the same component

You don't have to give up on having a single React component to represent the whole thing, but inside it, you can split them up.

If you really cannot separate them, it'd be good to know a bit more about why.

This is likely a common thing for people to accidentally do. We do have some ideas to show more warnings in developer mode when things aren't quite wired right. I'm not sure what else we'd do, we're already querying the entire dom.

The last thing I'll mention is that I don't know if we've made any other assumptions based on these being two components. One possibility is that the focus scope may behave oddly. I tried your codesandbox, and it appears to be working, but that doesn't mean I tested every edge case.

[loicplaire]

Thanks @snowystinger for your quick answer! It's good to get confirmation that not using them together in the recommendation. 🙇🏻‍♂️

You don't have to give up on having a single React component to represent the whole thing, but inside it, you can split them up.

Yes, that's exactly the alternative approach that we took which works fine for us.

This is likely a common thing for people to accidentally do. We do have some ideas to show more warnings in developer mode when things aren't quite wired right.

That would be great if there was a way to display a warning in dev mode as this silently makes the dialog inaccessible.

Thanks again for your help!

[snowystinger]

We now have dev warnings if anyone would like to contribute this. Example here

react-spectrum/packages/@react-spectrum/well/src/Well.tsx

Line 33 in 85764ff

if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {

process.env.NODE_ENV !== 'production'

[mvanhorn]

I've submitted a PR for this: #9819

Adds a dev-mode warning in useDialog when no aria-label, aria-labelledby, or title element is present. The warning fires once per dialog instance via useEffect (after the DOM is stable) and is tree-shaken in production. Follows the same pattern used in useToggle, useMenu, and useGrid.