From 72b389993df4b0dc392262a106d7949e176b13af Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:51:44 -0700
Subject: [PATCH] fix(alert): stop Enter keypress for checkboxes (#28279)

---
 core/src/components/alert/alert.tsx             |  9 +++++++++
 .../src/components/alert/test/a11y/alert.e2e.ts | 17 +++++++++++++++++
 core/src/components/alert/test/a11y/index.html  | 16 ++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index b8b7de6b8f..4568e45a38 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -228,6 +228,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
   onKeydown(ev: any) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
 
+    /**
+     * Based on keyboard navigation requirements, the
+     * checkbox should not respond to the enter keydown event.
+     */
+    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
+      ev.preventDefault();
+      return;
+    }
+
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 3301cb82fa..f86dc5c841 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -76,5 +76,22 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
       await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
       await expect(alertButton).toHaveAttribute('aria-label', 'close button');
     });
+
+    test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
+      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      const button = page.locator('#checkbox');
+      await button.click();
+
+      await didPresent.next();
+
+      const alertCheckbox = page.locator('ion-alert .alert-checkbox');
+      const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
+
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
+
+      await alertCheckbox.press('Enter');
+      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
+    });
   });
 });
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index 2d642e85cb..180e901782 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -25,6 +25,7 @@
       <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>
+      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
     </main>
 
     <script>
@@ -94,6 +95,21 @@
           ],
         });
       }
+
+      function presentAlertCheckbox() {
+        openAlert({
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              checked: true,
+            },
+          ],
+          buttons: ['OK'],
+        });
+      }
     </script>
   </body>
 </html>