mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-15 17:21:33 +03:00
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.
This commit is contained in:
parent
f2ca02eaf8
commit
cf472c791d
1 changed files with 12 additions and 0 deletions
|
@ -32,12 +32,20 @@ export default function AccessibleButton(props) {
|
||||||
// We need to consume enter onKeyDown and space onKeyUp
|
// We need to consume enter onKeyDown and space onKeyUp
|
||||||
// otherwise we are risking also activating other keyboard focusable elements
|
// otherwise we are risking also activating other keyboard focusable elements
|
||||||
// that might receive focus as a result of the AccessibleButtonClick action
|
// 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) {
|
restProps.onKeyDown = function(e) {
|
||||||
if (e.keyCode === KeyCode.ENTER) {
|
if (e.keyCode === KeyCode.ENTER) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return onClick(e);
|
return onClick(e);
|
||||||
}
|
}
|
||||||
|
if (e.keyCode === KeyCode.SPACE) {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
restProps.onKeyUp = function(e) {
|
restProps.onKeyUp = function(e) {
|
||||||
if (e.keyCode === KeyCode.SPACE) {
|
if (e.keyCode === KeyCode.SPACE) {
|
||||||
|
@ -45,6 +53,10 @@ export default function AccessibleButton(props) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return onClick(e);
|
return onClick(e);
|
||||||
}
|
}
|
||||||
|
if (e.keyCode === KeyCode.ENTER) {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
restProps.tabIndex = restProps.tabIndex || "0";
|
restProps.tabIndex = restProps.tabIndex || "0";
|
||||||
restProps.role = "button";
|
restProps.role = "button";
|
||||||
|
|
Loading…
Reference in a new issue