feat(docs): add VisuallyHidden 'Jump to content' elem

washingtonpost · Sep 2, 2022 · b347d9c · b347d9c
1 parent aed89ae
commit b347d9c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/build.washingtonpost.com/components/Layout/Layout.js b/build.washingtonpost.com/components/Layout/Layout.js
@@ -73,7 +73,7 @@ export const PageLayout = ({ children, ...pageProps }) => {
           navigation={pageProps.navigation}
         />
       </DesktopMenu>
-      <Container>
+      <Container id="main">
         {children}
         <ToastContainer
           role="alert"

diff --git a/build.washingtonpost.com/components/NavigationBar.js b/build.washingtonpost.com/components/NavigationBar.js
@@ -4,7 +4,14 @@ import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Box, Icon, styled, Button } from "@washingtonpost/wpds-ui-kit";
+import {
+  Box,
+  Icon,
+  styled,
+  Button,
+  VisuallyHidden,
+  theme,
+} from "@washingtonpost/wpds-ui-kit";
 import Menu from "@washingtonpost/wpds-assets/asset/menu";
 import Close from "@washingtonpost/wpds-assets/asset/close";
 
@@ -126,6 +133,22 @@ export const NavigationBar = ({ setMobileMenu, mobileMenuState, isClosed }) => {
   return (
     <>
       <Container>
+        <VisuallyHidden
+          as="a"
+          href="#main"
+          css={{
+            color: theme.colors.cta,
+            left: "$050",
+            "&:active": {
+              position: "relative",
+            },
+            "&:focus": {
+              position: "relative",
+            },
+          }}
+        >
+          Jump to content
+        </VisuallyHidden>
         <Logo css={{ width: "100%" }} />
         <Box
           css={{