Popover: label missing from Popover.Root

[simonxabris]

Bug report

Current Behavior

The Popover implements the dialog pattern, but is missing one thing, the label on the dialog element itself.

The pattern states the following:

The dialog has either:
A value set for the aria-labelledby property that refers to a visible dialog title.
A label specified by aria-label.

But this does not seem to be implemented.

Expected behavior

There's an API which I can use the set a label for the element that has role="dialog" on it.

Reproducible example

I did not create a reproduction as you can just go to the docs page, open the popover, inspect the element and see that there's no aria-label or aria-labelledby attribute on it.

Suggested solution

I have two suggestions in mind.

• Creating a Popover.Header element, that people can use to render whatever heading they want for their Popover and internally we can link to content of this element to the role="dialog" element by adding an id to it and using aria-labelledby.
• Adding a label prop that accepts a string that we can put into the aria-label attribute. This solution could be useful when the popover does not have a clear title, but you still want to provide one for assistive technology users.

I suppose the first solution is more radix-y, but both could be implemented and the label prop can be an escape hatch.

If we can figure out what road to go down on, I'm happy to submit a PR with the preferred solution.

Your environment

It happens on every environment

[benoitgrelard]

You can already just pass an aria-label or aria-labelledby if you want, as every DOM props are accepted.
That said, seems like a decent suggestion to potentially add to the lib.