add aria-checked to pie-radio

justeattakeaway · Jan 7, 2025 · 3d95eb4 · 3d95eb4
1 parent 934a5f2
commit 3d95eb4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git 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
@@ -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', () => {