ActionMenu.Overlay doesn't render aria attributes consistently on the same elements
Description
When using aria-label on a ActionMenu.Overlay
<ActionMenu.Overlay
role="dialog"
aria-label="Configure vertical markers to display on roadmap"
>
...
the aria-label is rendered onto the dialog:
but when using
<ActionMenu.Overlay aria-labelledby="testing">
...
The aria-labelledby is rendered onto the child menu:
I would expect that these aria attributes to be rendered both onto the dialog or that there's a way to set the aria-labelledby onto the dialog.
Steps to reproduce
See description.
Version
v36.6.0
Browser
Chrome
Uh oh! @skw, the image you shared is missing helpful alt text. Check your issue body.
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.
Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
Good catch!
The intention in this component is to always label the "menu" and not the overlay container. Passing aria-label to the Overlay does not do that, which can be seen as a bug.
When you are marking ActionMenu.Overlay as role=dialog, would both the dialog and the menu inside the dialog have the same label? Possibly redudant, the semantics aren't super clear to met yet.
Hello @skw 👋 Just a reminder that we are waiting a response from you to move forward with the issue. (Please refer to the previous comment). Thank you 🙌
Hi there! 👋 Just following up, since we haven't heard back in two weeks I'm going to close this one out. Feel free to leave a comment and we can re-open if this is still an issue!