fix(accessibility): space and enter keys didn't click buttons in UI

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

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>

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