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

fix(back-button): pass aria-label to native element (#24027)

Browse Source
This commit is contained in:
Amanda Smith
2021-10-08 12:08:32 -05:00
committed by GitHub
parent e92fecb08c
commit 68a7e43345
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/back-button/back-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 { AnimationBuilder, Color } from '../../interface'; import { AnimationBuilder, Color } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface'; import { ButtonInterface } from '../../utils/element-interface';
import { inheritAttributes } from '../../utils/helpers';
import { createColorClasses, hostContext, openURL } from '../../utils/theme'; import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/** /**
@ -22,6 +23,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
shadow: true shadow: true
}) })
export class BackButton implements ComponentInterface, ButtonInterface { export class BackButton implements ComponentInterface, ButtonInterface {
private inheritedAttributes: { [k: string]: any } = {};
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
@ -64,6 +66,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
@Prop() routerAnimation: AnimationBuilder | undefined; @Prop() routerAnimation: AnimationBuilder | undefined;
componentWillLoad() { componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
if (this.defaultHref === undefined) { if (this.defaultHref === undefined) {
this.defaultHref = config.get('backButtonDefaultHref'); this.defaultHref = config.get('backButtonDefaultHref');
} }
@ -115,9 +119,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
} }
render() { render() {
const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText } = this; const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, inheritedAttributes } = this;
const showBackButton = defaultHref !== undefined; const showBackButton = defaultHref !== undefined;
const mode = getIonMode(this); const mode = getIonMode(this);
const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
return ( return (
<Host <Host
@ -139,7 +144,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
disabled={disabled} disabled={disabled}
class="button-native" class="button-native"
part="native" part="native"
aria-label={backButtonText || 'back'} aria-label={ariaLabel}
> >
<span class="button-inner"> <span class="button-inner">
{backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>} {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}

4
core/src/components/back-button/test/basic/index.html
View File

@ -18,8 +18,8 @@
<ion-content> <ion-content>
<h3>Default</h3> <h3>Default</h3>
<p> <p>
<ion-back-button></ion-back-button> <ion-back-button aria-label="back button"></ion-back-button>
<ion-back-button text="Back"></ion-back-button> <ion-back-button text="Back" aria-label="back button"></ion-back-button>
<ion-back-button icon="add"></ion-back-button> <ion-back-button icon="add"></ion-back-button>
<ion-back-button disabled text="Text Only" icon=""></ion-back-button> <ion-back-button disabled text="Text Only" icon=""></ion-back-button>
<ion-back-button icon="heart" text="Love" color="danger"></ion-back-button> <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>