chore: better ActionMenu default aria label (#8489)

snowystinger · web-flow · commit 7398a6f7212d · 2025-07-07T20:33:55.000Z
* chore: better ActionMenu default aria label

* fix yarn lock

* fix tests

* update test
diff --git a/packages/@react-spectrum/actiongroup/intl/ar-AE.json b/packages/@react-spectrum/actiongroup/intl/ar-AE.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/bg-BG.json b/packages/@react-spectrum/actiongroup/intl/bg-BG.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/cs-CZ.json b/packages/@react-spectrum/actiongroup/intl/cs-CZ.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/da-DK.json b/packages/@react-spectrum/actiongroup/intl/da-DK.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/de-DE.json b/packages/@react-spectrum/actiongroup/intl/de-DE.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/el-GR.json b/packages/@react-spectrum/actiongroup/intl/el-GR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/en-US.json b/packages/@react-spectrum/actiongroup/intl/en-US.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/es-ES.json b/packages/@react-spectrum/actiongroup/intl/es-ES.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/et-EE.json b/packages/@react-spectrum/actiongroup/intl/et-EE.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/fi-FI.json b/packages/@react-spectrum/actiongroup/intl/fi-FI.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/fr-FR.json b/packages/@react-spectrum/actiongroup/intl/fr-FR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/he-IL.json b/packages/@react-spectrum/actiongroup/intl/he-IL.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/hr-HR.json b/packages/@react-spectrum/actiongroup/intl/hr-HR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/hu-HU.json b/packages/@react-spectrum/actiongroup/intl/hu-HU.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/it-IT.json b/packages/@react-spectrum/actiongroup/intl/it-IT.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/ja-JP.json b/packages/@react-spectrum/actiongroup/intl/ja-JP.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/ko-KR.json b/packages/@react-spectrum/actiongroup/intl/ko-KR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/lt-LT.json b/packages/@react-spectrum/actiongroup/intl/lt-LT.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/lv-LV.json b/packages/@react-spectrum/actiongroup/intl/lv-LV.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/nb-NO.json b/packages/@react-spectrum/actiongroup/intl/nb-NO.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/nl-NL.json b/packages/@react-spectrum/actiongroup/intl/nl-NL.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/pl-PL.json b/packages/@react-spectrum/actiongroup/intl/pl-PL.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/pt-BR.json b/packages/@react-spectrum/actiongroup/intl/pt-BR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/pt-PT.json b/packages/@react-spectrum/actiongroup/intl/pt-PT.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/ro-RO.json b/packages/@react-spectrum/actiongroup/intl/ro-RO.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/ru-RU.json b/packages/@react-spectrum/actiongroup/intl/ru-RU.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/sk-SK.json b/packages/@react-spectrum/actiongroup/intl/sk-SK.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/sl-SI.json b/packages/@react-spectrum/actiongroup/intl/sl-SI.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/sr-SP.json b/packages/@react-spectrum/actiongroup/intl/sr-SP.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/sv-SE.json b/packages/@react-spectrum/actiongroup/intl/sv-SE.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/tr-TR.json b/packages/@react-spectrum/actiongroup/intl/tr-TR.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/uk-UA.json b/packages/@react-spectrum/actiongroup/intl/uk-UA.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/zh-CN.json b/packages/@react-spectrum/actiongroup/intl/zh-CN.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/intl/zh-TW.json b/packages/@react-spectrum/actiongroup/intl/zh-TW.json
@@ -0,0 +1,3 @@
+{
+  "more": "More items"
+}
diff --git a/packages/@react-spectrum/actiongroup/package.json b/packages/@react-spectrum/actiongroup/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@react-aria/actiongroup": "^3.7.18",
     "@react-aria/focus": "^3.20.5",
+    "@react-aria/i18n": "^3.12.10",
     "@react-aria/interactions": "^3.25.3",
     "@react-aria/utils": "^3.29.1",
     "@react-spectrum/button": "^3.16.16",
diff --git a/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx b/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
@@ -24,6 +24,8 @@ import {
 } from '@react-spectrum/utils';
 import {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-aria/utils';
 import {FocusScope} from '@react-aria/focus';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {ListState, useListState} from '@react-stately/list';
 import More from '@spectrum-icons/workflow/More';
@@ -35,6 +37,7 @@ import styles from '@adobe/spectrum-css-temp/components/actiongroup/vars.css';
 import {Text} from '@react-spectrum/text';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 import {useActionGroup, useActionGroupItem} from '@react-aria/actiongroup';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
 /**
@@ -375,6 +378,7 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
   // The key must actually exist in the collection for focus to work correctly.
   let key = items[0].key;
   let {buttonProps} = useActionGroupItem({key}, state);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/actiongroup');
 
   // The menu button shouldn't act like an actual action group item.
   delete buttonProps.onPress;
@@ -384,7 +388,7 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
   let {hoverProps, isHovered} = useHover({isDisabled});
 
   // If no aria-label or aria-labelledby is given, provide a default one.
-  let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : '…');
+  let ariaLabel = otherProps['aria-label'] || (otherProps['aria-labelledby'] ? undefined : stringFormatter.format('more'));
   let ariaLabelledby = otherProps['aria-labelledby'];
   let textId = useId();
   let id = useId();
diff --git a/packages/@react-spectrum/actiongroup/test/ActionGroup.test.js b/packages/@react-spectrum/actiongroup/test/ActionGroup.test.js
@@ -717,7 +717,7 @@ describe('ActionGroup', function () {
       let buttons = within(actiongroup).getAllByRole('button');
       expect(buttons.length).toBe(2);
       expect(buttons[0]).toHaveTextContent('One');
-      expect(buttons[1]).toHaveAttribute('aria-label', '…');
+      expect(buttons[1]).toHaveAttribute('aria-label', 'More items');
       expect(buttons[1]).toHaveAttribute('aria-haspopup', 'true');
       expect(buttons[1]).not.toHaveAttribute('aria-checked');
 
@@ -877,7 +877,7 @@ describe('ActionGroup', function () {
       expect(tree.queryByRole('radiogroup')).toBeNull();
 
       let button = tree.getByRole('button');
-      expect(button).toHaveAttribute('aria-label', '…');
+      expect(button).toHaveAttribute('aria-label', 'More items');
       expect(button).toHaveAttribute('aria-haspopup', 'true');
       expect(button).not.toHaveAttribute('aria-checked');
 
@@ -920,7 +920,7 @@ describe('ActionGroup', function () {
       expect(tree.queryByRole('radiogroup')).toBeNull();
 
       let button = tree.getByRole('button');
-      expect(button).toHaveAttribute('aria-label', '…');
+      expect(button).toHaveAttribute('aria-label', 'More items');
       expect(button).toHaveAttribute('aria-haspopup', 'true');
       expect(button).not.toHaveAttribute('aria-checked');
 
@@ -965,7 +965,7 @@ describe('ActionGroup', function () {
       expect(buttons.length).toBe(2);
       expect(buttons[0]).toHaveTextContent('One');
       expect(buttons[0]).toBeDisabled();
-      expect(buttons[1]).toHaveAttribute('aria-label', '…');
+      expect(buttons[1]).toHaveAttribute('aria-label', 'More items');
       expect(buttons[1]).toHaveAttribute('aria-haspopup', 'true');
       expect(buttons[1]).not.toHaveAttribute('aria-checked');
       expect(buttons[1]).toBeDisabled();
@@ -989,7 +989,7 @@ describe('ActionGroup', function () {
       expect(within(actionGroup).getAllByRole('button')).toHaveLength(2);
       expect(within(actionGroup).getByRole('button', {name: 'One'})).toBeVisible();
 
-      const moreButton = within(actionGroup).getByRole('button', {name: '…'});
+      const moreButton = within(actionGroup).getByRole('button', {name: 'More items'});
       expect(moreButton).not.toHaveAttribute('aria-checked');
       expect(moreButton).toBeVisible();
 
diff --git a/yarn.lock b/yarn.lock
@@ -6391,6 +6391,7 @@ __metadata:
     "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
     "@react-aria/actiongroup": "npm:^3.7.18"
     "@react-aria/focus": "npm:^3.20.5"
+    "@react-aria/i18n": "npm:^3.12.10"
     "@react-aria/interactions": "npm:^3.25.3"
     "@react-aria/utils": "npm:^3.29.1"
     "@react-spectrum/button": "npm:^3.16.16"
