From 7018459185c67326038ced2cf1f501b32e7ed00b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 7 Feb 2026 01:53:13 +0000
Subject: [PATCH] feat: add accessible Skip to Content link

- Add SkipLink component with off-screen styling
- Add translation keys for skip link text
- Integrate SkipLink in App.tsx and wrap content in #main-content
- Add unit tests for SkipLink

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 src/App.tsx                                   | 19 ++++++-----
 src/components/ui/SkipLink.module.css         | 22 ++++++++++++
 src/components/ui/SkipLink.tsx                | 12 +++++++
 src/components/ui/__tests__/SkipLink.test.tsx | 34 +++++++++++++++++++
 src/components/ui/index.ts                    |  1 +
 src/i18n/de.ts                                |  1 +
 src/i18n/en.ts                                |  1 +
 7 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/SkipLink.module.css
 create mode 100644 src/components/ui/SkipLink.tsx
 create mode 100644 src/components/ui/__tests__/SkipLink.test.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5c4e796..841ed0c 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,17 +15,20 @@ export function App() {
   return (
     <LanguageProvider>
       <BrowserRouter>
+        <SkipLink />
         <ScrollToTop />
         <FancyCursor />
         <Navbar />
         {/* Suspense handles the loading state for lazy-loaded routes */}
-        <Suspense fallback={<PageLoader />}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact />} />
-          </Routes>
-        </Suspense>
+        <div id="main-content" tabIndex={-1} style={{ outline: 'none' }}>
+          <Suspense fallback={<PageLoader />}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/contact" element={<Contact />} />
+            </Routes>
+          </Suspense>
+        </div>
         <Footer />
       </BrowserRouter>
     </LanguageProvider>
diff --git a/src/components/ui/SkipLink.module.css b/src/components/ui/SkipLink.module.css
new file mode 100644
index 0000000..ed2c55b
--- /dev/null
+++ b/src/components/ui/SkipLink.module.css
@@ -0,0 +1,22 @@
+.skipLink {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--md-sys-color-primary, #ffffff);
+  color: var(--md-sys-color-on-primary, #000000);
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-100%);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--md-sys-color-primary, #ffffff);
+}
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/__tests__/SkipLink.test.tsx b/src/components/ui/__tests__/SkipLink.test.tsx
new file mode 100644
index 0000000..969cf9c
--- /dev/null
+++ b/src/components/ui/__tests__/SkipLink.test.tsx
@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { SkipLink } from '../SkipLink';
+
+// Mock i18n
+vi.mock('../../../i18n', () => ({
+  useTranslation: () => ({
+    t: {
+      nav: {
+        skipToContent: 'Skip to content',
+      },
+    },
+  }),
+}));
+
+describe('SkipLink', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a link with correct href and text', () => {
+    render(<SkipLink />);
+    const link = screen.getByRole('link', { name: /skip to content/i });
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toBe('#main-content');
+  });
+
+  it('has class attribute for styling', () => {
+    render(<SkipLink />);
+    const link = screen.getByRole('link');
+    expect(link.getAttribute('class')).toBeTruthy();
+  });
+});
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..6e3b346 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -4,6 +4,7 @@ export const de = {
     home: 'Startseite',
     about: 'Über uns',
     contact: 'Kontakt',
+    skipToContent: 'Zum Inhalt springen',
   },
   
   // Hero Section
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 20c8a34..fc27f1c 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -6,6 +6,7 @@ export const en: Translations = {
     home: 'Home',
     about: 'About',
     contact: 'Contact',
+    skipToContent: 'Skip to content',
   },
   
   // Hero Section
-- 
2.49.1