javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab-button): aria attributes are inherited (#25635)

Browse Source 
resolves #25633
This commit is contained in:
Liam DeBeasi
2022-07-14 10:54:54 -04:00
committed by GitHub
parent 827ab06d4d
commit 64ae3d2b97
2 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/fab-button/fab-button.tsx
View File

@ -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">

19
core/src/components/fab-button/test/fab-button.spec.ts Normal file
View File

@ -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');
});
});