From 7fd9963b1fa70501ab572edc361611766c2a6e77 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:44:31 -0400
Subject: [PATCH 1/5] feat(alert): add htmlAttributes property for buttons

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

diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index f6e04499b13..3f9d6cda8d4 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -48,6 +48,7 @@ export interface AlertButton {
   role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
   id?: string;
+  htmlAttributes?: { [key: string]: any };
   // TODO(FW-2832): type
   handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
 }
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 8ce50944924..4b89c605f60 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -666,6 +666,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
       <div class={alertButtonGroupClass}>
         {buttons.map((button) => (
           <button
+            {...button.htmlAttributes}
             type="button"
             id={button.id}
             class={buttonClass(button)}

From 79eb6216b4e8d7db6ea8c31091f918f179267291 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:48:02 -0400
Subject: [PATCH 2/5] test(alert): check for aria-label and aria-labelledby
 being passed

---
 .../components/alert/test/a11y/alert.e2e.ts   | 21 +++++++++++++++++++
 .../src/components/alert/test/a11y/index.html | 16 ++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 2eb24a423ae..863af2c530e 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -60,5 +60,26 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     test('should allow for manually specifying aria attributes', async ({ page }) => {
       await testAria(page, 'customAria', 'Custom title', 'Custom description');
     });
+
+    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page }) => {
+      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      const button = page.locator('#ariaLabelButton');
+      await button.click();
+
+      await didPresent.next();
+
+      const alertButton = page.locator('ion-alert .alert-button');
+
+      /**
+       * expect().toHaveAttribute() can't check for a null value, so grab and check
+       * the value manually instead.
+       */
+      const ariaLabelledBy = await alertButton.getAttribute('aria-labelledby');
+      expect(ariaLabelledBy).toBe('close-label');
+
+      const ariaLabel = await alertButton.getAttribute('aria-label');
+      expect(ariaLabel).toBe('close button');
+    });
   });
 });
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index b73fdae7f7f..024f327708b 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -24,6 +24,7 @@ <h1>Alert - A11y</h1>
       <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
       <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
       <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
     </main>
 
     <script>
@@ -76,6 +77,21 @@ <h1>Alert - A11y</h1>
           },
         });
       }
+
+      function presentAriaLabelButton() {
+        openAlert({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message with custom aria attributes passed to the button.',
+          buttons: [{
+            text: 'Close',
+            htmlAttributes: {
+              ariaLabel: 'close button',
+              'aria-labelledby': 'close-label',
+            }
+          }],
+        });
+      }
     </script>
   </body>
 </html>

From e96bfd8f23a12fed7a5a66c837c9421428773416 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 25 Jul 2023 16:53:53 -0400
Subject: [PATCH 3/5] style: lint

---
 core/src/components/alert/test/a11y/alert.e2e.ts |  4 +++-
 core/src/components/alert/test/a11y/index.html   | 16 +++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 863af2c530e..fbaf0e6be23 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -61,7 +61,9 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
       await testAria(page, 'customAria', 'Custom title', 'Custom description');
     });
 
-    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 didPresent = await page.spyOnEvent('ionAlertDidPresent');
 
       const button = page.locator('#ariaLabelButton');
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index 024f327708b..c0dd48768dd 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -83,13 +83,15 @@ <h1>Alert - A11y</h1>
           header: 'Header',
           subHeader: 'Subtitle',
           message: 'This is an alert message with custom aria attributes passed to the button.',
-          buttons: [{
-            text: 'Close',
-            htmlAttributes: {
-              ariaLabel: 'close button',
-              'aria-labelledby': 'close-label',
-            }
-          }],
+          buttons: [
+            {
+              text: 'Close',
+              htmlAttributes: {
+                ariaLabel: 'close button',
+                'aria-labelledby': 'close-label',
+              },
+            },
+          ],
         });
       }
     </script>

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

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

diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index c0dd48768dd..2d642e85cb1 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -87,7 +87,7 @@ <h1>Alert - A11y</h1>
             {
               text: 'Close',
               htmlAttributes: {
-                ariaLabel: 'close button',
+                'aria-label': 'close button',
                 'aria-labelledby': 'close-label',
               },
             },

From 0ccd960ae872284144c26b11c78aa38b11057813 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 27 Jul 2023 15:06:14 -0400
Subject: [PATCH 5/5] test(alert): use toHaveAttribute for checking attributes

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

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