diff --git a/packages/components/pie-radio/src/index.ts b/packages/components/pie-radio/src/index.ts index f4b3692740..df03f0990f 100644 --- a/packages/components/pie-radio/src/index.ts +++ b/packages/components/pie-radio/src/index.ts @@ -95,10 +95,6 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements this._handleFormAssociation(); } - // public focus () { - // this._radio.focus(); - // } - /** * (Read-only) returns a ValidityState with the validity states that this element is in. * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity @@ -126,6 +122,9 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements } updated () { + // Ensure aria-checked reflects the checked state + this.setAttribute('aria-checked', String(this.checked)); + this._handleFormAssociation(); } diff --git a/packages/components/pie-radio/test/component/pie-radio.spec.ts b/packages/components/pie-radio/test/component/pie-radio.spec.ts index 65a28b9061..91453bf99f 100644 --- a/packages/components/pie-radio/test/component/pie-radio.spec.ts +++ b/packages/components/pie-radio/test/component/pie-radio.spec.ts @@ -119,6 +119,41 @@ test.describe('PieRadio - Component tests', () => { // Assert await expect(radio).not.toBeChecked(); }); + + test('should keep aria-checked in sync with the checked prop', async ({ page, mount }) => { + // Arrange + await mount(PieRadio, { + props: { + checked: false, + value: 'testValue', + } as RadioProps, + slots, + }); + + // Act + const radio = page.locator('pie-radio'); + + // Assert initial state + await expect(radio).toHaveAttribute('aria-checked', 'false'); + + // Update checked prop to true + await page.evaluate(() => { + const radioComponent = document.querySelector('pie-radio'); + if (radioComponent) radioComponent.checked = true; + }); + + // Assert updated state + await expect(radio).toHaveAttribute('aria-checked', 'true'); + + // Update checked prop back to false + await page.evaluate(() => { + const radioComponent = document.querySelector('pie-radio'); + if (radioComponent) radioComponent.checked = false; + }); + + // Assert reverted state + await expect(radio).toHaveAttribute('aria-checked', 'false'); + }); }); test.describe('disabled', () => {