mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 19:51:32 +03:00
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.
This commit is contained in:
parent
4171675221
commit
839f938c91
1 changed files with 13 additions and 1 deletions
|
@ -16,6 +16,8 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
import { KeyCode } from '../../../Keyboard';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* AccessibleButton is a generic wrapper for any element that should be treated
|
* AccessibleButton is a generic wrapper for any element that should be treated
|
||||||
* as a button. Identifies the element as a button, setting proper tab
|
* 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) {
|
export default function AccessibleButton(props) {
|
||||||
const {element, onClick, children, ...restProps} = props;
|
const {element, onClick, children, ...restProps} = props;
|
||||||
restProps.onClick = onClick;
|
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) {
|
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.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return onClick(e);
|
return onClick(e);
|
||||||
|
|
Loading…
Reference in a new issue