add accessible skip-to-content link

components/Layout/Layout.tsx

@@ -34,6 +34,35 @@ const FlexedFooter = styled(Footer, {
   flex: 1,
 });
 
+const SkipNavLink = styled("a", {
+  // accessible invisibility stuff pulled from @reach/skip-nav:
+  // https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  width: "1px",
+  margin: "-1px",
+  padding: 0,
+  overflow: "hidden",
+  position: "absolute",
+
+  "&:focus": {
+    padding: "1rem",
+    position: "fixed",
+    top: "10px",
+    left: "10px",
+    zIndex: 99999,
+    width: "auto",
+    height: "auto",
+    clip: "auto",
+    background: "$superDuperLight",
+    color: "$link",
+    border: "2px solid $kindaLight",
+    borderRadius: "$rounded",
+    textDecoration: "underline",
+  },
+});
+
 export type LayoutProps = ComponentProps<typeof Flex> & {
   container?: boolean; // pass false to disable default `<main>` container styles with padding, etc.
 };
@@ -48,16 +77,26 @@ const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
         <meta name="theme-color" content={themeColors[activeTheme === "dark" ? "dark" : "light"]} />
       </Head>
 
+      <SkipNavLink href="#skip-nav" role="link" tabIndex={0}>
+        Skip to content
+      </SkipNavLink>
+
       <Flex {...rest}>
         <StickyHeader />
 
         {/* passing `container={false}` to Layout allows 100% control of the content area on a per-page basis */}
         {container ? (
           <Default>
-            <Container>{children}</Container>
+            <Container>
+              <div id="skip-nav" />
+              {children}
+            </Container>
           </Default>
         ) : (
-          <>{children}</>
+          <>
+            <div id="skip-nav" />
+            {children}
+          </>
         )}
 
         <FlexedFooter />