[UX/A11y] Disable animations (#4851)

* [UX/A11y] Disable animations

* Fix focus on tabs and X buttons for controllers

Author: arielj

public/locales/en/translation.json

@@ -3,6 +3,7 @@
         "actions_font_family_default": "Actions Font Family (Default: {{fontFamily}})",
         "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family_default": "Content Font Family (Default: {{fontFamily}})",
+        "disable_animations": "Disable UI animations",
         "disable_dialog_backdrop_close": "Disable closing dialogs by clicking outside",
         "disable_smooth_scrolling": "Disable smooth scrolling (requires restart)",
         "fonts": "Fonts",

src/common/types.ts

@@ -104,6 +104,7 @@ export interface AppSettings extends GameSettings {
   disablePlaytimeSync: boolean
   disableSmoothScrolling: boolean
   disableLogs: boolean
+  disableAnimations: boolean
   discordRPC: boolean
   downloadNoHttps: boolean
   downloadProtonToSteam: boolean

src/common/types/electron_store.ts

@@ -37,6 +37,7 @@ export interface StoreStructure {
     allTilesInColor: boolean
     titlesAlwaysVisible: boolean
     disableDialogBackdropClose: boolean
+    disableAnimations: boolean
     language: string
     'general-logs': {
       currentLogFile: string

src/frontend/App.css

@@ -65,6 +65,22 @@ body {
   grid-area: offline;
 }
 
+body:has(.disableAnimations) {
+  *,
+  *:before,
+  *:after {
+    animation: none !important;
+    transition: none !important;
+    transition-duration: 0ms !important;
+  }
+  .MuiTouchRipple-root {
+    display: none !important;
+  }
+  .Mui-focusVisible {
+    background: color(from var(--accent-overlay) srgb r g b / 0.3);
+  }
+}
+
 .HelpButton {
   position: fixed;
   bottom: 0;

src/frontend/App.tsx

@@ -23,8 +23,14 @@ import { SettingsModalWrapper } from './screens/Settings/components/SettingsModa
 import AnalyticsDialog from './screens/Settings/components/AnalyticsDialog'
 
 function Root() {
-  const { isRTL, isFullscreen, isFrameless, experimentalFeatures, help } =
-    useContext(ContextProvider)
+  const {
+    isRTL,
+    isFullscreen,
+    isFrameless,
+    experimentalFeatures,
+    help,
+    disableAnimations
+  } = useContext(ContextProvider)
 
   const hasNativeOverlayControls = navigator['windowControlsOverlay']?.visible
   const showOverlayControls = isFrameless && !hasNativeOverlayControls
@@ -64,7 +70,8 @@ function Root() {
       className={classNames('App', {
         isRTL,
         frameless: isFrameless,
-        fullscreen: isFullscreen
+        fullscreen: isFullscreen,
+        disableAnimations
       })}
       // disable dragging for all elements by default
       onDragStart={(e) => e.preventDefault()}

src/frontend/screens/Accessibility/index.tsx

@@ -32,7 +32,9 @@ const Accessibility = React.memo(function Accessibility() {
     setPrimaryFontFamily,
     setSecondaryFontFamily,
     disableDialogBackdropClose,
-    setDisableDialogBackdropClose
+    setDisableDialogBackdropClose,
+    disableAnimations,
+    setDisableAnimations
   } = useContext(ContextProvider)
 
   hasHelp(
@@ -235,6 +237,22 @@ const Accessibility = React.memo(function Accessibility() {
             />
           </label>
         </span>
+
+        <span className="setting">
+          <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
+            <ToggleSwitch
+              htmlId="disableAnimations"
+              value={disableAnimations}
+              handleChange={() => {
+                setDisableAnimations(!disableAnimations)
+              }}
+              title={t(
+                'accessibility.disable_animations',
+                'Disable UI animations'
+              )}
+            />
+          </label>
+        </span>
       </div>
     </div>
   )

src/frontend/state/ContextProvider.tsx

@@ -99,7 +99,9 @@ const initialContext: ContextType = {
   },
   handleExperimentalFeatures: () => null,
   disableDialogBackdropClose: false,
-  setDisableDialogBackdropClose: () => null
+  setDisableDialogBackdropClose: () => null,
+  disableAnimations: false,
+  setDisableAnimations: () => null
 }
 
 export default React.createContext(initialContext)

src/frontend/state/GlobalState.tsx

@@ -104,6 +104,7 @@ interface StateProps {
   helpItems: { [key: string]: HelpItem }
   experimentalFeatures: ExperimentalFeatures
   disableDialogBackdropClose: boolean
+  disableAnimations: boolean
 }
 
 // function to load the new key or fallback to the old one
@@ -211,7 +212,8 @@ class GlobalState extends PureComponent<Props> {
     disableDialogBackdropClose: configStore.get(
       'disableDialogBackdropClose',
       false
-    )
+    ),
+    disableAnimations: configStore.get('disableAnimations', false)
   }
 
   setCurrentCustomCategories = (newCustomCategories: string[]) => {
@@ -275,6 +277,11 @@ class GlobalState extends PureComponent<Props> {
     this.setState({ disableDialogBackdropClose: value })
   }
 
+  setDisableAnimations = (value: boolean) => {
+    configStore.set('disableAnimations', value)
+    this.setState({ disableAnimations: value })
+  }
+
   setSideBarCollapsed = (value: boolean) => {
     this.setState({ sidebarCollapsed: value })
   }
@@ -1045,7 +1052,9 @@ class GlobalState extends PureComponent<Props> {
             addHelpItem: this.addHelpItem,
             removeHelpItem: this.removeHelpItem
           },
-          setDisableDialogBackdropClose: this.setDisableDialogBackdropClose
+          setDisableDialogBackdropClose: this.setDisableDialogBackdropClose,
+          disableAnimations: this.state.disableAnimations,
+          setDisableAnimations: this.setDisableAnimations
         }}
       >
         {this.props.children}

src/frontend/types.ts

@@ -113,6 +113,8 @@ export interface ContextType {
   handleExperimentalFeatures: (newSetting: ExperimentalFeatures) => void
   disableDialogBackdropClose: boolean
   setDisableDialogBackdropClose: (value: boolean) => void
+  disableAnimations: boolean
+  setDisableAnimations: (value: boolean) => void
 }
 
 export type DialogModalOptions = {