@ordergroove/offers 2.34.3 → 2.34.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.34.3",
+  "version": "2.34.4",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.9.1"
   },
-  "gitHead": "d3e7deebb63e8f607ca07d7a0f1d298439c81449"
+  "gitHead": "cd24a15b855b86dd7f51d7bbbd3fa63f8d29f2c4"
 }

package/src/components/OptinButton.js

@@ -54,7 +54,12 @@ export class OptinButton extends OptinStatus {
   render() {
     return html`
       <slot name="default">
-        <button aria-labelledby="ogOfferOptInLabel" class="btn radio ${this.subscribed ? 'active' : ''}"></button>
+        <button
+          aria-labelledby="ogOfferOptInLabel"
+          role="radio"
+          aria-checked="${!!this.subscribed}"
+          class="btn radio ${this.subscribed ? 'active' : ''}"
+        ></button>
         <label id="ogOfferOptInLabel">
           <slot>
             <slot name="label"><og-text key="offerOptInLabel"></og-text></slot>

package/src/components/OptoutButton.js

@@ -19,7 +19,12 @@ export class OptoutButton extends OptinStatus {
   render() {
     return html`
       <slot name="default">
-        <button aria-labelledby="ogOfferOptOutLabel" class="btn radio ${this.subscribed ? '' : 'active'}"></button>
+        <button
+          aria-labelledby="ogOfferOptOutLabel"
+          role="radio"
+          aria-checked="${!this.subscribed}"
+          class="btn radio ${this.subscribed ? '' : 'active'}"
+        ></button>
         <label id="ogOfferOptOutLabel">
           <slot>
             <og-text key="offerOptOutLabel"></og-text>

package/src/components/__tests__/OptinButton.spec.js

@@ -13,6 +13,22 @@ describe('OptinButton', function() {
       expect(querySelector(element, 'button.active')).toBeTruthy();
     });
 
+    it('should be aria-checked if subscribed', async () => {
+      const element = new OptinButton();
+      element.setAttribute('product', '123');
+      element.subscribed = true;
+      await appendToBody(element);
+      expect(querySelector(element, 'button').getAttribute('aria-checked')).toEqual('true');
+    });
+
+    it('should not be aria-checked if not subscribed', async () => {
+      const element = new OptinButton();
+      element.setAttribute('product', '123');
+      element.subscribed = false;
+      await appendToBody(element);
+      expect(querySelector(element, 'button').getAttribute('aria-checked')).toEqual('false');
+    });
+
     it('should show empty label if not subscribed', async () => {
       const element = new OptinButton();
       element.setAttribute('product', '123');

package/src/components/__tests__/OptoutButton.spec.js

@@ -32,4 +32,20 @@ describe('OptoutButton', () => {
     await appendToBody(elm);
     expect(querySelector(elm, 'button.active')).toBeTruthy();
   });
+
+  it('should be aria-checked if subscribed', async () => {
+    const element = new OptoutButton();
+    element.setAttribute('product', '123');
+    element.subscribed = true;
+    await appendToBody(element);
+    expect(querySelector(element, 'button').getAttribute('aria-checked')).toEqual('false');
+  });
+
+  it('should not be aria-checked if not subscribed', async () => {
+    const element = new OptoutButton();
+    element.setAttribute('product', '123');
+    element.subscribed = false;
+    await appendToBody(element);
+    expect(querySelector(element, 'button').getAttribute('aria-checked')).toEqual('true');
+  });
 });