From 06be0e511164ebdaa6af9a3747d0585260c030a9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 31 Jul 2023 13:16:17 -0400
Subject: [PATCH] feat(alert): add htmlAttributes property for passing
 attributes to buttons (#27862)

Issue number: N/A

---------

## What is the current behavior?
Buttons containing only icons are not accessible as there is no way to
pass an `aria-label` attribute (or any other html attribute).

## What is the new behavior?
- Adds the `htmlAttributes` property on the `AlertButton` interface
- Passes the `htmlAttributes` to the buttons
- Adds a test to verify `aria-label` and `aria-labelled-by` are passed
to the button

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
---
 core/src/components/alert/alert-interface.ts   |  1 +
 core/src/components/alert/alert.tsx            |  1 +
 .../components/alert/test/a11y/alert.e2e.ts    | 16 ++++++++++++++++
 core/src/components/alert/test/a11y/index.html | 18 ++++++++++++++++++
 4 files changed, 36 insertions(+)

diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index f6e04499b1..3f9d6cda8d 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 8ce5094492..4b89c605f6 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)}
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 2eb24a423a..3301cb82fa 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -60,5 +60,21 @@ 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');
+
+      await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
+      await expect(alertButton).toHaveAttribute('aria-label', 'close button');
+    });
   });
 });
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index b73fdae7f7..2d642e85cb 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -24,6 +24,7 @@
       <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,23 @@
           },
         });
       }
+
+      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: {
+                'aria-label': 'close button',
+                'aria-labelledby': 'close-label',
+              },
+            },
+          ],
+        });
+      }
     </script>
   </body>
 </html>