Merge branch 'dev' into delete-unused-files

Author: Ishfaq-code

Makefile

@@ -8,6 +8,11 @@ endif
 start:
 	docker compose -f docker-compose.nginx.yml up
 
+
+create-migrations:
+	make clean-cache
+	docker compose -f docker-compose.nginx.yml run php php bin/console doctrine:migrations:diff
+
 # set up the database
 migrate:
 	docker compose -f docker-compose.nginx.yml run php php bin/console doctrine:migrations:migrate

assets/css/udoit4-theme.css

@@ -536,16 +536,15 @@
     outline: 2px solid var(--focus-color);
   }
 
-
-  dialog {
+  dialog,
+  div[role="dialog"] {
     width: 90vw;
     max-width: 50em;
     overflow: hidden;
     box-sizing: border-box;
     border: none;
     border-radius: var(--window-radius);
     padding: 0;
-    background-color: var(--white);
     z-index: 100;
     box-shadow: 0 0 10px var(--shadow-color);
 
@@ -554,6 +553,23 @@
       max-width: 95vw;
       height: 95vh;
       max-height: 95vh;
+      position: fixed;
+      top: 2vh;
+    }
+
+    &::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: var(--backdrop-color);
+      z-index: -1;
+    }
+
+    > * {
+      background-color: var(--white);
     }
 
     .dialog-header,
@@ -1305,6 +1321,10 @@
     overflow-wrap: anywhere;
     cursor: pointer;
   }
+
+  .hidden {
+    display: none !important;
+  }
 }
 
 /* The separator class is for a horizontal line with text in the middle on various forms */

assets/js/Components/App.js

