From 68a7e43345a0261fdeed6054198c5a22fbbcb584 Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Fri, 8 Oct 2021 12:08:32 -0500
Subject: [PATCH] fix(back-button): pass aria-label to native element (#24027)

---
 core/src/components/back-button/back-button.tsx       | 9 +++++++--
 core/src/components/back-button/test/basic/index.html | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 74fa19dd65..ea66e2736c 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -4,6 +4,7 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { AnimationBuilder, Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
+import { inheritAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -22,6 +23,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   shadow: true
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -64,6 +66,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   @Prop() routerAnimation: AnimationBuilder | undefined;
 
   componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+
     if (this.defaultHref === undefined) {
       this.defaultHref = config.get('backButtonDefaultHref');
     }
@@ -115,9 +119,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   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 mode = getIonMode(this);
+    const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
 
     return (
       <Host
@@ -139,7 +144,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           disabled={disabled}
           class="button-native"
           part="native"
-          aria-label={backButtonText || 'back'}
+          aria-label={ariaLabel}
         >
           <span class="button-inner">
             {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index 7037ca5819..cbf0b1d72e 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -18,8 +18,8 @@
     <ion-content>
       <h3>Default</h3>
       <p>
-        <ion-back-button></ion-back-button>
-        <ion-back-button text="Back"></ion-back-button>
+        <ion-back-button aria-label="back button"></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 disabled text="Text Only" icon=""></ion-back-button>
         <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>