diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index fda94193d9..5e2af949f9 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -4,6 +4,7 @@ import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; import { Color } from '../../interface'; import { ButtonInterface } from '../../utils/element-interface'; +import { inheritAttributes } from '../../utils/helpers'; import { menuController } from '../../utils/menu-controller'; import { createColorClasses, hostContext } from '../../utils/theme'; import { updateVisibility } from '../menu-toggle/menu-toggle-util'; @@ -23,6 +24,8 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util'; shadow: true }) export class MenuButton implements ComponentInterface, ButtonInterface { + private inheritedAttributes: { [k: string]: any } = {}; + @Element() el!: HTMLIonSegmentElement; @State() visible = false; @@ -54,6 +57,10 @@ export class MenuButton implements ComponentInterface, ButtonInterface { */ @Prop() type: 'submit' | 'reset' | 'button' = 'button'; + componentWillLoad() { + this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']); + } + componentDidLoad() { this.visibilityChanged(); } @@ -69,7 +76,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface { } render() { - const { color, disabled } = this; + const { color, disabled, inheritedAttributes } = this; const mode = getIonMode(this); const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp'); const hidden = this.autoHide && !this.visible; @@ -78,6 +85,8 @@ export class MenuButton implements ComponentInterface, ButtonInterface { type: this.type }; + const ariaLabel = inheritedAttributes['aria-label'] || 'menu'; + return ( diff --git a/core/src/components/menu-button/test/a11y/e2e.ts b/core/src/components/menu-button/test/a11y/e2e.ts new file mode 100644 index 0000000000..d38ad0fa36 --- /dev/null +++ b/core/src/components/menu-button/test/a11y/e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; +import { AxePuppeteer } from '@axe-core/puppeteer'; + +test('menu-button: axe', async () => { + const page = await newE2EPage({ + url: '/src/components/menu-button/test/a11y?ionic:_testing=true' + }); + + const results = await new AxePuppeteer(page).analyze(); + expect(results.violations.length).toEqual(0); +}); diff --git a/core/src/components/menu-button/test/a11y/index.html b/core/src/components/menu-button/test/a11y/index.html new file mode 100644 index 0000000000..f0b0c6d23f --- /dev/null +++ b/core/src/components/menu-button/test/a11y/index.html @@ -0,0 +1,21 @@ + + + + + Menu Button - a11y + + + + + + + + +
+

Menu Button

+ + +
+ + diff --git a/core/src/components/menu-button/test/basic/index.html b/core/src/components/menu-button/test/basic/index.html index 409122163e..00bc406db6 100644 --- a/core/src/components/menu-button/test/basic/index.html +++ b/core/src/components/menu-button/test/basic/index.html @@ -29,6 +29,7 @@ +

Colors