Focus after content is rendered

src/app/components/MainContent.tsx

@@ -6,13 +6,15 @@ import { State } from '../content/types';
 import { MAIN_CONTENT_ID } from '../context/constants';
 import { Consumer } from '../context/SkipToContent';
 import { mergeRefs } from '../utils';
+import { assertWindow } from '../utils';
 import DynamicContentStyles from './DynamicContentStyles';
 
 interface Props {
   book: State['book'];
   className?: string;
   dangerouslySetInnerHTML?: { __html: string; };
   textSize?: TextResizerValue;
+  doFocus?: boolean;
 }
 // tslint:disable-next-line:variable-name
 const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {...props} />)`
@@ -29,6 +31,35 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
   }
 `;
 
+function InnerContent({
+  book,
+  children,
+  doFocus,
+  ...props
+}: React.PropsWithChildren<Omit<Props, 'className'>>) {
+  const window = assertWindow();
+
+  React.useEffect(
+    () => {
+      if (doFocus) {
+        window.document.querySelector('main')?.focus();
+      }
+    },
+    [doFocus, window]
+  );
+
+  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 +68,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();
@@ -97,8 +99,6 @@ export default class PageComponent extends Component<PagePropTypes> {
     // Wait for the mathjax promise set by postProcess from previous or current componentDidUpdate call.
     await Promise.all(this.processing);
 
-    this.scrollToTopOrHashManager(prevProps.scrollToTopOrHash, this.props.scrollToTopOrHash);
-
     const searchHighlightsChanged = !isEqual(
       prevProps.searchHighlights.searchResults,
       this.props.searchHighlights.searchResults
@@ -123,6 +123,7 @@ export default class PageComponent extends Component<PagePropTypes> {
     });
 
     lazyResources.checkLazyResources();
+    this.scrollToTopOrHashManager(prevProps.scrollToTopOrHash, this.props.scrollToTopOrHash);
   }
 
   public onHighlightSelect: HighlightUpdateOptions['onSelect'] = (selectedHighlight) => {
@@ -171,6 +172,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>;

src/app/content/components/Page/scrollToTopOrHashManager.ts

@@ -36,9 +36,7 @@ const scrollToTargetOrTop = (container: HTMLElement | null, hash: string, previo
 
 const scrollToTop = () => {
   const window = assertWindow();
-  const document = window.document;
 
-  document.querySelector('main')?.focus();
   window.scrollTo(0, 0);
 };