Add skip to content button

src/components/Layout.module.scss

@@ -12,3 +12,26 @@
     }
   }
 }
+
+.skip-to-main {
+  position: absolute;
+  z-index: 999999;
+  height: 4.8rem;
+  border-radius: 0.6rem;
+  background-color: var(--color-surface1);
+  margin: 0.4rem;
+  padding-inline: 2rem;
+  opacity: 0;
+  pointer-events: none;
+  cursor: pointer;
+
+  &:focus {
+    opacity: 1;
+    pointer-events: all;
+    outline: 2px solid black;
+  }
+
+  @include lg {
+    margin: 0.8rem;
+  }
+}

src/components/Layout.tsx

@@ -4,12 +4,26 @@ import Header from './Header'
 import styles from './Layout.module.scss'
 
 const Layout: ParentComponent = (props) => {
+  let ref: HTMLElement | undefined
+
+  const skipNav = () => {
+    console.log('skip nav', ref)
+    ref?.focus()
+  }
+
   return (
-    <div class={styles.layout}>
-      <Header />
-      <main class={styles.main}>{props.children}</main>
-      <Footer />
-    </div>
+    <>
+      <button onClick={skipNav} class={styles.skipToMain} aria-label="Navigáció átugrása">
+        <span>Navigáció átugrása</span>
+      </button>
+      <div class={styles.layout}>
+        <Header />
+        <main ref={ref} tabindex="-1" class={styles.main}>
+          {props.children}
+        </main>
+        <Footer />
+      </div>
+    </>
   )
 }
 

src/scss/global.scss

@@ -41,6 +41,8 @@ body {
   --text-family-content: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
   --text-family-content-heading: var(--text-family-content);
 
+  --color-surface1: var(--color-gray100);
+
   --page-width: 1200px;
   --page-padding: 1rem;