From 6a0a34d4edaacbffed40f7784bdf0f3e7e788d25 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 26 Jul 2023 11:05:07 -0400
Subject: [PATCH 1/4] feat(action-sheet): add htmlAttributes to action sheet
 buttons

---
 .../action-sheet/action-sheet-interface.ts        |  1 +
 core/src/components/action-sheet/action-sheet.tsx | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index 9428b59b014..465c50e050e 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -23,6 +23,7 @@ export interface ActionSheetButton<T = any> {
   icon?: string;
   cssClass?: string | string[];
   id?: string;
+  htmlAttributes?: { [key: string]: any };
   handler?: () => boolean | void | Promise<boolean | void>;
   data?: T;
 }
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 9a877054cfb..e6854c8fdd7 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -386,7 +386,13 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </div>
               )}
               {buttons.map((b) => (
-                <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+                <button
+                  {...b.htmlAttributes}
+                  type="button"
+                  id={b.id}
+                  class={buttonClass(b)}
+                  onClick={() => this.buttonClick(b)}
+                >
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
                     {b.text}
@@ -398,7 +404,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
             {cancelButton && (
               <div class="action-sheet-group action-sheet-group-cancel">
-                <button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}>
+                <button
+                  {...cancelButton.htmlAttributes}
+                  type="button"
+                  class={buttonClass(cancelButton)}
+                  onClick={() => this.buttonClick(cancelButton)}
+                >
                   <span class="action-sheet-button-inner">
                     {cancelButton.icon && (
                       <ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />

From e472fc7b460176aa0cb6ed9b5c4901cc807e68b6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 26 Jul 2023 11:05:45 -0400
Subject: [PATCH 2/4] test(action-sheet): add tests for htmlAttributes to a11y
 e2e tests

---
 .../test/a11y/action-sheet.e2e.ts             | 43 ++++++++++++++++++-
 .../action-sheet/test/a11y/index.html         | 37 ++++++++++++++++
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
index cac3dfe9db3..e3410c0d306 100644
--- a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
+++ b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
@@ -10,16 +10,43 @@ const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy:
   await button.click();
   await didPresent.next();
 
-  const alert = page.locator('ion-action-sheet');
+  const actionSheet = page.locator('ion-action-sheet');
 
   /**
    * expect().toHaveAttribute() can't check for a null value, so grab and check
    * the value manually instead.
    */
-  const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
+  const ariaLabelledBy = await actionSheet.getAttribute('aria-labelledby');
 
   expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
 };
+
+const testAriaButton = async (
+  page: E2EPage,
+  buttonID: string,
+  expectedAriaLabelledBy: string | null,
+  expectedAriaLabel: string | null
+) => {
+  const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+  const button = page.locator(`#${buttonID}`);
+  await button.click();
+
+  await didPresent.next();
+
+  const actionSheetButton = page.locator('ion-action-sheet .action-sheet-button');
+
+  /**
+   * expect().toHaveAttribute() can't check for a null value, so grab and check
+   * the value manually instead.
+   */
+  const ariaLabelledBy = await actionSheetButton.getAttribute('aria-labelledby');
+  expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
+
+  const ariaLabel = await actionSheetButton.getAttribute('aria-label');
+  expect(ariaLabel).toBe(expectedAriaLabel);
+};
+
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('action-sheet: a11y'), () => {
     test.beforeEach(async ({ page }) => {
@@ -52,5 +79,17 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     test('should allow for manually specifying aria attributes', async ({ page }) => {
       await testAria(page, 'customAria', 'Custom title');
     });
+
+    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
+      page,
+    }) => {
+      await testAriaButton(page, 'ariaLabelButton', 'close-label', 'close button');
+    });
+
+    test('should have aria-labelledby and aria-label added to the cancel button when htmlAttributes is set', async ({
+      page,
+    }) => {
+      await testAriaButton(page, 'ariaLabelCancelButton', 'cancel-label', 'cancel button');
+    });
   });
 });
diff --git a/core/src/components/action-sheet/test/a11y/index.html b/core/src/components/action-sheet/test/a11y/index.html
index 566b7dcdc1b..e26567e458f 100644
--- a/core/src/components/action-sheet/test/a11y/index.html
+++ b/core/src/components/action-sheet/test/a11y/index.html
@@ -23,6 +23,10 @@ <h1>Action Sheet - A11y</h1>
       <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
       <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</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>
+      <ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
+        >Aria Label Cancel Button</ion-button
+      >
     </main>
 
     <script>
@@ -63,6 +67,39 @@ <h1>Action Sheet - A11y</h1>
           },
         });
       }
