add aria-checked to pie-radio

justeattakeaway · Jan 10, 2025 · 0d31337 · 0d31337
1 parent d4dc4d3
commit 0d31337
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 17 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', () => {

diff --git a/yarn.lock b/yarn.lock
@@ -5174,20 +5174,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-toast-provider@0.1.0, @justeattakeaway/pie-toast-provider@workspace:packages/components/pie-toast-provider":
+"@justeattakeaway/pie-toast-provider@0.2.0, @justeattakeaway/pie-toast-provider@workspace:packages/components/pie-toast-provider":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-toast-provider@workspace:packages/components/pie-toast-provider"
   dependencies:
     "@custom-elements-manifest/analyzer": 0.9.0
     "@justeattakeaway/pie-components-config": 0.18.0
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-toast": 0.6.0
+    "@justeattakeaway/pie-toast": 0.7.0
     "@justeattakeaway/pie-webc-core": 0.24.2
     cem-plugin-module-file-extensions: 0.0.5
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/pie-toast@0.6.0, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast":
+"@justeattakeaway/pie-toast@0.7.0, @justeattakeaway/pie-toast@workspace:packages/components/pie-toast":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-toast@workspace:packages/components/pie-toast"
   dependencies:
@@ -5222,7 +5222,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@justeattakeaway/[email protected].0, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc":
+"@justeattakeaway/[email protected].1, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc":
   version: 0.0.0-use.local
   resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc"
   dependencies:
@@ -5249,8 +5249,8 @@ __metadata:
     "@justeattakeaway/pie-text-input": 0.24.6
     "@justeattakeaway/pie-textarea": 0.13.1
     "@justeattakeaway/pie-thumbnail": 0.1.0
-    "@justeattakeaway/pie-toast": 0.6.0
-    "@justeattakeaway/pie-toast-provider": 0.1.0
+    "@justeattakeaway/pie-toast": 0.7.0
+    "@justeattakeaway/pie-toast-provider": 0.2.0
     chalk: 5.3.0
   bin:
     add-components: ./src/index.js
@@ -22858,8 +22858,8 @@ __metadata:
     "@justeattakeaway/pie-text-input": 0.24.6
     "@justeattakeaway/pie-textarea": 0.13.1
     "@justeattakeaway/pie-thumbnail": 0.1.0
-    "@justeattakeaway/pie-toast": 0.6.0
-    "@justeattakeaway/pie-toast-provider": 0.1.0
+    "@justeattakeaway/pie-toast": 0.7.0
+    "@justeattakeaway/pie-toast-provider": 0.2.0
     "@storybook/addon-a11y": 8.4.5
     "@storybook/addon-designs": 8.0.4
     "@storybook/addon-essentials": 8.4.5
@@ -29586,7 +29586,7 @@ __metadata:
     "@angular/platform-browser-dynamic": 15.2.0
     "@angular/router": 15.2.0
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-webc": 0.6.0
+    "@justeattakeaway/pie-webc": 0.6.1
     rxjs: 7.8.0
     tslib: 2.3.0
     typescript: 4.9.4
@@ -29600,7 +29600,7 @@ __metadata:
   dependencies:
     "@babel/preset-env": 7.24.5
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-webc": 0.6.0
+    "@justeattakeaway/pie-webc": 0.6.1
     babel-loader: 8
     core-js: 3.30.0
     nuxt: 2.17.0
@@ -29615,7 +29615,7 @@ __metadata:
   resolution: "wc-react17@workspace:apps/examples/wc-react17"
   dependencies:
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-webc": 0.6.0
+    "@justeattakeaway/pie-webc": 0.6.1
     "@lit/react": 1.0.5
     "@types/react": ^17.0.2
     "@types/react-dom": ^17.0.2
@@ -29635,7 +29635,7 @@ __metadata:
   resolution: "wc-react18@workspace:apps/examples/wc-react18"
   dependencies:
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-webc": 0.6.0
+    "@justeattakeaway/pie-webc": 0.6.1
     "@lit/react": 1.0.5
     "@types/react": 18.3.3
     "@types/react-dom": 18.3.0
@@ -29655,7 +29655,7 @@ __metadata:
   resolution: "wc-vue3@workspace:apps/examples/wc-vue3"
   dependencies:
     "@justeattakeaway/pie-css": 0.13.1
-    "@justeattakeaway/pie-webc": 0.6.0
+    "@justeattakeaway/pie-webc": 0.6.1
     "@types/node": 18.15.11
     "@vitejs/plugin-vue": 4.0.0
     "@vue/tsconfig": 0.1.3