Controller navigation hacks: Transferring focus

Restoring the focussed element on dialog close is already handled by MUI, we
don't need this code ourselves

Moving focus on dialog open *should* work automatically as well, however it
doesn't. I've tried various methods with element properties and JS, nothing
seems to work. As a band-aid fix for now, we simulate 1-2 tab presses to focus
the dialog content

Author: CommandMC

src/frontend/components/UI/Dialog/components/Dialog.tsx

@@ -39,20 +39,21 @@ export const Dialog: React.FC<DialogProps> = ({
   onClose
 }) => {
   const [open, setOpen] = useState(true)
-  const [focusOnClose, setFocusOnClose] = useState<HTMLElement | null>(null)
   const { disableDialogBackdropClose } = useContext(ContextProvider)
 
   useEffect(() => {
-    setFocusOnClose(document.querySelector<HTMLElement>('*:focus'))
+    // HACK: Focussing the dialog using JS does not seem to work
+    //       Instead, simulate one or two tab presses
+    // One tab to focus the dialog
+    window.api.gamepadAction({ action: 'tab' })
+    // Second tab to skip the close button if it's shown
+    if (showCloseButton) window.api.gamepadAction({ action: 'tab' })
   }, [])
 
   const close = useCallback(() => {
     setOpen(false)
     onClose()
-    if (focusOnClose) {
-      setTimeout(() => focusOnClose.focus(), 200)
-    }
-  }, [onClose, focusOnClose])
+  }, [onClose])
 
   return (
     <MuiDialog