Focus on main when content changes

[DISCO-198]

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;

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);
 };
 

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;