Restore reverted PR to branch

src/app/state/modalFocusMiddleware.ts

@@ -0,0 +1,29 @@
+import {Dispatch, Middleware, MiddlewareAPI} from "redux";
+import {ACTION_TYPE} from "../services/constants";
+
+let lastFocusedStack: Element[] = [];
+
+// When a modal is closed, this tries to focus the last element that was focused before it opened. If no element exists,
+// we try to focus the page title. This is for accessibility, mostly to help when navigating the site with a screen-reader.
+export const modalFocusMiddleware: Middleware = (api: MiddlewareAPI) => (next: Dispatch) => action => {
+    const state = api.getState();
+
+    switch (action.type) {
+        case ACTION_TYPE.ACTIVE_MODAL_OPEN:
+            // Before modal open, record the element that is currently focused
+            if (document.activeElement) lastFocusedStack.push(document.activeElement);
+            break;
+        case ACTION_TYPE.ACTIVE_MODAL_CLOSE: {
+            const lastFocusedElement = lastFocusedStack.pop() as HTMLElement;
+            // Before modal close, try to focus the last focused element, otherwise focus the main heading (if it exists)
+            if (lastFocusedElement && lastFocusedElement.isConnected && typeof lastFocusedElement.focus === "function") {
+                lastFocusedElement.focus();
+            } else {
+                lastFocusedStack = [];
+                document.getElementById(state?.mainContentId || "main")?.focus();
+            }
+        }
+    }
+
+    return next(action);
+};

src/app/state/store.tsx

@@ -4,13 +4,15 @@ import * as reduxLogger from "redux-logger";
 import {AppState, rootReducer} from "./reducers";
 import {userConsistencyCheckerMiddleware} from "./userConsistencyChecker";
 import {notificationCheckerMiddleware} from "../services/notificationManager";
+import {modalFocusMiddleware} from "./modalFocusMiddleware";
 
 // @ts-ignore
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export const middleware: Middleware[] = [
     userConsistencyCheckerMiddleware,
     notificationCheckerMiddleware,
+    modalFocusMiddleware,
     thunk,
 ];