fix(ui5-file-uploader): open browse dialog with Space and Enter keys (#…

…3026) Fixes: #3001
SAP · Mar 29, 2021 · 0097f21 · 0097f21
1 parent 9d3b89e
commit 0097f21
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/packages/main/src/FileUploader.hbs b/packages/main/src/FileUploader.hbs
@@ -4,6 +4,8 @@
 	@mouseout="{{_onmouseout}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

diff --git a/packages/main/src/FileUploader.js b/packages/main/src/FileUploader.js
@@ -6,6 +6,7 @@ import {
 	fetchI18nBundle,
 	getI18nBundle,
 } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import {
 	FILEUPLOAD_BROWSE,
 	FILEUPLOADER_TITLE,
@@ -284,6 +285,18 @@ class FileUploader extends UI5Element {
 		});
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._input.click(event);
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._input.click(event);
+		}
+	}
+
 	_onfocusin() {
 		this.focused = true;
 	}