mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-15 14:51:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

Argh! Reworked AccessibleButton key handling again. It turned out by

Browse source 
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.
This commit is contained in:
Peter Vágner 2017-12-07 10:20:27 +01:00
parent 4171675221
commit 839f938c91
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/views/elements/AccessibleButton.js
View file

@ -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);