From 93f9502a34ae2ff56b31d439fec7fcd31ca87bef Mon Sep 17 00:00:00 2001
From: Manish Kumar Gupta <manishkg@microsoft.com>
Date: Mon, 14 Oct 2024 21:04:10 -0700
Subject: [PATCH 1/2] As part of accessibility requirements, Users who rely on
 keyboard for navigation should have a way to bypass repetitive content while
 navigating with Tab key. The concept of 'Skip to main content' link is to
 click it to go directly to main content, instead of traversing across the
 entire side-bar, headers, table of contents etc.

---
 src/components/Header/styles.ts               | 12 ++++++++++++
 src/pages/Docs/Docs.index.tsx                 |  7 +++++++
 src/pages/Docs/components/DocsHtmlContent.tsx |  4 +++-
 src/pages/Docs/components/Topic.tsx           |  1 +
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 6fe64c6b..530cdd7d 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -35,6 +35,18 @@ export const logoImageStyle = mergeStyles({
   lineHeight: "1",
 });
 
+export const skipContentStyle = mergeStyles({
+  left: "50%",
+  position: "absolute",
+  transform: "translateY(-250%)",
+    padding: "8px",
+  transition: "transform 0.3s",
+
+  "&:focus": {
+    transform: "translateY(0%)",
+  },
+});
+
 export const headerPipeStyle = mergeStyles({
   marginTop: "0px !important",
   marginLeft: "7px !important",
diff --git a/src/pages/Docs/Docs.index.tsx b/src/pages/Docs/Docs.index.tsx
index 3df1922f..6311c60d 100644
--- a/src/pages/Docs/Docs.index.tsx
+++ b/src/pages/Docs/Docs.index.tsx
@@ -9,6 +9,7 @@ import DocsHtmlContent from "./components/DocsHtmlContent";
 import Topic from "./components/Topic";
 import { DATA_URL, SAS_URL, STAC_URL } from "../../utils/constants";
 import ScrollToTop from "../../components/ScrollToTop";
+import { skipContentStyle } from "components/Header/styles";
 
 const OpenApiSpec = React.lazy(() => import("./components/OpenApiSpec"));
 
@@ -59,6 +60,12 @@ const Docs = () => {
 
   const documentationPane = (
     <div className="grid-content" style={docPageStyle}>
+      <Link className={skipContentStyle} onClick={() => {
+        const urlWithoutHash = window.location.href.split('#')[0];
+        window.location.href = urlWithoutHash + "#generated-docs-content"
+      }} >
+        Skip to content
+      </Link>
       {tocComponent}
       <div style={docContentStyle}>
         {breadcrumb}
diff --git a/src/pages/Docs/components/DocsHtmlContent.tsx b/src/pages/Docs/components/DocsHtmlContent.tsx
index dbcf0735..5af1d929 100644
--- a/src/pages/Docs/components/DocsHtmlContent.tsx
+++ b/src/pages/Docs/components/DocsHtmlContent.tsx
@@ -9,12 +9,14 @@ import { a11yPostProcessDom } from "../../../utils";
 interface DocsHtmlContentProps {
   className: string;
   markupJson: any;
+  idText?: string;
 }
 
 const DocsHtmlContent: React.FC<DocsHtmlContentProps> = ({
   className,
   markupJson,
   children,
+  idText,
 }) => {
   const navigate = useNavigate();
   const contentRef = useRef<HTMLDivElement>(null);
@@ -114,7 +116,7 @@ const DocsHtmlContent: React.FC<DocsHtmlContentProps> = ({
     : DOMPurify.sanitize(bodyWithRoutedLinks);
 
   const content = processedMarkup ? (
-    <div className={className}>
+    <div className={className} id={idText}>
       {children}
       <div
         ref={contentRef}
diff --git a/src/pages/Docs/components/Topic.tsx b/src/pages/Docs/components/Topic.tsx
index d3036619..2c3dfb48 100644
--- a/src/pages/Docs/components/Topic.tsx
+++ b/src/pages/Docs/components/Topic.tsx
@@ -27,6 +27,7 @@ const Topic: React.FC<TopicProps> = ({ topics }) => {
       <>
         <div style={bodyStyle}>
           <DocsHtmlContent
+            idText="generated-docs-content"
             className="generated-docs markdown-source"
             markupJson={doc}
           />

From f4fd333685ccbc141624168d4302be5268abb462 Mon Sep 17 00:00:00 2001
From: Manish Kumar Gupta <manishkg@microsoft.com>
Date: Tue, 15 Oct 2024 08:45:07 -0700
Subject: [PATCH 2/2] Linting

---
 src/components/Header/styles.ts |  2 +-
 src/pages/Docs/Docs.index.tsx   | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 530cdd7d..9c9d4bf9 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -39,7 +39,7 @@ export const skipContentStyle = mergeStyles({
   left: "50%",
   position: "absolute",
   transform: "translateY(-250%)",
-    padding: "8px",
+  padding: "8px",
   transition: "transform 0.3s",
 
   "&:focus": {
diff --git a/src/pages/Docs/Docs.index.tsx b/src/pages/Docs/Docs.index.tsx
index 6311c60d..6faa53ec 100644
--- a/src/pages/Docs/Docs.index.tsx
+++ b/src/pages/Docs/Docs.index.tsx
@@ -60,10 +60,13 @@ const Docs = () => {
 
   const documentationPane = (
     <div className="grid-content" style={docPageStyle}>
-      <Link className={skipContentStyle} onClick={() => {
-        const urlWithoutHash = window.location.href.split('#')[0];
-        window.location.href = urlWithoutHash + "#generated-docs-content"
-      }} >
+      <Link
+        className={skipContentStyle}
+        onClick={() => {
+          const urlWithoutHash = window.location.href.split("#")[0];
+          window.location.href = urlWithoutHash + "#generated-docs-content";
+        }}
+      >
         Skip to content
       </Link>
       {tocComponent}