Focus after content is rendered

src/app/components/MainContent.tsx

@@ -13,6 +13,7 @@ interface Props {
   className?: string;
   dangerouslySetInnerHTML?: { __html: string; };
   textSize?: TextResizerValue;
+  doFocus?: boolean;
 }
 // tslint:disable-next-line:variable-name
 const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {...props} />)`
@@ -29,6 +30,34 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
   }
 `;
 
+function InnerContent({
+  book,
+  children,
+  doFocus,
+  ...props
+}: React.PropsWithChildren<Omit<Props, 'className'>>) {
+  React.useEffect(
+    () => {
+      if (window && doFocus) {
+        window.document.querySelector('main')?.focus();
+        window.scrollTo(0, 0);
+      }
+    },
+    [doFocus]
+  );
+
+  return (
+    <ContentStyles
+      id={MAIN_CONTENT_ID}
+      book={book}
+      tabIndex={-1}
+      {...props}
+    >
+      {children}
+    </ContentStyles>
+  );
+}
+
 // tslint:disable-next-line:variable-name
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
   ({book, children, className, ...props}, ref) => <Consumer>
@@ -37,14 +66,9 @@ const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Pro
       className={className}
       tabIndex={-1}
     >
-      <ContentStyles
-        id={MAIN_CONTENT_ID}
-        book={book}
-        tabIndex={-1}
-        {...props}
-      >
+      <InnerContent book={book} {...props}>
         {children}
-      </ContentStyles>
+      </InnerContent>
     </main>}
   </Consumer>
 );

src/app/content/components/Page/PageComponent.tsx

@@ -37,6 +37,7 @@ export default class PageComponent extends Component<PagePropTypes> {
   private scrollToTopOrHashManager = stubScrollToTopOrHashManager;
   private processing: Array<Promise<void>> = [];
   private componentDidUpdateCounter = 0;
+  private doFocus = false;
 
   public getTransformedContent = () => {
     const {book, page, services} = this.props;
@@ -89,6 +90,7 @@ export default class PageComponent extends Component<PagePropTypes> {
     // per rerender. componentDidUpdate is called multiple times when user navigates quickly.
     const runId = this.getRunId();
 
+    this.doFocus = true;
     // If page has changed, call postProcess that will remove old and attach new listerns and start mathjax typesetting.
     if (prevProps.page !== this.props.page) {
       this.postProcess();
@@ -171,6 +173,7 @@ export default class PageComponent extends Component<PagePropTypes> {
         ref={this.container}
         dangerouslySetInnerHTML={{ __html: html}}
         textSize={this.props.textSize}
+        doFocus={this.doFocus}
       />
       {this.props.children}
     </React.Fragment>;