+
+      function presentAriaLabelButton() {
+        openActionSheet({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          buttons: [
+            {
+              text: 'Close',
+              htmlAttributes: {
+                ariaLabel: 'close button',
+                'aria-labelledby': 'close-label',
+              },
+            },
+          ],
+        });
+      }
+
+      function presentAriaLabelCancelButton() {
+        openActionSheet({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          buttons: [
+            {
+              text: 'Cancel',
+              role: 'cancel',
+              htmlAttributes: {
+                ariaLabel: 'cancel button',
+                'aria-labelledby': 'cancel-label',
+              },
+            },
+          ],
+        });
+      }
     </script>
   </body>
 </html>

From 91d796cfa7863ef0257750c5b04c14831b6cc65c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 26 Jul 2023 14:32:56 -0400
Subject: [PATCH 3/4] test(action-sheet): set aria label as a string

---
 core/src/components/action-sheet/test/a11y/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/action-sheet/test/a11y/index.html b/core/src/components/action-sheet/test/a11y/index.html
index e26567e458f..25adfdfeda8 100644
--- a/core/src/components/action-sheet/test/a11y/index.html
+++ b/core/src/components/action-sheet/test/a11y/index.html
@@ -76,7 +76,7 @@ <h1>Action Sheet - A11y</h1>
             {
               text: 'Close',
               htmlAttributes: {
-                ariaLabel: 'close button',
+                'aria-label': 'close button',
                 'aria-labelledby': 'close-label',
               },
             },
@@ -93,7 +93,7 @@ <h1>Action Sheet - A11y</h1>
               text: 'Cancel',
               role: 'cancel',
               htmlAttributes: {
-                ariaLabel: 'cancel button',
+                'aria-label': 'cancel button',
                 'aria-labelledby': 'cancel-label',
               },
             },

From 54945521542d7af73695fbfda290aae579b10c85 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 27 Jul 2023 15:07:57 -0400
Subject: [PATCH 4/4] test(action-sheet): use toHaveAttribute for checking
 attributes

---
 .../action-sheet/test/a11y/action-sheet.e2e.ts    | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
index e3410c0d306..8e9b2a9e0a4 100644
--- a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
+++ b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
@@ -24,8 +24,8 @@ const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy:
 const testAriaButton = async (
   page: E2EPage,
   buttonID: string,
-  expectedAriaLabelledBy: string | null,
-  expectedAriaLabel: string | null
+  expectedAriaLabelledBy: string,
+  expectedAriaLabel: string
 ) => {
   const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
 
@@ -36,15 +36,8 @@ const testAriaButton = async (
 
   const actionSheetButton = page.locator('ion-action-sheet .action-sheet-button');
 
-  /**
-   * expect().toHaveAttribute() can't check for a null value, so grab and check
-   * the value manually instead.
-   */
-  const ariaLabelledBy = await actionSheetButton.getAttribute('aria-labelledby');
-  expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
-
-  const ariaLabel = await actionSheetButton.getAttribute('aria-label');
-  expect(ariaLabel).toBe(expectedAriaLabel);
+  await expect(actionSheetButton).toHaveAttribute('aria-labelledby', expectedAriaLabelledBy);
+  await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
 };
 
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {