fix(fab-button): aria attributes are inherited

core/src/components/fab-button/fab-button.tsx

@@ -5,6 +5,8 @@ import { close } from 'ionicons/icons';
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import type { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
+import { inheritAriaAttributes } from '../../utils/helpers';
+import type { Attributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -23,6 +25,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 })
 export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
   private fab: HTMLIonFabElement | null = null;
+  private inheritedAttributes: Attributes = {};
 
   @Element() el!: HTMLElement;
 
@@ -142,8 +145,12 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     fab.toggle();
   };
 
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+
   render() {
-    const { el, disabled, color, href, activated, show, translucent, size } = this;
+    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
     const inList = hostContext('ion-fab-list', el);
     const mode = getIonMode(this);
     const TagType = href === undefined ? 'button' : ('a' as any);
@@ -182,6 +189,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
+          {...inheritedAttributes}
         >
           <ion-icon icon={this.closeIcon} part="close-icon" class="close-icon" lazy={false}></ion-icon>
           <span class="button-inner">

core/src/components/fab-button/test/fab-button.spec.ts

@@ -0,0 +1,19 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { FabButton } from '../fab-button';
+
+describe('fab-button: aria attributes', () => {
+  it('should inherit aria attributes to inner <button>', async () => {
+    const page = await newSpecPage({
+      components: [FabButton],
+      html: `
+        <ion-fab-button aria-label="Hello World">My Button</ion-fab-button>
+      `,
+    });
+
+    const fabButton = page.body.querySelector('ion-fab-button');
+    const root = fabButton.shadowRoot;
+    const nativeButton = root.querySelector('button');
+    expect(nativeButton.getAttribute('aria-label')).toEqual('Hello World');
+  });
+});