[UX] Add Accessibility option to disable closing dialogs when clicking outside (#3402)

* Add Accessibility option to disable closing dialogs when clicking outside

* Add i18n

Author: arielj

public/locales/en/translation.json

@@ -3,6 +3,7 @@
         "actions_font_family_no_default": "Actions Font Family (Default: ",
         "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family_no_default": "Content Font Family (Default: ",
+        "disable_dialog_backdrop_close": "Disable closing dialogs by clicking outside",
         "fonts": "Fonts",
         "title": "Accessibility",
         "zoom": "Zoom"

src/common/types/electron_store.ts

@@ -34,6 +34,7 @@ export interface StoreStructure {
     contentFontFamily: string
     actionsFontFamily: string
     allTilesInColor: boolean
+    disableDialogBackdropClose: boolean
     language: string
     'general-logs': {
       currentLogFile: string

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

@@ -1,9 +1,12 @@
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import ContextProvider from 'frontend/state/ContextProvider'
 import React, {
+  KeyboardEvent,
   ReactNode,
   SyntheticEvent,
   useCallback,
+  useContext,
   useEffect,
   useRef,
   useState
@@ -26,6 +29,7 @@ export const Dialog: React.FC<DialogProps> = ({
   const onCloseRef = useRef(onClose)
   onCloseRef.current = onClose
   const [focusOnClose, setFocusOnClose] = useState<HTMLElement | null>(null)
+  const { disableDialogBackdropClose } = useContext(ContextProvider)
 
   useEffect(() => {
     setFocusOnClose(document.querySelector('*:focus') as HTMLElement)
@@ -45,15 +49,25 @@ export const Dialog: React.FC<DialogProps> = ({
         close()
       }
       dialog.addEventListener('cancel', cancel)
-      dialog['showPopover']()
 
-      return () => {
-        dialog.removeEventListener('cancel', cancel)
-        dialog['hidePopover']()
+      if (disableDialogBackdropClose) {
+        dialog['showPopover']()
+
+        return () => {
+          dialog.removeEventListener('cancel', cancel)
+          dialog['hidePopover']()
+        }
+      } else {
+        dialog.showModal()
+
+        return () => {
+          dialog.removeEventListener('cancel', cancel)
+          dialog.close()
+        }
       }
     }
     return
-  }, [dialogRef.current])
+  }, [dialogRef.current, disableDialogBackdropClose])
 
   const onDialogClick = useCallback(
     (e: SyntheticEvent) => {
@@ -73,6 +87,12 @@ export const Dialog: React.FC<DialogProps> = ({
     [onClose]
   )
 
+  const closeIfEsc = (event: KeyboardEvent<HTMLDialogElement>) => {
+    if (event.key === 'Escape') {
+      close()
+    }
+  }
+
   return (
     <div className="Dialog">
       <dialog
@@ -82,6 +102,7 @@ export const Dialog: React.FC<DialogProps> = ({
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore, this feature is new and not yet typed
         popover="manual"
+        onKeyUp={closeIfEsc}
       >
         {showCloseButton && (
           <div className="Dialog__Close">

src/frontend/components/UI/Dialog/index.css

@@ -34,7 +34,8 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.Dialog__element:popover-open {
+.Dialog__element:popover-open,
+.Dialog__element[open] {
   opacity: 1;
   transform: translateY(0);
   box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);

src/frontend/screens/Accessibility/index.tsx

@@ -26,7 +26,9 @@ export default React.memo(function Accessibility() {
     allTilesInColor,
     setAllTilesInColor,
     setPrimaryFontFamily,
-    setSecondaryFontFamily
+    setSecondaryFontFamily,
+    disableDialogBackdropClose,
+    setDisableDialogBackdropClose
   } = useContext(ContextProvider)
 
   hasHelp(
@@ -188,6 +190,7 @@ export default React.memo(function Accessibility() {
         </SelectField>
 
         <ThemeSelector />
+
         <span className="setting">
           <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
             <ToggleSwitch
@@ -203,6 +206,22 @@ export default React.memo(function Accessibility() {
             />
           </label>
         </span>
+
+        <span className="setting">
+          <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
+            <ToggleSwitch
+              htmlId="disableDialogBackdropClose"
+              value={disableDialogBackdropClose}
+              handleChange={() => {
+                setDisableDialogBackdropClose(!disableDialogBackdropClose)
+              }}
+              title={t(
+                'accessibility.disable_dialog_backdrop_close',
+                'Disable closing dialogs by clicking outside'
+              )}
+            />
+          </label>
+        </span>
       </div>
     </div>
   )

src/frontend/state/ContextProvider.tsx

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

src/frontend/state/GlobalState.tsx

@@ -113,6 +113,7 @@ interface StateProps {
   }
   helpItems: { [key: string]: HelpItem }
   experimentalFeatures: ExperimentalFeatures
+  disableDialogBackdropClose: boolean
 }
 
 // function to load the new key or fallback to the old one
@@ -215,7 +216,11 @@ class GlobalState extends PureComponent<Props> {
       enableNewDesign: false,
       enableHelp: false,
       automaticWinetricksFixes: false
-    }
+    },
+    disableDialogBackdropClose: configStore.get(
+      'disableDialogBackdropClose',
+      false
+    )
   }
 
   setCurrentCustomCategories = (newCustomCategories: string[]) => {
@@ -269,6 +274,11 @@ class GlobalState extends PureComponent<Props> {
     this.setState({ allTilesInColor: value })
   }
 
+  setDisableDialogBackdropClose = (value: boolean) => {
+    configStore.set('disableDialogBackdropClose', value)
+    this.setState({ disableDialogBackdropClose: value })
+  }
+
   setSideBarCollapsed = (value: boolean) => {
     this.setState({ sidebarCollapsed: value })
   }
@@ -1013,7 +1023,8 @@ class GlobalState extends PureComponent<Props> {
             items: this.state.helpItems,
             addHelpItem: this.addHelpItem,
             removeHelpItem: this.removeHelpItem
-          }
+          },
+          setDisableDialogBackdropClose: this.setDisableDialogBackdropClose
         }}
       >
         {this.props.children}

src/frontend/types.ts

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