fix(button): always pass aria-label down to the html element

fixes #5311

src/components/button/button.component.tsx

@@ -20,9 +20,9 @@ export type SizeOptions = "small" | "medium" | "large";
 export type ButtonIconPosition = "before" | "after";
 
 export interface ButtonProps extends SpaceProps {
-  /** Prop to specify the aria-label text.
-   *  Only to be used in Button when only an icon is rendered.
-   * This is required to comply with WCAG 4.1.2 - Buttons must have discernible text
+  /**
+   * Prop to specify the aria-label attribute of the component
+   * Defaults to the iconType, when the component has only an icon
    */
   "aria-label"?: string;
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "darkBackground" */
@@ -250,7 +250,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <StyledButton
-        aria-label={!children && iconType ? ariaLabel || iconType : undefined}
+        aria-label={!children && iconType ? ariaLabel || iconType : ariaLabel}
         as={!disabled && href ? "a" : "button"}
         onKeyDown={href ? handleLinkKeyDown : undefined}
         draggable={false}

src/components/button/button.spec.tsx

@@ -668,12 +668,26 @@ describe("Button", () => {
   });
 
   describe("aria-label", () => {
-    it("should be present when button has only an icon", () => {
+    it("when defined, should be present on the button element", () => {
+      const wrapper = shallow(<Button aria-label="bar">foo</Button>).dive();
+
+      const ariaLink = wrapper.find('[aria-label="bar"]');
+      expect(ariaLink.exists()).toBe(true);
+    });
+
+    it("when defined, should be present on the button element, when the button has only an icon", () => {
       const wrapper = shallow(
-        <Button aria-label="Bin" iconType="bin" />
+        <Button aria-label="foo" iconType="bin" />
       ).dive();
 
-      const ariaLink = wrapper.find('[aria-label="Bin"]');
+      const ariaLink = wrapper.find('[aria-label="foo"]');
+      expect(ariaLink.exists()).toBe(true);
+    });
+
+    it("when not defined, should default to iconType, when the button has only an icon", () => {
+      const wrapper = shallow(<Button iconType="bin" />).dive();
+
+      const ariaLink = wrapper.find('[aria-label="bin"]');
       expect(ariaLink.exists()).toBe(true);
     });
   });

src/components/multi-action-button/__snapshots__/multi-action-button.spec.tsx.snap

@@ -367,6 +367,7 @@ exports[`MultiActionButton when rendered should match the snapshot 1`] = `
   <button
     aria-expanded={false}
     aria-haspopup="true"
+    aria-label="Show more"
     className="c1 c2"
     data-component="button"
     data-element="toggle-button"