From 839f938c91cfe9106ab0b577f0692fed531c48bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20V=C3=A1gner?= Date: Thu, 7 Dec 2017 10:20:27 +0100 Subject: [PATCH] Argh! Reworked AccessibleButton key handling again. It turned out by fixing behaviour when pressing the enter key breaks behaviour when pressing space to activate the buttons. So we are now handling enter onKeyDown and space onKeyUp. Also briefly explained the situation with comments. --- src/components/views/elements/AccessibleButton.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js index 59c4b99798..f5254de490 100644 --- a/src/components/views/elements/AccessibleButton.js +++ b/src/components/views/elements/AccessibleButton.js @@ -16,6 +16,8 @@ import React from 'react'; +import { KeyCode } from '../../../Keyboard'; + /** * AccessibleButton is a generic wrapper for any element that should be treated * as a button. Identifies the element as a button, setting proper tab @@ -27,8 +29,18 @@ import React from 'react'; export default function AccessibleButton(props) { const {element, onClick, children, ...restProps} = props; restProps.onClick = onClick; + // 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 restProps.onKeyDown = function(e) { - if (e.keyCode == 13 || e.keyCode == 32) { + if (e.keyCode === KeyCode.ENTER) { + e.stopPropagation(); + e.preventDefault(); + return onClick(e); + } + }; + restProps.onKeyUp = function(e) { + if (e.keyCode === KeyCode.SPACE) { e.stopPropagation(); e.preventDefault(); return onClick(e);