diff --git a/core/src/components/select-modal/select-modal.md.scss b/core/src/components/select-modal/select-modal.md.scss index bf36299137b..cfc58b6f441 100644 --- a/core/src/components/select-modal/select-modal.md.scss +++ b/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; } diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx index 1e1b2ec0bbf..52bf16986f9 100644 --- a/core/src/components/select-modal/select-modal.tsx +++ b/core/src/components/select-modal/select-modal.tsx @@ -226,7 +226,7 @@ export class SelectModal implements ComponentInterface { - {this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()} + {this.multiple === true ? {this.renderCheckboxOptions()} : this.renderRadioOptions()} ); diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts b/core/src/components/select-modal/test/basic/select-modal.e2e.ts index 11eb4270af9..6ab9e956edc 100644 --- a/core/src/components/select-modal/test/basic/select-modal.e2e.ts +++ b/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); + }); }); }); });