From 68ed4654940875f0999df5a7da4bb10348ab6027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 8 Nov 2022 08:21:12 +0000
Subject: [PATCH] feat: focusable buttons
---
.../web/react/components/button/button.tsx | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index 8e26fb5d..21adf106 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -43,13 +43,28 @@ export const Button: FC<ButtonProps> = ({
onFile && onFile(file);
event.target.value = "";
};
+ const onKeyPress = (event: React.KeyboardEvent) => {
+ if (event.key == "Enter") {
+ onClick && onClick();
+ }
+ };
const renderSimple = () => (
- <span className={classes()} onClick={onClick}>
+ <span
+ className={classes()}
+ onClick={onClick}
+ onKeyPress={onKeyPress}
+ tabIndex={0}
+ >
{text}
</span>
);
const renderComplex = () => (
- <span className={classes()} onClick={onClick}>
+ <span
+ className={classes()}
+ onClick={onClick}
+ onKeyPress={onKeyPress}
+ tabIndex={0}
+ >
{image && <img src={image} alt={imageAlt || text || "button"} />}
{file && (
<input type="file" accept={accept} onChange={onFileChange} />
--
GitLab