@@ -41,6 +41,7 @@ export default function App(initialData) {
   const [sessionIssues, setSessionIssues] = useState({})
   const [sessionFiles, setSessionFiles] = useState({})
   const [welcomeClosed, setWelcomeClosed] = useState(false)
+  const [modalActive, setModalActive] = useState(false)
 
   // `t` is used for text/translation. It will return the translated string if it exists
   // in the settings.labels object.
@@ -369,7 +370,8 @@ export default function App(initialData) {
          className={`flex-column flex-grow-1 `
           + `${settings?.user?.roles?.font_size || settings.DEFAULT_USER_SETTINGS.FONT_SIZE} `
           + `${settings?.user?.roles?.font_family || settings.DEFAULT_USER_SETTINGS.FONT_FAMILY} `
-          + `${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''}`}>
+          + `${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''}`}
+          lang={settings?.user?.roles?.lang || settings.DEFAULT_USER_SETTINGS.LANGUAGE}>
       { !welcomeClosed ?
         ( <WelcomePage
             t={t}
@@ -381,10 +383,10 @@ export default function App(initialData) {
             <Header
               t={t}
               settings={settings}
-              hasNewReport={hasNewReport}
+              modalActive={modalActive}
               navigation={navigation}
-              syncComplete={syncComplete}
               handleNavigation={handleNavigation}
+              syncComplete={syncComplete}
              />
 
             <main role="main" id="main-content">
@@ -416,6 +418,7 @@ export default function App(initialData) {
                   sessionIssues={sessionIssues}
                   updateSessionIssue={updateSessionIssue}
                   processServerError={processServerError}
+                  setModalActive={setModalActive}
                 />
               }
               {('reviewFiles' === navigation) &&
@@ -432,6 +435,7 @@ export default function App(initialData) {
                   sessionFiles={sessionFiles}
                   updateSessionFiles={updateSessionFiles}
                   processServerError={processServerError}
+                  setModalActive={setModalActive}
                 />
               }
               {('reports' === navigation) &&

assets/js/Components/FixIssuesPage.js

@@ -7,7 +7,7 @@ import FixIssuesContentPreview from './Widgets/FixIssuesContentPreview'
 import LeftArrowIcon from './Icons/LeftArrowIcon'
 import RightArrowIcon from './Icons/RightArrowIcon'
 import CloseIcon from './Icons/CloseIcon'
-import { FORM_CLASSIFICATIONS, formFromIssue, formNameFromRule, formNames } from '../Services/Ufixit'
+import { formNameFromRule } from '../Services/Ufixit'
 import * as Html from '../Services/Html'
 import Api from '../Services/Api'
 
@@ -34,14 +34,14 @@ export default function FixIssuesPage({
   initialSeverity = '',
   initialSearchTerm = '',
   contentItemCache,
-  addContentItemToCache,
   report,
   sections,
   processNewReport,
   addMessage,
   sessionIssues,
   updateSessionIssue,
-  processServerError
+  processServerError,
+  setModalActive
 })
 {
 
@@ -66,9 +66,10 @@ export default function FixIssuesPage({
 
   const WIDGET_STATE = settings.WIDGET_STATE
 
-  const dialogId = "issue-dialog"
+  const dialogId = "udoit-issue-dialog"
 
   const [activeIssue, setActiveIssue] = useState(null)
+  const [mostRecentIssueId, setMostRecentIssueId] = useState(null)
   const [tempActiveIssue, setTempActiveIssue] = useState(null)
   const [activeContentItem, setActiveContentItem] = useState(null)
   const [tempActiveContentItem, setTempActiveContentItem] = useState(null)
@@ -250,6 +251,39 @@ export default function FixIssuesPage({
     }
   }, [])
 
+  const handleEscapeKey = (e) => {
+    if(e.key === 'Escape' && widgetState === WIDGET_STATE.FIXIT) {
+      e.preventDefault()
+      closeDialog()
+    }
+  }
+
+  // Pull focus into the dialog when it opens, and return focus to the most recently clicked issue when it closes
+  useEffect(() => {
+    if(widgetState === WIDGET_STATE.FIXIT) {
+      const dialog = document.getElementById(dialogId)
+      if (dialog) {
+        dialog.addEventListener('keydown', handleEscapeKey)
+        const title = dialog.querySelector('#ufixit-dialog-title')
+        if(title) {
+          title.focus()
+        }
+      }
+    }
+    else if(widgetState === WIDGET_STATE.LIST) {
+      if(mostRecentIssueId) {
+        const issueElement = document.getElementById(`issue-item-${mostRecentIssueId}`)
+        if(issueElement) {
+          issueElement.focus() 
+        }
+        const dialog = document.getElementById(dialogId)
+        if (dialog) {
+          dialog.removeEventListener('keydown', handleEscapeKey)
+        }
+      }
+    }
+  }, [widgetState])
+
   // When the filters or search term changes, update the filtered issues list
   useEffect(() => {
 
@@ -350,9 +384,14 @@ export default function FixIssuesPage({
       return
     }
 
-    setWidgetState(settings.WIDGET_STATE.FIXIT)
-    const activeIssueClone = JSON.parse(JSON.stringify(activeIssue))
+    setMostRecentIssueId(activeIssue.id)
+    
+    // We ONLY want this to trigger events on a real change.
+    if(widgetState !== WIDGET_STATE.FIXIT) {
+      openDialog()
+    }
 
+    const activeIssueClone = JSON.parse(JSON.stringify(activeIssue))
     activeIssueClone.issueData.initialHtml = Html.getIssueHtml(activeIssueClone.issueData)
     setTempActiveIssue(activeIssueClone)
 
@@ -365,7 +404,6 @@ export default function FixIssuesPage({
       setActiveContentItem(null)
     }
     setShowLearnMore(false)
-    openDialog()
 
   }, [activeIssue])
 
@@ -824,34 +862,24 @@ export default function FixIssuesPage({
 
   const openDialog = () => {
     setWidgetState(WIDGET_STATE.FIXIT)
-
-    const dialog = document.getElementById(dialogId)
-    if(dialog && !dialog.open) {
-      dialog.showModal()
-
-      const title = dialog.querySelector('#dialog-title')
-      if(title) {
-        title.focus()
-      }
-    }
+    setModalActive(true)
   }
 
   const closeDialog = () => {
     setWidgetState(WIDGET_STATE.LIST)
+    setModalActive(false)
     setActiveIssue(null)
-
-    const dialog = document.getElementById(dialogId)
-    if(dialog) {
-      dialog.close()
-    }
   }
 
   return (
     <>
       { widgetState === settings.WIDGET_STATE.LOADING ? (
         <></>
       ) : (
-        <>
+        <div
+          inert={widgetState === WIDGET_STATE.FIXIT ? "inert" : undefined}
+          aria-hidden={widgetState === WIDGET_STATE.FIXIT}
+          >
           <h1 className="pageTitle">{t('barriers.title')}</h1>
           <p className="pageSubtitle">{t('barriers.subtitle')}</p>
 
@@ -873,12 +901,19 @@ export default function FixIssuesPage({
             groupedList={groupedList}
             setActiveIssue={setActiveIssue}
           />
-        </>
+        </div>
       ) }
-      <dialog id={dialogId} className="dialog-full-screen" onClose={closeDialog} aria-labelledby="dialog-title">
+      <div
+        id={dialogId}
+        role="dialog"
+        aria-modal="true"
+        className={`dialog-full-screen ${widgetState === WIDGET_STATE.FIXIT ? 'open' : 'hidden'}`}
+        onClose={closeDialog}
+        aria-labelledby="ufixit-dialog-title"
+        >
         <div className="flex-column h-100">
           <div className="dialog-header">
-            <h2 id="dialog-title" tabIndex="-1">{tempActiveIssue?.formLabel}</h2>
+            <h2 id="ufixit-dialog-title" tabIndex="-1">{tempActiveIssue?.formLabel}</h2>
             <CloseIcon
               onClick={closeDialog}
               onKeyDown={(e) => {
@@ -984,7 +1019,7 @@ export default function FixIssuesPage({
             </div>
           </div>
         </div>
-      </dialog>
+      </div>
     </>
   )
 }

assets/js/Components/Header.js

@@ -13,6 +13,7 @@ import './Header.css'
 export default function Header({
   t,
   settings,
+  modalActive,
   navigation,
   handleNavigation,
   syncComplete
@@ -76,7 +77,7 @@ export default function Header({
 
   /* CSS-Only Responsive Mobile menu based on: https://blog.logrocket.com/create-responsive-mobile-menu-css-without-javascript/ */
   return (
-    <header role="banner">
+    <header role="banner" inert={modalActive ? "inert" : undefined} aria-hidden={!modalActive}>
       <a className="skip-link" href="#main-content">{t('menu.nav.skip_to_main')}</a>
       <img alt={t('alt.UDOIT')} src={settings?.user?.roles?.dark_mode ? UDOITLogoDark : UDOITLogo}></img>
       <input