From ef6238d2d68e37b2abc7171989060d5c85634ee9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 01:59:43 +0000
Subject: [PATCH] feat(a11y): add Skip to Main Content link

- Added `SkipLink` component to `src/components/ui/SkipLink.tsx`
- Added translation keys to `src/i18n`
- Added `<SkipLink />` to `App.tsx`
- Added `id="main-content"` and `tabIndex={-1}` to page main containers
- Verified accessibility via Playwright test

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 src/App.tsx                           |  3 ++-
 src/components/ui/SkipLink.module.css | 26 ++++++++++++++++++++++++++
 src/components/ui/SkipLink.tsx        | 12 ++++++++++++
 src/components/ui/index.ts            |  1 +
 src/i18n/de.ts                        |  1 +
 src/i18n/en.ts                        |  1 +
 src/pages/About.tsx                   |  2 +-
 src/pages/Contact.tsx                 |  2 +-
 src/pages/Home.tsx                    |  2 +-
 9 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ui/SkipLink.module.css
 create mode 100644 src/components/ui/SkipLink.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5c4e796..41f5efc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { LanguageProvider } from './i18n';
 import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout';
 import { Home } from './pages/Home';
-import { PageLoader } from './components/ui';
+import { PageLoader, SkipLink } from './components/ui';
 import './styles/global.css';
 
 // Lazy load pages to reduce initial bundle size.
@@ -15,6 +15,7 @@ export function App() {
   return (
     <LanguageProvider>
       <BrowserRouter>
+        <SkipLink />
         <ScrollToTop />
         <FancyCursor />
         <Navbar />
diff --git a/src/components/ui/SkipLink.module.css b/src/components/ui/SkipLink.module.css
new file mode 100644
index 0000000..c29f5d5
--- /dev/null
+++ b/src/components/ui/SkipLink.module.css
@@ -0,0 +1,26 @@
+.skipLink {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  z-index: 1000;
+  transform: translateY(-100%) translateX(-50%);
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+  font-family: var(--md-sys-typescale-body-font);
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  transition: transform var(--transition-fast);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.skipLink:focus {
+  transform: translateY(0) translateX(-50%);
+  opacity: 1;
+  pointer-events: auto;
+  outline: 2px solid var(--md-sys-color-primary);
+  outline-offset: 2px;
+}
diff --git a/src/components/ui/SkipLink.tsx b/src/components/ui/SkipLink.tsx
new file mode 100644
index 0000000..7e1dcdc
--- /dev/null
+++ b/src/components/ui/SkipLink.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from '../../i18n';
+import styles from './SkipLink.module.css';
+
+export function SkipLink() {
+  const { t } = useTranslation();
+
+  return (
+    <a href="#main-content" className={styles.skipLink}>
+      {t.nav.skipToContent}
+    </a>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 78cc7f9..f857f96 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -2,3 +2,4 @@ export { Button } from './Button';
 export { Card } from './Card';
 export { Input, Textarea } from './Input';
 export { PageLoader } from './PageLoader';
+export { SkipLink } from './SkipLink';
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index 0b42d51..31c95a4 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -1,6 +1,7 @@
 export const de = {
   // Navigation
   nav: {
+    skipToContent: 'Zum Hauptinhalt springen',
     home: 'Startseite',
     about: 'Über uns',
     contact: 'Kontakt',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 20c8a34..327ed2b 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -3,6 +3,7 @@ import type { Translations } from './de';
 export const en: Translations = {
   // Navigation
   nav: {
+    skipToContent: 'Skip to main content',
     home: 'Home',
     about: 'About',
     contact: 'Contact',
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 928e421..5f63682 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -46,7 +46,7 @@ export function About() {
   const location = useLocation();
 
   return (
-    <main className={styles.about} key={location.key}>
+    <main id="main-content" tabIndex={-1} className={styles.about} key={location.key}>
       {/* Hero Section */}
       <section className={styles.hero}>
         <div className="container">
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 6332455..0c2b5ff 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -133,7 +133,7 @@ export function Contact() {
   };
 
   return (
-    <main className={styles.contact}>
+    <main id="main-content" tabIndex={-1} className={styles.contact}>
       {/* Hero */}
       <section className={styles.hero}>
         <div className="container">
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 9273d84..afde845 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,7 +2,7 @@ import { Hero, Services } from '../components/sections';
 
 export function Home() {
   return (
-    <main>
+    <main id="main-content" tabIndex={-1}>
       <Hero />
       <Services />
     </main>