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

Consume all combinations of space / enter, keyDown / keyUp presses and

Browse source 
try to explain this key handling inconsistency with some additional
comments as per the review discussion.
This commit is contained in:
Peter Vágner 2018-01-05 11:45:45 +01:00
parent f2ca02eaf8
commit cf472c791d
1 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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