From aa7ecd05f96d57e5bd3f283bbd326a19fa5048de Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 15:21:04 -0400
Subject: [PATCH 1/7] feat(toast): add htmlAttributes property to buttons in a
 toast

---
 core/src/components/toast/toast-interface.ts | 1 +
 core/src/components/toast/toast.tsx          | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts
index 02108e06476..c2b3aca5d7f 100644
--- a/core/src/components/toast/toast-interface.ts
+++ b/core/src/components/toast/toast-interface.ts
@@ -31,6 +31,7 @@ export interface ToastButton {
   side?: 'start' | 'end';
   role?: 'cancel' | string;
   cssClass?: string | string[];
+  htmlAttributes?: { [key: string]: any };
   handler?: () => boolean | void | Promise<boolean | void>;
 }
 
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 4f397d94a7c..98d7597eb88 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -405,7 +405,14 @@ export class Toast implements ComponentInterface, OverlayInterface {
     return (
       <div class={buttonGroupsClasses}>
         {buttons.map((b) => (
-          <button type="button" class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)} part="button">
+          <button
+            {...(b.htmlAttributes as any)}
+            type="button"
+            class={buttonClass(b)}
+            tabIndex={0}
+            onClick={() => this.buttonClick(b)}
+            part="button"
+          >
             <div class="toast-button-inner">
               {b.icon && (
                 <ion-icon

From e1c2dc1af4873c5f3eded9be45e727e011cddde1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:18:39 -0400
Subject: [PATCH 2/7] test(toast): add test for passing aria-label in
 htmlAttributes

---
 .../src/components/toast/test/a11y/index.html | 19 +++++++++++++++++++
 .../components/toast/test/a11y/toast.e2e.ts   | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index b2eb88a7ae1..a58dca3da6d 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -34,6 +34,14 @@ <h1 style="background-color: white">Toast - a11y</h1>
           Present Controller Toast
         </ion-button>
 
+        <ion-button id="aria-label-toast-trigger">Present Aria Label Toast</ion-button>
+        <ion-toast
+          id="aria-label-toast"
+          trigger="aria-label-toast-trigger"
+          header="Aria Label Toast Header"
+          message="Aria Label Toast Message"
+        ></ion-toast>
+
         <ion-button onclick="updateContent()">Update Inner Content</ion-button>
       </main>
     </ion-app>
@@ -41,6 +49,17 @@ <h1 style="background-color: white">Toast - a11y</h1>
       const inlineToast = document.querySelector('#inline-toast');
       inlineToast.buttons = ['Ok'];
 
+      const ariaLabelToast = document.querySelector('#aria-label-toast');
+      ariaLabelToast.buttons = [
+        {
+          icon: 'close',
+          htmlAttributes: {
+            ariaLabel: 'close button',
+            'aria-labelledby': 'close-label',
+          }
+        },
+      ];
+
       const presentToast = async (opts) => {
         const toast = await toastController.create(opts);
 
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index 65b24a85b31..577b5c23f19 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -38,5 +38,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
       expect(results.violations).toEqual([]);
     });
+
+    test('should have aria-labelledby added to the button when htmlAttributes is set', async ({ page }) => {
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+      await page.click('#aria-label-toast-trigger');
+      await ionToastDidPresent.next();
+
+      const toastButton = page.locator('#aria-label-toast .toast-button');
+
+      /**
+       * expect().toHaveAttribute() can't check for a null value, so grab and check
+       * the value manually instead.
+       */
+      const ariaLabelledBy = await toastButton.getAttribute('aria-labelledby');
+      expect(ariaLabelledBy).toBe('close-label');
+
+      const ariaLabel = await toastButton.getAttribute('aria-label');
+      expect(ariaLabel).toBe('close button');
+    });
   });
 });

From 30b5a7fd9f31788ee1cb446994b698396d3ae85e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:30:11 -0400
Subject: [PATCH 3/7] test(toast): rename test to include aria-label

---
 core/src/components/toast/test/a11y/toast.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index 577b5c23f19..1a70e1bad23 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -39,7 +39,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
 
