diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 0597a1d879..36e870da0e 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/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} > diff --git a/core/src/components/fab-button/test/fab-button.spec.ts b/core/src/components/fab-button/test/fab-button.spec.ts new file mode 100644 index 0000000000..930fcea9bc --- /dev/null +++ b/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