From 98d8d6ea49dd941bf179a7ad904c01186a5af00f Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 12 Apr 2024 09:18:43 -0500
Subject: [PATCH] Focus on main when content changes

[DISCO-198]
---
 src/app/components/MainContent.tsx            | 42 ++++++++++++-------
 .../Page/scrollToTopOrHashManager.ts          |  3 +-
 src/app/utils.ts                              |  9 ----
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/app/components/MainContent.tsx b/src/app/components/MainContent.tsx
index 556a0c9544..122f51866b 100644
--- a/src/app/components/MainContent.tsx
+++ b/src/app/components/MainContent.tsx
@@ -31,22 +31,36 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
 
 // tslint:disable-next-line:variable-name
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
-  ({book, children, className, ...props}, ref) => <Consumer>
-    {({registerMainContent}) => <main
-      ref={mergeRefs(ref, registerMainContent)}
-      className={className}
-      tabIndex={-1}
-    >
-      <ContentStyles
-        id={MAIN_CONTENT_ID}
-        book={book}
+  ({book, children, className, ...props}, ref) => {
+    const initialLoad = React.useRef(true);
+
+    React.useEffect(
+      () => {
+        if (initialLoad.current) {
+          initialLoad.current = false;
+        } else {
+          (ref as React.MutableRefObject<HTMLDivElement>).current?.focus();
+        }
+      },
+      [children, ref]
+    );
+    return (<Consumer>
+      {({registerMainContent}) => <main
+        ref={mergeRefs(ref, registerMainContent)}
+        className={className}
         tabIndex={-1}
-        {...props}
       >
-        {children}
-      </ContentStyles>
-    </main>}
-  </Consumer>
+        <ContentStyles
+          id={MAIN_CONTENT_ID}
+          book={book}
+          tabIndex={-1}
+          {...props}
+        >
+          {children}
+        </ContentStyles>
+      </main>}
+    </Consumer>);
+  }
 );
 
 export default MainContent;
diff --git a/src/app/content/components/Page/scrollToTopOrHashManager.ts b/src/app/content/components/Page/scrollToTopOrHashManager.ts
index b44a85bca1..201d1d2425 100644
--- a/src/app/content/components/Page/scrollToTopOrHashManager.ts
+++ b/src/app/content/components/Page/scrollToTopOrHashManager.ts
@@ -2,7 +2,7 @@ import { HTMLElement } from '@openstax/types/lib.dom';
 import { scrollTo } from '../../../domUtils';
 import * as selectNavigation from '../../../navigation/selectors';
 import { AppState } from '../../../types';
-import { assertWindow, memoizeStateToProps, resetTabIndex } from '../../../utils';
+import { assertWindow, memoizeStateToProps } from '../../../utils';
 import { isSearchScrollTarget } from '../../search/guards';
 import { selectedResult } from '../../search/selectors';
 import * as select from '../../selectors';
@@ -36,7 +36,6 @@ const scrollToTargetOrTop = (container: HTMLElement | null, hash: string) => {
 
 const scrollToTop = () => {
   const window = assertWindow();
-  resetTabIndex(window.document);
   window.scrollTo(0, 0);
 };
 
diff --git a/src/app/utils.ts b/src/app/utils.ts
index 897b412140..a4aed62c33 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -1,4 +1,3 @@
-import { Document } from '@openstax/types/lib.dom';
 import React, { Ref } from 'react';
 import { getType } from 'typesafe-actions';
 import { ApplicationError, ToastMesssageError } from '../helpers/applicationMessageError';
@@ -123,14 +122,6 @@ export const getAllRegexMatches = (regex: RegExp) => {
   };
 };
 
-export const resetTabIndex = (document: Document) => {
-  const index = document.body.tabIndex;
-  document.body.tabIndex = 0;
-
-  document.body.focus();
-  document.body.tabIndex = index;
-};
-
 export const preventDefault = (event: React.MouseEvent) => {
   event.preventDefault();
   return event;