fix(radio-group): add Enter key support for selection

Author: haryopba

core/src/components/radio-group/radio-group.tsx

@@ -212,8 +212,8 @@ export class RadioGroup implements ComponentInterface {
       }
 
       // Update the radio group value when a user presses the
-      // space bar on top of a selected radio
-      if ([' '].includes(ev.key)) {
+      // enter or space bar on top of a selected radio
+      if (['Enter', ' '].includes(ev.key)) {
         const previousValue = this.value;
         this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
         if (previousValue !== this.value || this.allowEmptySelection) {

core/src/components/radio-group/test/basic/radio-group.e2e.ts

@@ -26,7 +26,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await radioFixture.checkRadio('keyboard');
+      await radioFixture.checkRadio({ method: 'keyboard', key: 'Space' });
       await radioFixture.expectChecked(true);
     });
 
@@ -42,7 +42,39 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await radioFixture.checkRadio('keyboard');
+      await radioFixture.checkRadio({ method: 'keyboard', key: 'Space' });
+      await radioFixture.expectChecked(false);
+    });
+
+    test('enter should not deselect without allowEmptySelection', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-radio-group value="one" allow-empty-selection="false">
+          <ion-item>
+            <ion-radio id="one" value="one">One</ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `,
+        config
+      );
+
+      await radioFixture.checkRadio({ method: 'keyboard', key: 'Enter' });
+      await radioFixture.expectChecked(true);
+    });
+
+    test('enter should deselect with allowEmptySelection', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-radio-group value="one" allow-empty-selection="true">
+          <ion-item>
+            <ion-radio id="one" value="one">One</ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      `,
+        config
+      );
+
+      await radioFixture.checkRadio({ method: 'keyboard', key: 'Enter' });
       await radioFixture.expectChecked(false);
     });
 
@@ -58,7 +90,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await radioFixture.checkRadio('mouse');
+      await radioFixture.checkRadio({ method: 'mouse' });
       await radioFixture.expectChecked(true);
     });
 
@@ -74,7 +106,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await radioFixture.checkRadio('mouse');
+      await radioFixture.checkRadio({ method: 'mouse' });
       await radioFixture.expectChecked(false);
     });
 

core/src/components/radio-group/test/fixtures.ts

@@ -2,6 +2,19 @@ import type { Locator } from '@playwright/test';
 import { expect } from '@playwright/test';
 import type { E2EPage } from '@utils/test/playwright';
 
+interface CheckRadioKeyboardOptions {
+  method: 'keyboard';
+  key: 'Space' | 'Enter';
+  selector?: string;
+}
+
+interface CheckRadioMouseOptions {
+  method: 'mouse';
+  selector?: string;
+}
+
+type CheckRadioOptions = CheckRadioKeyboardOptions | CheckRadioMouseOptions;
+
 export class RadioFixture {
   readonly page: E2EPage;
 
@@ -11,13 +24,14 @@ export class RadioFixture {
     this.page = page;
   }
 
-  async checkRadio(method: 'keyboard' | 'mouse', selector = 'ion-radio') {
+  async checkRadio(options: CheckRadioOptions) {
     const { page } = this;
+    const selector = options.selector ?? 'ion-radio';
     const radio = (this.radio = page.locator(selector));
 
-    if (method === 'keyboard') {
+    if (options.method === 'keyboard') {
       await radio.focus();
-      await page.keyboard.press('Space');
+      await page.keyboard.press(options.key);
     } else {
       await radio.click();
     }

core/src/components/radio-group/test/search/radio-group.e2e.ts

@@ -17,7 +17,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const searchbarInput = page.locator('ion-searchbar input');
 
       // select radio
-      const radio = await radioFixture.checkRadio('mouse', 'ion-radio[value=two]');
+      const radio = await radioFixture.checkRadio({ method: 'mouse', selector: 'ion-radio[value=two]' });
       await radioFixture.expectChecked(true);
 
       // filter radio so it is not in DOM