From a64a34f0778291d7cd72f2eb55ae320f5d718bd2 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Mon, 26 Oct 2020 17:15:50 +0300
Subject: [PATCH] feat(v2): add skip to content link (#3640)

---
 .../src/theme/Layout/index.tsx                |  6 +++
 .../src/theme/SkipToContent/index.tsx         | 38 +++++++++++++++++++
 .../src/theme/SkipToContent/styles.module.css | 16 ++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index 108f03e47d..1af3915bfa 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/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 />}
diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx
new file mode 100644
index 0000000000..027daee5a8
--- /dev/null
+++ b/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;
diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css b/packages/docusaurus-theme-classic/src/theme/SkipToContent/styles.module.css
new file mode 100644
index 0000000000..916f6e54ac
--- /dev/null
+++ b/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;
+}