fix(select): avoid invalid radio group structure

core/src/components/select-modal/select-modal.md.scss

@@ -2,15 +2,24 @@
 @import "./select-modal";
 @import "../../themes/ionic.mixins.scss";
 @import "../item/item.md.vars";
+@import "../list/list.md.vars";
 
-ion-list ion-radio::part(container) {
+ion-radio::part(container) {
   display: none;
 }
 
-ion-list ion-radio::part(label) {
+ion-radio::part(label) {
   @include margin(0);
 }
 
+ion-radio-group {
+  @include padding($list-md-padding-top, null, $list-md-padding-bottom, null);
+
+  display: block;
+
+  background: $item-md-background;
+}
+
 ion-item {
   --inner-border-width: 0;
 }

core/src/components/select-modal/select-modal.tsx

@@ -226,7 +226,7 @@ export class SelectModal implements ComponentInterface {
           </ion-toolbar>
         </ion-header>
         <ion-content>
-          <ion-list>{this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()}</ion-list>
+          {this.multiple === true ? <ion-list>{this.renderCheckboxOptions()}</ion-list> : this.renderRadioOptions()}
         </ion-content>
       </Host>
     );

core/src/components/select-modal/test/basic/select-modal.e2e.ts

@@ -1,3 +1,4 @@
+import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
@@ -101,6 +102,47 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         await selectModalPage.ionModalDidDismiss.next();
         await expect(selectModalPage.modal).not.toBeVisible();
       });
+
+      test('should render a radio group without a wrapping ion-list', async ({ page }, testInfo) => {
+        testInfo.annotations.push({ type: 'issue', description: '#31074' });
+
+        await selectModalPage.setup(config, options, false);
+
+        const results = await new AxeBuilder({ page }).include('ion-select-modal').analyze();
+        expect(results.violations).toEqual([]);
+
+        const radioGroup = selectModalPage.selectModal.locator('ion-radio-group');
+        await expect(radioGroup).toHaveAttribute('role', 'radiogroup');
+
+        const list = selectModalPage.selectModal.locator('ion-list');
+        await expect(list).toHaveCount(0);
+      });
+    });
+
+    test.describe('multiple selection', () => {
+      let selectModalPage: SelectModalPage;
+
+      test.beforeEach(async ({ page }) => {
+        selectModalPage = new SelectModalPage(page);
+      });
+
+      test('should render checkboxes inside an ion-list', async ({ page }, testInfo) => {
+        testInfo.annotations.push({ type: 'issue', description: '#31074' });
+
+        await selectModalPage.setup(config, options, true);
+
+        const results = await new AxeBuilder({ page }).include('ion-select-modal').analyze();
+        expect(results.violations).toEqual([]);
+
+        const list = selectModalPage.selectModal.locator('ion-list');
+        await expect(list).toBeVisible();
+
+        const checkboxes = selectModalPage.selectModal.locator('ion-checkbox');
+        await expect(checkboxes).toHaveCount(options.length);
+
+        const radioGroup = selectModalPage.selectModal.locator('ion-radio-group');
+        await expect(radioGroup).toHaveCount(0);
+      });
     });
   });
 });