update accessibility label on cart toggle

Author: Spencer Canner

src/defaults/components.js

@@ -310,6 +310,7 @@ const defaults = {
     },
     text: {
       title: 'cart',
+      countAccessibilityLabel: 'Number of items in your cart:',
     },
   },
   window: {

src/styles/host/host.js

@@ -133,3 +133,13 @@
     display: block;
   }
 }
+
+.shopify-buy--visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  padding:0 !important;
+  border:0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden;
+}

src/styles/host/sass/host.css

@@ -31,6 +31,21 @@ export default class ToggleView extends View {
     return `<p class="shopify-buy--visually-hidden">${this.component.options.text.title}</p>`;
   }
 
+  get accessibilityLabel() {
+    return `<span>${this.component.options.text.title}</span>`;
+  }
+
+  get countAccessibilityLabel() {
+    if (!this.component.options.contents.count) {
+      return '';
+    }
+    return `<span>${this.component.options.text.countAccessibilityLabel} ${this.component.count}</span>`;
+  }
+
+  get summaryHtml() {
+    return `<span class="shopify-buy--visually-hidden">${this.accessibilityLabel}${this.countAccessibilityLabel}</span>`;
+  }
+
   render() {
     super.render();
     if (this.component.options.sticky) {
@@ -44,8 +59,9 @@ export default class ToggleView extends View {
     if (this.iframe) {
       this.iframe.parent.setAttribute('tabindex', 0);
       this.iframe.parent.setAttribute('role', 'button');
-      this.iframe.parent.setAttribute('aria-label', this.component.options.text.title);
+      this.iframe.el.setAttribute('aria-hidden', true);
       this.resize();
+      this.node.insertAdjacentHTML('afterbegin', this.summaryHtml);
     }
   }
 

src/views/toggle.js

@@ -1,5 +1,7 @@
 import Toggle from '../../../src/components/toggle';
 import View from '../../../src/view';
+import { assert } from 'chai';
+import iframe from '../../../src/iframe';
 
 describe('Toggle View class', () => {
   let toggle;
@@ -25,6 +27,8 @@ describe('Toggle View class', () => {
     let addClassStub;
     let removeClassStub;
     let resizeStub;
+    let insertAdjacentHtmlStub;
+    const summaryHtml = '<span>summary</span>';
 
     beforeEach(() => {
       superRenderStub = sinon.stub(View.prototype, 'render');
@@ -34,13 +38,19 @@ describe('Toggle View class', () => {
       toggle.view = Object.defineProperty(toggle.view, 'isVisible', {
         writable: true,
       });
+      toggle.view = Object.defineProperty(toggle.view, 'summaryHtml', {
+        writable: true,
+        value: summaryHtml,
+      });
+      insertAdjacentHtmlStub = sinon.stub(toggle.view.node, 'insertAdjacentHTML');
     });
 
     afterEach(() => {
       superRenderStub.restore();
       addClassStub.restore();
       removeClassStub.restore();
       resizeStub.restore();
+      insertAdjacentHtmlStub.restore();
     });
 
     it('calls super\'s render()', () => {
@@ -75,36 +85,47 @@ describe('Toggle View class', () => {
     });
 
     describe('when iframe exists', () => {
-      let setAttributeSpy;
+      let parentSetAttributeSpy;
+      let elSetAttributeSpy;
       beforeEach(() => {
-        setAttributeSpy = sinon.spy();
+        parentSetAttributeSpy = sinon.spy();
+        elSetAttributeSpy = sinon.spy();
         toggle.view.iframe = {
           parent: {
-            setAttribute: setAttributeSpy,
+            setAttribute: parentSetAttributeSpy,
           },
+          el: {
+            setAttribute: elSetAttributeSpy,
+          }
         };
         toggle.view.render();
       });
 
-      it('updates three attributes', () => {
-        assert.calledThrice(setAttributeSpy);
+      it('updates two attributes on the iframe\'s parent and one attribute on the iframe\'s el', () => {
+        assert.calledTwice(parentSetAttributeSpy);
+        assert.calledOnce(elSetAttributeSpy);
       });
 
       it('sets tabindex of iframe\'s parent to zero', () => {
-        assert.calledWith(setAttributeSpy.getCall(0), 'tabindex', 0);
+        assert.calledWith(parentSetAttributeSpy.getCall(0), 'tabindex', 0);
       });
 
       it('sets role of iframe\'s parent to button', () => {
-        assert.calledWith(setAttributeSpy.getCall(1), 'role', 'button');
+        assert.calledWith(parentSetAttributeSpy.getCall(1), 'role', 'button');
       });
 
-      it('sets aria-label of iframe\'s parent to text title', () => {
-        assert.calledWith(setAttributeSpy.getCall(2), 'aria-label', toggle.options.text.title);
+      it('sets aria-hidden to true on the iframe\'s el', () => {
+        assert.calledWith(elSetAttributeSpy.getCall(0), 'aria-hidden', true);
       });
 
       it('resizes view', () => {
         assert.calledOnce(resizeStub);
       });
+
+      it('inserts the summaryHtml at the beginning of the node', () => {
+        assert.calledOnce(insertAdjacentHtmlStub);
+        assert.calledWith(insertAdjacentHtmlStub, 'afterbegin', summaryHtml);
+      });
     });
   });
 
@@ -284,5 +305,55 @@ describe('Toggle View class', () => {
         assert.equal(toggle.view.readableLabel, `<p class="shopify-buy--visually-hidden">${toggle.options.text.title}</p>`);
       });
     });
+
+    describe('accessibilityLabel', () => {
+      it('returns the title wrapped in a span', () => {
+        assert.equal(toggle.view.accessibilityLabel, `<span>${toggle.options.text.title}</span>`)
+      });
+    });
+
+    describe('countAccessibilityLabel', () => {
+      it('returns an empty string if count is false in the options contents', () => {
+        toggle.config.toggle = {
+          contents: {count: false},
+          text: {countAccessibilityLabel: 'count label'},
+        };
+
+        assert.equal(toggle.view.countAccessibilityLabel, '');
+      });
+
+      it('returns the accessibililty label with the count wrapped in a span if count is true in the options contents', () => {
+        const count = 2;
+        toggle = Object.defineProperty(toggle, 'count', {
+          writable: true,
+        });
+        toggle.count = count;
+        toggle.config.toggle = {
+          contents: {count: true},
+          text: {countAccessibilityLabel: 'count label'},
+        };
+
+        assert.equal(toggle.view.countAccessibilityLabel, `<span>${toggle.options.text.countAccessibilityLabel} ${count}</span>`);
+      });
+    });
+
+    describe('summaryHtml', () => {
+      it('returns the accessibilityLabel and countAccessibilityLabel wrapped in a visually hidden span', () => {
+        const accessibilityLabel = 'accessibility label';
+        const countAccessibilityLabel = 'count accessibility label';
+
+        toggle.view = Object.defineProperty(toggle.view, 'accessibilityLabel', {
+          writable: true,
+          value: accessibilityLabel,
+        });
+        toggle.view = Object.defineProperty(toggle.view, 'countAccessibilityLabel', {
+          writable: true,
+          value: countAccessibilityLabel,
+        });
+
+        assert.equal(toggle.view.summaryHtml, `<span class="shopify-buy--visually-hidden">${accessibilityLabel}${countAccessibilityLabel}</span>`)
+      });
+    });
+
   });
 });