[Bug]: Popover component misses aria-label

[nicooprat]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: [email protected]
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.radix-vue.com/components/popover.html

Steps to reproduce

Inspect code of the popover:

<div
  trapfocus="false"
  disableoutsidepointerevents="false"
  id="radix-vue-popover-content-27"
  data-state="open"
  role="dialog"
  data-dismissable-layer=""
  tabindex="-1"
  class="..."
  data-side="bottom"
  data-align="center"
  style="...">
</div>

Describe the bug

It has role="dialog" but is missing aria-label or aria-labelledby.

Expected behavior

I could workaround this by using an unique ID as label: https://stackblitz.com/edit/zxrcsg.

Context & Screenshots (if applicable)

Found the issue because the accessibility checks were not passing in Storybook. The rule is noted as "serious impact" in Axe: https://dequeuniversity.com/rules/axe/4.2/aria-dialog-name

Looks like Radix UI has the same issue: https://www.radix-ui.com/primitives/docs/components/popover

Also, the link in accessibility section is 404: https://www.radix-vue.com/components/popover.html#accessibility (goes to https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal)

[zernonia]

Yup seems like the issue from Radix UI.
I'm thinking of the solution 1 suggested by the linked issue above. 😁

As a temporary workaround, you can always add aria-label attribute to PopoverContent