fix: wrong UX for keyboard focus and fullscreen

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
 

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",

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%;
 }

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}

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 {

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);

examples/web/react/components/modal/modal.tsx

-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={""}