refactor: extract useSkipToContent() (#7269)

packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx

@@ -5,40 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useRef} from 'react';
+import React from 'react';
-import {useHistory} from '@docusaurus/router';
 import Translate from '@docusaurus/Translate';
-import {useLocationChange} from '@docusaurus/theme-common';
+import {useSkipToContent} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
-function programmaticFocus(el: HTMLElement) {
-  el.setAttribute('tabindex', '-1');
-  el.focus();
-  el.removeAttribute('tabindex');
-}
-
 export default function SkipToContent(): JSX.Element {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const {containerRef, handleSkip} = useSkipToContent();
-  const {action} = useHistory();
-  const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-
-    const targetElement: HTMLElement | null =
-      document.querySelector('main:first-of-type') ||
-      document.querySelector('.main-wrapper');
-
-    if (targetElement) {
-      programmaticFocus(targetElement);
-    }
-  };
-
-  useLocationChange(({location}) => {
-    if (containerRef.current && !location.hash && action === 'PUSH') {
-      programmaticFocus(containerRef.current);
-    }
-  });
-
   return (
     <div ref={containerRef} role="region">
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}

packages/docusaurus-theme-common/src/index.ts

@@ -57,6 +57,8 @@ export {
   useLayoutDocsSidebar,
 } from './utils/docsUtils';
 
+export {useSkipToContent} from './utils/a11yUtils';
+
 export {useTitleFormatter} from './utils/generalUtils';
 
 export {usePluralForm} from './utils/usePluralForm';

packages/docusaurus-theme-common/src/utils/a11yUtils.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type React from 'react';
+import {useCallback, useRef} from 'react';
+import {useHistory} from '@docusaurus/router';
+import {useLocationChange} from './useLocationChange';
+import {ThemeClassNames} from './ThemeClassNames';
+
+function programmaticFocus(el: HTMLElement) {
+  el.setAttribute('tabindex', '-1');
+  el.focus();
+  el.removeAttribute('tabindex');
+}
+
+export function useSkipToContent(): {
+  containerRef: React.RefObject<HTMLDivElement>;
+  handleSkip: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+} {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const {action} = useHistory();
+  const handleSkip = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+
+    const targetElement: HTMLElement | null =
+      document.querySelector('main:first-of-type') ||
+      document.querySelector(`.${ThemeClassNames.wrapper.main}`);
+
+    if (targetElement) {
+      programmaticFocus(targetElement);
+    }
+  }, []);
+
+  useLocationChange(({location}) => {
+    if (containerRef.current && !location.hash && action === 'PUSH') {
+      programmaticFocus(containerRef.current);
+    }
+  });
+
+  return {containerRef, handleSkip};
+}