-    test('should have aria-labelledby added to the button when htmlAttributes is set', async ({ page }) => {
+    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page }) => {
       const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
       await page.click('#aria-label-toast-trigger');

From 380e8936f32060ba88c52996bf9396f6df43fb12 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:49:47 -0400
Subject: [PATCH 4/7] style: lint

---
 core/src/components/toast/test/a11y/index.html   | 2 +-
 core/src/components/toast/test/a11y/toast.e2e.ts | 4 +++-
 core/src/components/toast/toast.tsx              | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index a58dca3da6d..fc823ba2d71 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -56,7 +56,7 @@ <h1 style="background-color: white">Toast - a11y</h1>
           htmlAttributes: {
             ariaLabel: 'close button',
             'aria-labelledby': 'close-label',
-          }
+          },
         },
       ];
 
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index 1a70e1bad23..f02c7b4bb96 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -39,7 +39,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
 
-    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page }) => {
+    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
+      page,
+    }) => {
       const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
 
       await page.click('#aria-label-toast-trigger');
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 98d7597eb88..0b783bc83e0 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -406,7 +406,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
       <div class={buttonGroupsClasses}>
         {buttons.map((b) => (
           <button
-            {...(b.htmlAttributes as any)}
+            {...b.htmlAttributes}
             type="button"
             class={buttonClass(b)}
             tabIndex={0}

From 9bee5f609e5b2cc62944b56cda51d658137ac341 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 26 Jul 2023 14:30:04 -0400
Subject: [PATCH 5/7] test(toast): set aria label as a string

---
 core/src/components/toast/test/a11y/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index fc823ba2d71..3b9c9adb2df 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -54,7 +54,7 @@ <h1 style="background-color: white">Toast - a11y</h1>
         {
           icon: 'close',
           htmlAttributes: {
-            ariaLabel: 'close button',
+            'aria-label': 'close button',
             'aria-labelledby': 'close-label',
           },
         },

From 820b5a9e383df458ed79f378535f3a1c1a969390 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 26 Jul 2023 14:30:27 -0400
Subject: [PATCH 6/7] test(toast): consistent didPresent naming with other a11y
 tests

---
 core/src/components/toast/test/a11y/toast.e2e.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index f02c7b4bb96..daeead6a650 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -11,10 +11,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await page.goto(`/src/components/toast/test/a11y`, config);
     });
     test('should not have any axe violations with inline toasts', async ({ page }) => {
-      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const didPresent = await page.spyOnEvent('ionToastDidPresent');
 
       await page.click('#inline-toast-trigger');
-      await ionToastDidPresent.next();
+      await didPresent.next();
 
       /**
        * IonToast overlays the entire screen, so
@@ -25,10 +25,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       expect(results.violations).toEqual([]);
     });
     test('should not have any axe violations with controller toasts', async ({ page }) => {
-      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const didPresent = await page.spyOnEvent('ionToastDidPresent');
 
       await page.click('#controller-toast-trigger');
-      await ionToastDidPresent.next();
+      await didPresent.next();
 
       /**
        * IonToast overlays the entire screen, so
@@ -42,10 +42,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
     test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
       page,
     }) => {
-      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+      const didPresent = await page.spyOnEvent('ionToastDidPresent');
 
       await page.click('#aria-label-toast-trigger');
-      await ionToastDidPresent.next();
+      await didPresent.next();
 
       const toastButton = page.locator('#aria-label-toast .toast-button');
 

From 353d2b9bf2f847b3be5ac078b3eb05cea52c2117 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 27 Jul 2023 15:08:54 -0400
Subject: [PATCH 7/7] test(toast): use toHaveAttribute for checking attributes

---
 core/src/components/toast/test/a11y/toast.e2e.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index daeead6a650..f0e1bac41f8 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -49,15 +49,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
       const toastButton = page.locator('#aria-label-toast .toast-button');
 
-      /**
-       * expect().toHaveAttribute() can't check for a null value, so grab and check
-       * the value manually instead.
-       */
-      const ariaLabelledBy = await toastButton.getAttribute('aria-labelledby');
-      expect(ariaLabelledBy).toBe('close-label');
-
-      const ariaLabel = await toastButton.getAttribute('aria-label');
-      expect(ariaLabel).toBe('close button');
+      await expect(toastButton).toHaveAttribute('aria-labelledby', 'close-label');
+      await expect(toastButton).toHaveAttribute('aria-label', 'close button');
     });
   });
 });