From 5d46e700d90f40236c7f47516a83eb740b237e27 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 29 Jul 2024 11:12:14 -0500
Subject: [PATCH] Focus after content is rendered

---
 src/app/components/MainContent.tsx            | 38 +++++++++++++++----
 .../content/components/Page/PageComponent.tsx |  3 ++
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/app/components/MainContent.tsx b/src/app/components/MainContent.tsx
index 556a0c9544..90484a3f15 100644
--- a/src/app/components/MainContent.tsx
+++ b/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>
 );
diff --git a/src/app/content/components/Page/PageComponent.tsx b/src/app/content/components/Page/PageComponent.tsx
index da426581ff..d127fd116e 100644
--- a/src/app/content/components/Page/PageComponent.tsx
+++ b/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>;