Keyboard Accessibility Fix: "Skip to content" link for documentation pages. (#480)

* 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.

* Linting

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",

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,15 @@ 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}

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}

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}
           />