From ac502a3b932df7526995e16094247a001ef654bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Wed, 9 Nov 2022 01:24:08 +0000
Subject: [PATCH] fix: wrong UX for keyboard focus and fullscreen
---
CHANGELOG.md | 1 +
examples/web/react/components/button/button.tsx | 2 +-
examples/web/react/components/display/display.css | 6 ++++++
examples/web/react/components/display/display.tsx | 2 ++
.../react/components/keyboard-gb/keyboard-gb.css | 8 ++++----
examples/web/react/components/modal/modal.css | 6 ++++++
examples/web/react/components/modal/modal.tsx | 15 +++++++++++++--
7 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3aff5a9c..509b6bb9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
* Arrow keys usage for on-screen gamepad
+* Wrong UX for keyboard focus and fullscreen
## [0.4.1] - 2022-11-06
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index 27a15fcb..c65deb69 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -21,7 +21,7 @@ export const Button: FC<ButtonProps> = ({
image,
imageAlt,
enabled = false,
- focusable = false,
+ focusable = true,
file = false,
accept = ".txt",
size = "small",
diff --git a/examples/web/react/components/display/display.css b/examples/web/react/components/display/display.css
index 0781b767..f0e987b7 100644
--- a/examples/web/react/components/display/display.css
+++ b/examples/web/react/components/display/display.css
@@ -100,5 +100,11 @@
}
.display > .display-frame > .display-canvas {
+ outline: none;
+ -o-outline: none;
+ -ms-outline: none;
+ -moz-outline: none;
+ -khtml-outline: none;
+ -webkit-outline: none;
width: 100%;
}
diff --git a/examples/web/react/components/display/display.tsx b/examples/web/react/components/display/display.tsx
index 821bb268..a71d57ae 100644
--- a/examples/web/react/components/display/display.tsx
+++ b/examples/web/react/components/display/display.tsx
@@ -88,6 +88,7 @@ export const Display: FC<DisplayProps> = ({
useEffect(() => {
if (fullscreen) {
+ canvasRef.current?.focus();
resizeRef.current();
document.getElementsByTagName("body")[0].style.overflow = "hidden";
window.addEventListener("resize", resizeRef.current);
@@ -139,6 +140,7 @@ export const Display: FC<DisplayProps> = ({
>
<canvas
ref={canvasRef}
+ tabIndex={-1}
className="display-canvas"
width={options.width * options.scale}
height={options.height * options.scale}
diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.css b/examples/web/react/components/keyboard-gb/keyboard-gb.css
index 70d2cd4e..fce8fc54 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.css
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.css
@@ -67,8 +67,8 @@
.keyboard-gb > .dpad .key {
border: none;
- padding: 0px 0px 0px 0px;
font-size: 24px;
+ padding: 0px 0px 0px 0px;
}
.keyboard-gb > .dpad .key.pressed {
@@ -113,8 +113,8 @@
-webkit-border-radius: 0px 6px 6px 0px;
border-right: 3px solid #ffffff;
border-top: 3px solid #ffffff;
- margin-right: 0px;
margin-left: -3px;
+ margin-right: 0px;
}
.keyboard-gb > .dpad .key.center {
@@ -155,10 +155,10 @@
-webkit-border-radius: 32px 32px 32px 32px;
border-width: 3px;
font-size: 30px;
+ font-weight: 900;
height: 58px;
line-height: 52px;
width: 58px;
- font-weight: 900;
}
.keyboard-gb > .action > .key.a {
@@ -179,12 +179,12 @@
.keyboard-gb > .options > .key {
font-size: 14px;
+ font-weight: 900;
height: 30px;
line-height: 26px;
margin-left: 16px;
margin-right: 16px;
min-width: 100px;
- font-weight: 900;
}
.keyboard-gb > .break {
diff --git a/examples/web/react/components/modal/modal.css b/examples/web/react/components/modal/modal.css
index bcc2c27c..6c65b679 100644
--- a/examples/web/react/components/modal/modal.css
+++ b/examples/web/react/components/modal/modal.css
@@ -58,6 +58,12 @@
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin-top: 30px;
max-width: 100%;
+ outline: none;
+ -o-outline: none;
+ -ms-outline: none;
+ -moz-outline: none;
+ -khtml-outline: none;
+ -webkit-outline: none;
padding: 24px 24px 24px 24px;
text-align: left;
transform: scale(0.96);
diff --git a/examples/web/react/components/modal/modal.tsx b/examples/web/react/components/modal/modal.tsx
index c72f6761..a73a48b1 100644
--- a/examples/web/react/components/modal/modal.tsx
+++ b/examples/web/react/components/modal/modal.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import React, { FC, useEffect, useRef } from "react";
import Button from "../button/button";
import "./modal.css";
@@ -26,6 +26,7 @@ export const Modal: FC<ModalProps> = ({
}) => {
const classes = () =>
["modal", visible ? "visible" : "", ...style].join(" ");
+ const modalRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
@@ -37,6 +38,11 @@ export const Modal: FC<ModalProps> = ({
document.removeEventListener("keydown", onKeyDown);
};
}, []);
+ useEffect(() => {
+ if (visible) {
+ modalRef.current?.focus();
+ }
+ }, [visible]);
const getTextHtml = (separator = /\n/g) => ({
__html: text.replace(separator, "<br/>")
});
@@ -48,7 +54,12 @@ export const Modal: FC<ModalProps> = ({
};
return (
<div className={classes()} onClick={onCancel}>
- <div className="modal-window" onClick={onWindowClick}>
+ <div
+ ref={modalRef}
+ className="modal-window"
+ onClick={onWindowClick}
+ tabIndex={-1}
+ >
<div className="modal-top-buttons">
<Button
text={""}
--
GitLab