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

fix(menu-button): custom aria-label can now be set (#23608)

Browse Source 
resolves #23604
This commit is contained in:
Liam DeBeasi
2021-07-12 08:52:03 -04:00
committed by GitHub
parent fa069424b2
commit c08345df2e
4 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/menu-button/menu-button.tsx
View File

@ -4,6 +4,7 @@ import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { Color } from '../../interface'; import { Color } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface'; import { ButtonInterface } from '../../utils/element-interface';
import { inheritAttributes } from '../../utils/helpers';
import { menuController } from '../../utils/menu-controller'; import { menuController } from '../../utils/menu-controller';
import { createColorClasses, hostContext } from '../../utils/theme'; import { createColorClasses, hostContext } from '../../utils/theme';
import { updateVisibility } from '../menu-toggle/menu-toggle-util'; import { updateVisibility } from '../menu-toggle/menu-toggle-util';
@ -23,6 +24,8 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
shadow: true shadow: true
}) })
export class MenuButton implements ComponentInterface, ButtonInterface { export class MenuButton implements ComponentInterface, ButtonInterface {
private inheritedAttributes: { [k: string]: any } = {};
@Element() el!: HTMLIonSegmentElement; @Element() el!: HTMLIonSegmentElement;
@State() visible = false; @State() visible = false;
@ -54,6 +57,10 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
*/ */
@Prop() type: 'submit' | 'reset' | 'button' = 'button'; @Prop() type: 'submit' | 'reset' | 'button' = 'button';
componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
}
componentDidLoad() { componentDidLoad() {
this.visibilityChanged(); this.visibilityChanged();
} }
@ -69,7 +76,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
} }
render() { render() {
const { color, disabled } = this; const { color, disabled, inheritedAttributes } = this;
const mode = getIonMode(this); const mode = getIonMode(this);
const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp'); const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');
const hidden = this.autoHide && !this.visible; const hidden = this.autoHide && !this.visible;
@ -78,6 +85,8 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
type: this.type type: this.type
}; };
const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
return ( return (
<Host <Host
onClick={this.onClick} onClick={this.onClick}
@ -99,7 +108,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
disabled={disabled} disabled={disabled}
class="button-native" class="button-native"
part="native" part="native"
aria-label="menu" aria-label={ariaLabel}
> >
<span class="button-inner"> <span class="button-inner">
<slot> <slot>

11
core/src/components/menu-button/test/a11y/e2e.ts Normal file
View File

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

21
core/src/components/menu-button/test/a11y/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Menu Button - a11y</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<main>
<h1>Menu Button</h1>
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" aria-label="Custom Label"></ion-menu-button>
</main>
</body>
</html>

1
core/src/components/menu-button/test/basic/index.html
View File

@ -29,6 +29,7 @@
<ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button> <ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom-large"></ion-menu-button> <ion-menu-button auto-hide="false" class="custom-large"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom-large ion-focused"></ion-menu-button> <ion-menu-button auto-hide="false" class="custom-large ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" aria-label="My Custom Menu Button Label"></ion-menu-button>
<h1>Colors</h1> <h1>Colors</h1>
<ion-menu-button auto-hide="false" color="primary"></ion-menu-button> <ion-menu-button auto-hide="false" color="primary"></ion-menu-button>