From cf472c791d580ccc0f5b3e419ec3f69e49ec50e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Fri, 5 Jan 2018 11:45:45 +0100
Subject: [PATCH] Consume all combinations of space / enter, keyDown / keyUp
 presses and try to explain this key handling inconsistency with some
 additional comments as per the review discussion.

---
 src/components/views/elements/AccessibleButton.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index f5254de490..ee8fd20d6f 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.js
@@ -32,12 +32,20 @@ export default function AccessibleButton(props) {
     // We need to consume enter onKeyDown and space onKeyUp
     // otherwise we are risking also activating other keyboard focusable elements
     // that might receive focus as a result of the AccessibleButtonClick action
+    // It's because we are using html buttons at a few places e.g. inside dialogs
+    // And divs which we report as role button to assistive technologies.
+    // Browsers handle space and enter keypresses differently and we are only adjusting to the
+    // inconsistencies here
     restProps.onKeyDown = function(e) {
         if (e.keyCode === KeyCode.ENTER) {
             e.stopPropagation();
             e.preventDefault();
             return onClick(e);
         }
+        if (e.keyCode === KeyCode.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
     };
     restProps.onKeyUp = function(e) {
         if (e.keyCode === KeyCode.SPACE) {
@@ -45,6 +53,10 @@ export default function AccessibleButton(props) {
             e.preventDefault();
             return onClick(e);
         }
+        if (e.keyCode === KeyCode.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
     };
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";