fix(alert): stop Enter keypress for checkboxes (#28279)

ionic-team · Oct 4, 2023 · 72b3899 · 72b3899
1 parent 897ff6f
commit 72b3899
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git 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
@@ -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
@@ -25,6 +25,7 @@ <h1>Alert - A11y</h1>
       <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 @@ <h1>Alert - A11y</h1>
           ],
         });
       }
+
+      function presentAlertCheckbox() {
+        openAlert({
+          header: 'Checkbox',
+          inputs: [
+            {
+              type: 'checkbox',
+              label: 'Checkbox 1',
+              value: 'value1',
+              checked: true,
+            },
+          ],
+          buttons: ['OK'],
+        });
+      }
     </script>
   </body>
 </html>