Fix product tile button keyboard accessibility

Shopify · Sep 9, 2020 · dae9e22 · dae9e22
1 parent ae59404
commit dae9e22
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/src/components/product.js b/src/components/product.js
@@ -23,6 +23,7 @@ function isMedia(key) {
 }
 
 const ENTER_KEY = 13;
+const SPACE_KEY = 32;
 
 const propertiesWhitelist = [
   'background',
@@ -356,7 +357,7 @@ export default class Product extends Component {
       [`change ${this.selectors.option.select}`]: this.onOptionSelect.bind(this),
       [`click ${this.selectors.product.button}`]: this.onButtonClick.bind(this),
       [`click ${this.selectors.product.blockButton}`]: this.onButtonClick.bind(this),
-      [`keyup ${this.selectors.product.blockButton}`]: this.onBlockButtonKeyup.bind(this),
+      [`keydown ${this.selectors.product.blockButton}`]: this.onBlockButtonKeyDown.bind(this),
       [`click ${this.selectors.product.quantityIncrement}`]: this.onQuantityIncrement.bind(this, 1),
       [`click ${this.selectors.product.quantityDecrement}`]: this.onQuantityIncrement.bind(this, -1),
       [`blur ${this.selectors.product.quantityInput}`]: this.onQuantityBlur.bind(this),
@@ -684,10 +685,13 @@ export default class Product extends Component {
     }
   }
 
-  onBlockButtonKeyup(evt, target) {
-    if (evt.keyCode === ENTER_KEY) {
-      this.onButtonClick(evt, target);
+  onBlockButtonKeyDown(evt, target) {
+    if (evt.keyCode !== ENTER_KEY && evt.keyCode !== SPACE_KEY) {
+      return;
     }
+
+    evt.preventDefault();
+    this.onButtonClick(evt, target);
   }
 
   onOptionSelect(evt) {

diff --git a/test/unit/product/product-component.js b/test/unit/product/product-component.js
@@ -653,31 +653,52 @@ describe('Product Component class', () => {
       });
     });
 
-    describe('onBlockButtonKeyup()', () => {
+    describe('onBlockButtonKeyDown()', () => {
       let event;
       let onButtonClickStub;
+      let preventDefaultSpy;
       const target = {};
 
       beforeEach(() => {
         event = {};
         onButtonClickStub = sinon.stub(product, 'onButtonClick');
+        preventDefaultSpy = sinon.spy();
       });
 
       afterEach(() => {
         onButtonClickStub.restore();
       });
 
-      it('calls onButtonClick if event keycode is the enter key', () => {
-        event.keyCode = 13; // enter key
-        product.onBlockButtonKeyup(event, target);
+      it('calls onButtonClick and preventDefault if event keycode is the enter key', () => {
+        event = {
+          keyCode: 13, // enter key
+          preventDefault: preventDefaultSpy,
+        };
+        product.onBlockButtonKeyDown(event, target);
         assert.calledOnce(onButtonClickStub);
         assert.calledWith(onButtonClickStub, event, target);
+        assert.calledOnce(preventDefaultSpy);
       });
 
-      it('does not call onButtonClick if event keycode is not the enter key', () => {
-        event.keyCode = 99;
-        product.onBlockButtonKeyup(event, target);
+      it('calls onButtonClick and preventDefault if event keycode is the space key', () => {
+        event = {
+          keyCode: 32, // space key
+          preventDefault: preventDefaultSpy,
+        };
+        product.onBlockButtonKeyDown(event, target);
+        assert.calledOnce(onButtonClickStub);
+        assert.calledWith(onButtonClickStub, event, target);
+        assert.calledOnce(preventDefaultSpy);
+      });
+
+      it('does not call onButtonClick or preventDefault if event keycode is not the enter or space key', () => {
+        event = {
+          keyCode: 99,
+          preventDefault: preventDefaultSpy,
+        };        
+        product.onBlockButtonKeyDown(event, target);
         assert.notCalled(onButtonClickStub);
+        assert.notCalled(preventDefaultSpy);
       });
     });
 
@@ -2065,11 +2086,11 @@ describe('Product Component class', () => {
           });
         });
 
-        it('binds onBlockButtonKeyup to blockButton keyup', () => {
-          const onBlockButtonKeyupStub = sinon.stub(product, 'onBlockButtonKeyup');
-          product.DOMEvents[`keyup ${product.selectors.product.blockButton}`]();
-          assert.calledOnce(onBlockButtonKeyupStub);
-          onBlockButtonKeyupStub.restore();
+        it('binds onBlockButtonKeyDown to blockButton keydown', () => {
+          const onBlockButtonKeyDownStub = sinon.stub(product, 'onBlockButtonKeyDown');
+          product.DOMEvents[`keydown ${product.selectors.product.blockButton}`]();
+          assert.calledOnce(onBlockButtonKeyDownStub);
+          onBlockButtonKeyDownStub.restore();
         });
 
         describe('onQuantityIncrement bindngs', () => {