fix: Fixes button dropdown main action aria label (#2604)

cloudscape-design · Aug 22, 2024 · 04ca596 · 04ca596
1 parent a35b753
commit 04ca596
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/button-dropdown/__tests__/button-dropdown.test.tsx b/src/button-dropdown/__tests__/button-dropdown.test.tsx
@@ -256,21 +256,35 @@ describe('with main action', () => {
     expect(onFollow).toHaveBeenCalledTimes(1);
   });
 
-  test('main action with external link has an icon and dedicated ARIA label', () => {
+  test('main action assigns ARIA label', () => {
     const wrapper = renderSplitButtonDropdown({
       mainAction: {
         text: 'Main',
-        href: 'https://external.com',
-        external: true,
-        externalIconAriaLabel: '(opens in a new tab)',
+        ariaLabel: 'Main #1',
       },
     });
 
-    expect(wrapper.findMainAction()?.findByClassName(iconStyles.icon)).not.toBe(null);
     expect(wrapper.findMainAction()!.getElement()).toHaveTextContent('Main');
-    expect(wrapper.findMainAction()!.getElement()).toHaveAccessibleName('Main (opens in a new tab)');
+    expect(wrapper.findMainAction()!.getElement()).toHaveAccessibleName('Main #1');
   });
 
+  test.each([undefined, 'Main #1'])(
+    'main action with external link has an icon and dedicated ARIA label, ariaLabel=%s',
+    ariaLabel => {
+      const text = 'Main';
+      const externalIconAriaLabel = '(opens in a new tab)';
+      const wrapper = renderSplitButtonDropdown({
+        mainAction: { text, ariaLabel, href: 'https://external.com', external: true, externalIconAriaLabel },
+      });
+
+      expect(wrapper.findMainAction()?.findByClassName(iconStyles.icon)).not.toBe(null);
+      expect(wrapper.findMainAction()!.getElement()).toHaveTextContent('Main');
+      expect(wrapper.findMainAction()!.getElement()).toHaveAccessibleName(
+        `${ariaLabel ?? text} ${externalIconAriaLabel}`
+      );
+    }
+  );
+
   test('main action can be set as disabled', () => {
     const wrapper = renderSplitButtonDropdown({
       mainAction: { text: 'Main', disabled: true },

diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -209,7 +209,7 @@ const InternalButtonDropdown = React.forwardRef(
         : ({ iconName, iconAlt, iconSvg, iconUrl } as const);
       const mainActionAriaLabel = externalIconAriaLabel
         ? `${mainAction.ariaLabel ?? mainAction.text} ${mainAction.externalIconAriaLabel}`
-        : undefined;
+        : mainAction.ariaLabel;
 
       trigger = (
         <div role="group" aria-label={ariaLabel} className={styles['split-trigger-wrapper']}>