sergiotarxz/msgba-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixing keyboard navigation bug.

Browse Source
This commit is contained in:
Sergiotarxz 2023-04-03 13:21:59 +02:00
parent 797386845a
commit 27f0eb84b2
4 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js-src/components/overlay-controls.tsx
View File

@ -3,7 +3,6 @@ import { HOME_BUTTON_IMAGE } from '@msgba/constants'
import { sendKeyDown } from '@msgba/packet' import { sendKeyDown } from '@msgba/packet'
export interface OverlayControlsProps { export interface OverlayControlsProps {
firstMenuElement: React.RefObject<HTMLAnchorElement>
controlsRef: React.RefObject<HTMLDivElement> controlsRef: React.RefObject<HTMLDivElement>
setHiddenMenu: (c: boolean) => void setHiddenMenu: (c: boolean) => void
webSocket: WebSocket | null webSocket: WebSocket | null
@ -20,7 +19,7 @@ interface ControlValue {
type ControlMap = Record<string, ControlValue> type ControlMap = Record<string, ControlValue>
export default function OverlayControls ({ firstMenuElement, setHiddenMenu, webSocket, controlsRef }: OverlayControlsProps): JSX.Element { export default function OverlayControls ({ setHiddenMenu, webSocket, controlsRef }: OverlayControlsProps): JSX.Element {
function showOverlayMenu (): void { function showOverlayMenu (): void {
setHiddenMenu(false) setHiddenMenu(false)
} }

8
js-src/components/overlay-menu.tsx
View File

@ -10,7 +10,7 @@ export interface OverlayMenuProps {
screenRef: React.RefObject<HTMLDivElement> screenRef: React.RefObject<HTMLDivElement>
isFullscreen: boolean isFullscreen: boolean
setIsFullscreen: (c: boolean) => void setIsFullscreen: (c: boolean) => void
firstMenuElement: React.RefObject<HTMLAnchorElement> overlayMenu: React.RefObject<HTMLDivElement>
websocket: WebSocket | null websocket: WebSocket | null
onSaveResponseLambdas: Map<bigint, (saveFile: Uint8Array) => void> onSaveResponseLambdas: Map<bigint, (saveFile: Uint8Array) => void>
}; };
@ -20,7 +20,7 @@ type Style = Record<string, string>
export default function OverlayMenu ({ export default function OverlayMenu ({
hiddenMenu, setHiddenMenu, emulationStarted, hiddenMenu, setHiddenMenu, emulationStarted,
setHiddenFormSelectFiles, screenRef, isFullscreen, setIsFullscreen, setHiddenFormSelectFiles, screenRef, isFullscreen, setIsFullscreen,
firstMenuElement, websocket, onSaveResponseLambdas overlayMenu, websocket, onSaveResponseLambdas
}: OverlayMenuProps): JSX.Element { }: OverlayMenuProps): JSX.Element {
function exitMenu (): void { function exitMenu (): void {
setHiddenMenu(true) setHiddenMenu(true)
@ -101,9 +101,9 @@ export default function OverlayMenu ({
<div className="overlay-menu-div-header"> <div className="overlay-menu-div-header">
<CloseButton onClick={exitMenu}/> <CloseButton onClick={exitMenu}/>
</div> </div>
<div className="overlay-menu"> <div className="overlay-menu" ref={overlayMenu}>
<ul> <ul>
<li><a ref={firstMenuElement} style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li> <li><a style={styleSelectRom} onClick={openSelectFilesMenu} href="#">Select rom</a></li>
<li><a ref={saveButton} style={styleSave} onClick={onSave} href="#">Save</a></li> <li><a ref={saveButton} style={styleSave} onClick={onSave} href="#">Save</a></li>
<li><a onClick={toggleFullscreen} href="#">{toggleFullscreenText}</a></li> <li><a onClick={toggleFullscreen} href="#">{toggleFullscreenText}</a></li>
<li><a href="#" onClick={exitMenu}>Exit</a></li> <li><a href="#" onClick={exitMenu}>Exit</a></li>

18
js-src/components/page.tsx
View File

@ -102,8 +102,16 @@ export default function Page (): JSX.Element {
return return
} }
if (!hiddenMenu) { if (!hiddenMenu) {
if (firstMenuElement.current != null) { if (overlayMenu.current == null) {
firstMenuElement.current.focus() return
}
const allAnchors = overlayMenu.current.querySelectorAll('a')
for (const anchor of allAnchors) {
if (anchor.style.display === 'none') {
continue
}
anchor.focus()
break
} }
return return
} }
@ -177,18 +185,18 @@ export default function Page (): JSX.Element {
const onStartEmulation = (e: React.MouseEvent<HTMLInputElement>): void => { const onStartEmulation = (e: React.MouseEvent<HTMLInputElement>): void => {
handleClickStartEmulationButton(e) handleClickStartEmulationButton(e)
} }
const firstMenuElement = React.useRef<HTMLAnchorElement>(null) const overlayMenu = React.useRef<HTMLDivElement>(null)
const screenRef = React.useRef<HTMLDivElement>(null) const screenRef = React.useRef<HTMLDivElement>(null)
const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false) const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false)
return ( return (
<div ref={screenRef}> <div ref={screenRef}>
<OverlayControls controlsRef={controlsRef} firstMenuElement={firstMenuElement} <OverlayControls controlsRef={controlsRef}
setHiddenMenu={setHiddenMenu} webSocket={webSocket}/> setHiddenMenu={setHiddenMenu} webSocket={webSocket}/>
<OverlayMenu hiddenMenu={hiddenMenu} <OverlayMenu hiddenMenu={hiddenMenu}
setHiddenMenu={setHiddenMenu} emulationStarted={emulationStarted} setHiddenMenu={setHiddenMenu} emulationStarted={emulationStarted}
setHiddenFormSelectFiles={setHiddenFormSelectFiles} screenRef={screenRef} setHiddenFormSelectFiles={setHiddenFormSelectFiles} screenRef={screenRef}
isFullscreen={isFullscreen} setIsFullscreen={setIsFullscreen} isFullscreen={isFullscreen} setIsFullscreen={setIsFullscreen}
firstMenuElement={firstMenuElement} websocket={webSocket} overlayMenu={overlayMenu} websocket={webSocket}
onSaveResponseLambdas={onSaveResponseLambdas}/> onSaveResponseLambdas={onSaveResponseLambdas}/>
<OverlaySelectFiles hiddenFormSelectFiles={hiddenFormSelectFiles} <OverlaySelectFiles hiddenFormSelectFiles={hiddenFormSelectFiles}
setHiddenFormSelectFiles={setHiddenFormSelectFiles} setHiddenFormSelectFiles={setHiddenFormSelectFiles}

6
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long