[UX] Improvements when using a controller to navigate the interface

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

@@ -5,7 +5,8 @@ import React, {
   SyntheticEvent,
   useCallback,
   useEffect,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 interface DialogProps {
@@ -24,12 +25,24 @@ export const Dialog: React.FC<DialogProps> = ({
   const dialogRef = useRef<HTMLDialogElement | null>(null)
   const onCloseRef = useRef(onClose)
   onCloseRef.current = onClose
+  const [focusOnClose, setFocusOnClose] = useState<HTMLElement | null>(null)
+
+  useEffect(() => {
+    setFocusOnClose(document.querySelector('*:focus') as HTMLElement)
+  }, [])
+
+  const close = () => {
+    onCloseRef.current()
+    if (focusOnClose) {
+      setTimeout(() => focusOnClose.focus(), 200)
+    }
+  }
 
   useEffect(() => {
     const dialog = dialogRef.current
     if (dialog) {
       const cancel = () => {
-        onCloseRef.current()
+        close()
       }
       dialog.addEventListener('cancel', cancel)
       dialog['showModal']()
@@ -52,7 +65,7 @@ export const Dialog: React.FC<DialogProps> = ({
           ev.offsetY < 0 ||
           ev.offsetY > tg.offsetHeight
         ) {
-          onClose()
+          close()
         }
       }
     },
@@ -68,7 +81,7 @@ export const Dialog: React.FC<DialogProps> = ({
       >
         {showCloseButton && (
           <div className="Dialog__Close">
-            <button className="Dialog__CloseButton" onClick={onClose}>
+            <button className="Dialog__CloseButton" onClick={close}>
               <FontAwesomeIcon className="Dialog__CloseIcon" icon={faXmark} />
             </button>
           </div>

src/frontend/helpers/gamepad.ts

@@ -132,8 +132,9 @@ export const initGamepad = () => {
             // closes the keyboard if present
             VirtualKeyboardController.destroy()
             return
-          } else if (insideInstallDialog()) {
-            closeInstallDialog()
+          } else if (insideDialog()) {
+            closeDialog()
+            return
           } else if (isSelect()) {
             // closes the select dropdown and re-focus element
             const el = currentElement()
@@ -261,18 +262,18 @@ export const initGamepad = () => {
     return true
   }
 
-  function insideInstallDialog() {
+  function insideDialog() {
     const el = currentElement()
     if (!el) return false
 
-    return !!el.closest('.InstallModal__dialog')
+    return !!el.closest('.Dialog__element')
   }
 
-  function closeInstallDialog() {
+  function closeDialog() {
     const el = currentElement()
     if (!el) return false
 
-    const dialog = el.closest('.InstallModal__dialog')
+    const dialog = el.closest('.Dialog__element')
     if (!dialog) return false
 
     const closeButton = dialog.querySelector<HTMLButtonElement>(

src/frontend/screens/Library/components/GamesList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import { GameInfo, Runner } from 'common/types'
 import cx from 'classnames'
 import GameCard from '../GameCard'
@@ -19,6 +19,27 @@ interface Props {
   isFavourite?: boolean
 }
 
+// When a card is focused in the library,
+const scrollCardIntoView = (ev: FocusEvent) => {
+  const windowHeight = window.innerHeight
+  const trgt = ev.target as HTMLElement
+  const rect = trgt.getBoundingClientRect()
+
+  if (rect.top < 100) {
+    // if it's too close to the top, scroll a bit down
+    window.scrollTo({
+      top: trgt.parentElement!.offsetTop - 200,
+      behavior: 'smooth'
+    })
+  } else if (rect.bottom > windowHeight - 100) {
+    // if it's too close to the bottom, scroll a bit up
+    window.scrollTo({
+      top: trgt.parentElement!.offsetTop - windowHeight + rect.height + 150,
+      behavior: 'smooth'
+    })
+  }
+}
+
 const GamesList = ({
   library = [],
   layout = 'grid',
@@ -30,6 +51,8 @@ const GamesList = ({
 }: Props): JSX.Element => {
   const { gameUpdates } = useContext(ContextProvider)
   const { t } = useTranslation()
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const { activeController } = useContext(ContextProvider)
 
   useEffect(() => {
     if (library.length) {
@@ -73,6 +96,22 @@ const GamesList = ({
     return () => ({})
   }, [library])
 
+  useEffect(() => {
+    if (listRef.current && activeController) {
+      listRef.current.addEventListener('focus', scrollCardIntoView, {
+        capture: true
+      })
+
+      return () => {
+        listRef.current?.removeEventListener('focus', scrollCardIntoView, {
+          capture: true
+        })
+      }
+    }
+
+    return () => ({})
+  }, [listRef.current, activeController])
+
   return (
     <div
       style={!library.length ? { backgroundColor: 'transparent' } : {}}
@@ -81,6 +120,7 @@ const GamesList = ({
         gameListLayout: layout === 'list',
         firstLane: isFirstLane
       })}
+      ref={listRef}
     >
       {layout === 'list' && (
         <div className="gameListHeader">