ActionGroup: When overflowMode collapse is used, resulting menubutton with ellipsis needs a better label

[dineshy87]

🐛 Bug Report

When OverflowMode: collapse results in Actiongroups behaving like menu buttons, the resulting menubutton seems to have an aria-label=“…”. This is announced as "ellipsis" when voiceOver is used. And on windows, NVDA and narrator consider it as having no label and announces nothing. Refer to this storybook example

Note: This effects ActionBar as well and is more of an issue on mobile because actiongroup is almost always collapsed on mobile.

🤔 Expected Behavior

Instead of aria-label="...", more may be a better label for these menubuttons or something else. In cases where entire toolbar can be collapsed to one button, the menubutton must take that the label of toolbar itself. (I see that it's already happening in this example)

😯 Current Behavior

Collapsed menubutton has aria-label="..." which is completely ignored by some screen readers. And therefore is not an ideal label for the button.

💻 Code Sample

Issue can be observed on these storybook examples by testing using NVDA on Firefox/Edge.

You can use https://assistivlabs.com/ to verify this if you do not have a windows machine.

🌍 Your Environment

Software	Version(s)
react-spectrum	3
Browser	Firefox & Edge (at least)
Operating System	Windows

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[snowystinger]

Storybook is not our documentation. It's just for internal testing. Our docs page appears to have a better label https://react-spectrum.adobe.com/react-spectrum/ActionMenu.html#actionmenu
Closing, if there are any in the docs pages which need better labels, we can reopen.

[snowystinger]

Ah, I see. The ellipsis does appear in the docs if you get the ActionGroup to partially collapse. The aria-label is only passed through to the ActionButton for the menu if every item is hidden.
We should probably have a better/localized string instead of the '…'

react-spectrum/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

Line 390 in cfd890e

let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : '…');