feat(v2): add skip to content link (#3640)

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

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
+import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
@@ -17,12 +18,17 @@ import './styles.css';
 
 function Layout(props: Props): JSX.Element {
   const {children, noFooter, wrapperClassName} = props;
+
   return (
     <LayoutProviders>
       <LayoutHead {...props} />
 
+      <SkipToContent />
+
       <AnnouncementBar />
+
       <Navbar />
+
       <div className={clsx('main-wrapper', wrapperClassName)}>{children}</div>
 
       {!noFooter && <Footer />}

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

@@ -0,0 +1,38 @@
+/**
+ * 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 React from 'react';
+
+import styles from './styles.module.css';
+
+function SkipToContent(): JSX.Element {
+  const handleSkip = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.keyCode !== 13) {
+      return;
+    }
+
+    (document.activeElement as HTMLElement).blur();
+
+    const firstMainElement = document.querySelector('main:first-of-type');
+
+    if (firstMainElement) {
+      firstMainElement.scrollIntoView();
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      tabIndex={0}
+      className={styles.skipToContent}
+      onKeyDown={handleSkip}>
+      Skip to main content
+    </button>
+  );
+}
+
+export default SkipToContent;

packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css

@@ -0,0 +1,16 @@
+.skipToContent {
+  position: fixed;
+  top: 1rem;
+  left: 100%;
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
+  color: var(--ifm-color-emphasis-900);
+  background-color: var(--ifm-background-surface-color);
+  border-radius: var(--ifm-global-radius);
+  font: inherit;
+  border: none;
+}
+
+.skipToContent:focus {
+  left: 1rem;
+}