diff --git a/src/button-dropdown/__tests__/button-dropdown.test.tsx b/src/button-dropdown/__tests__/button-dropdown.test.tsx index a7f09329bd..f84384477e 100644 --- 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 index 87dbb21850..28e415c97f 100644 --- 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 = (