From e79678ffdf4ae9b927406afcb7ba8bdd9213dfd8 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Tue, 21 May 2024 05:43:18 +0300
Subject: [PATCH] fix(accessibility): space and enter keys didn't click buttons
 in UI

---
 src/controls.ts                  |  8 +++++--
 src/react/KeybindingsScreen.tsx  | 40 +++++++++++++++-----------------
 src/react/SignEditorProvider.tsx |  5 ----
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/controls.ts b/src/controls.ts
index b23d3beb..80abb2c0 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -87,10 +87,14 @@ export type Command = CommandEventArgument<typeof contro['_commandsRaw']>['comma
 
 // updateCustomBinds()
 
-export const setDoPreventDefault = (state: boolean) => {
-  controlOptions.preventDefault = state
+const updateDoPreventDefault = () => {
+  controlOptions.preventDefault = miscUiState.gameLoaded && !activeModalStack.length
 }
 
+subscribe(miscUiState, updateDoPreventDefault)
+subscribe(activeModalStack, updateDoPreventDefault)
+updateDoPreventDefault()
+
 const setSprinting = (state: boolean) => {
   bot.setControlState('sprint', state)
   gameAdditionalState.isSprinting = state
diff --git a/src/react/KeybindingsScreen.tsx b/src/react/KeybindingsScreen.tsx
index 97126655..57d7d7ef 100644
--- a/src/react/KeybindingsScreen.tsx
+++ b/src/react/KeybindingsScreen.tsx
@@ -55,8 +55,8 @@ export default (
   }
 
   const handleClick: HandleClick = (group, action, index, type) => {
-    //@ts-expect-error
-    setAwaitingInputType(type)
+    (document.activeElement as HTMLElement)?.blur()
+    setAwaitingInputType(type as any)
     updateCurrBind(group, action)
     setButtonNum(prev => index)
   }
@@ -96,16 +96,8 @@ export default (
     updateBindMap()
   }, [userConfig])
 
-  // const updateKeyboardBinding = (e: import('react').KeyboardEvent<HTMLDivElement>) => {
-  //   if (!e.code || e.key === 'Escape' || !awaitingInputType) return
-  //   setBinding({ code: e.code, state: true }, groupName, actionName, buttonNum)
-  // }
-
-  const updateBinding = (data: any) => {
-    if ((!data.state && awaitingInputType) || !awaitingInputType) {
-      setAwaitingInputType(null)
-      return
-    }
+  const updateBinding = (data) => {
+    if (data.state === true || !awaitingInputType) return
     if ('code' in data) {
       if (data.code === 'Escape' || ['Mouse0', 'Mouse1', 'Mouse2'].includes(data.code)) {
         setAwaitingInputType(null)
@@ -164,10 +156,14 @@ export default (
   }, [])
 
   useEffect(() => {
+    if (!awaitingInputType) return
     contro.on('pressedKeyOrButtonChanged', updateBinding)
+    const preventDefault = (e) => e.preventDefault()
+    document.addEventListener('keydown', preventDefault, { passive: false })
 
     return () => {
       contro.off('pressedKeyOrButtonChanged', updateBinding)
+      document.removeEventListener('keydown', preventDefault)
     }
   }, [groupName, actionName, awaitingInputType])
 
@@ -206,7 +202,7 @@ export default (
             {Object.entries(actions).map(([action, { keys, gamepad }]) => {
               return <div key={`action-container-${action}`} className={styles.actionBinds}>
                 <div className={styles.actionName}>{parseActionName(action)}</div>
-                
+
                 <Button
                   onClick={() => {
                     updateCurrBind(group, action)
@@ -233,7 +229,7 @@ export default (
                     updateCurrBind(group, action)
                     resetBinding(group, action, 'gamepad')
                   }}
-                  style={{ 
+                  style={{
                     opacity: userConfig?.[group]?.[action]?.gamepad?.length ? 1 : 0,
                     width: '0px'
                   }}
@@ -288,10 +284,10 @@ export const ButtonWithMatchesAlert = ({
     } else if (type === 'keys') {
       setButtonSign(keys?.length ? parseBindingName(keys[index]) : '')
     } else {
-      setButtonSign(gamepad?.[0] ? 
-        isPS ? 
-          buttonsMap[gamepad[0]] ?? gamepad[0] 
-          : gamepad[0] 
+      setButtonSign(gamepad?.[0] ?
+        isPS ?
+          buttonsMap[gamepad[0]] ?? gamepad[0]
+          : gamepad[0]
         : '')
     }
   }, [userConfig, isPS])
@@ -343,11 +339,13 @@ export const AwaitingInputOverlay = ({ isGamepad }) => {
     flexDirection: 'column',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     color: 'white',
-    fontSize: 24,
-    zIndex: 10
+    fontSize: 20,
+    zIndex: 10,
+    textAlign: 'center',
   }}
+  onContextMenu={e => e.preventDefault()}
   >
-    <div >
+    <div>
       {isGamepad ? 'Press the button on the gamepad ' : 'Press the key, side mouse button '}
       or ESC to cancel.
     </div>
diff --git a/src/react/SignEditorProvider.tsx b/src/react/SignEditorProvider.tsx
index 666935b6..8131ae86 100644
--- a/src/react/SignEditorProvider.tsx
+++ b/src/react/SignEditorProvider.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useEffect, useState, useRef } from 'react'
 import { showModal, hideModal } from '../globalState'
-import { setDoPreventDefault } from '../controls'
 import { options } from '../optionsStorage'
 import { useIsModalActive } from './utilsApp'
 import SignEditor, { ResultType } from './SignEditor'
@@ -57,10 +56,6 @@ export default () => {
     target.setAttribute('maxlength', `${15 + Math.ceil(addLength)}`)
   }
 
-  useEffect(() => {
-    setDoPreventDefault(!isModalActive) // disable e.preventDefault() since we might be using wysiwyg editor which doesn't use textarea and need default browser behavior to ensure characters are being typed in contenteditable container. Ideally we should do e.preventDefault() only when either ctrl, cmd (meta) or alt key is pressed.
-  }, [isModalActive])
-
   useMemo(() => {
     bot._client.on('open_sign_entity', (packet) => {
       if (!options.autoSignEditor) return