React Aria Popover - aria-controls points to nowhere

[adhameer]

Provide a general summary of the issue here

When triggering a popover using DialogTrigger as in the examples in the Popover documentation, the trigger sets an id for aria-controls. However, this id is not set on the popover, so aria-controls points to an invalid id.

🤔 Expected Behavior?

aria-controls of the trigger should point to the popover dialog when the dialog is open (or at least should not point to an invalid id).

😯 Current Behavior

aria-controls is an id that is not found anywhere else in the DOM.

💁 Possible Solution

It seems like the id prop was forgotten in the popover context in this case?

🔦 Context

No response

🖥️ Steps to Reproduce

This can be reproduced in the react-aria docs themselves: https://react-aria.adobe.com/Popover

1. Click the trigger to open the popover
2. Inspect the trigger - note that it has aria-controls set
3. Inspect the popover dialog - note that no id is set
4. Search the rest of the DOM - the id pointed at by aria-controls does not appear anywhere else

Version

react-aria-components version 1.15.0, but this also happens in the version used for the docs which I assume is the latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[albertdugba]

It seems the id from overlayProps gets passed to DialogContext but not to PopoverContext, so the popover element never actually receives the id that aria-controls points to. Will push a fix.

react-spectrum/packages/react-aria-components/src/Dialog.tsx

Lines 82 to 87 in b5cbf5b

	[PopoverContext, {
	trigger: 'DialogTrigger',
	triggerRef: buttonRef,
	'aria-labelledby': overlayProps['aria-labelledby'],
	style: {'--trigger-width': buttonWidth} as React.CSSProperties
	}]