.Jules/palette.md

@@ -9,3 +9,7 @@
 ## 2024-05-24 - Enhancing Inputs Safely
 **Learning:** Adding features like character counters to generic input components must handle both controlled and uncontrolled states. Assuming a component is controlled (using `props.value`) can break uncontrolled usage by showing stale data (e.g., sticking at 0/100).
 **Action:** When enhancing generic components, detect uncontrolled state (e.g., `props.value === undefined`) and either implement internal state tracking or gracefully degrade (hide the feature) to avoid misleading UX.
+
+## 2025-02-23 - Robust Skip Links
+**Learning:** For "Skip to Content" links to work reliably with SPA routers and all browsers, the target element needs `tabIndex={-1}` to be programmatically focusable. Using `transform: translateY(-100%)` for hiding is performant but requires `z-index` management to ensure visibility on focus.
+**Action:** Always add `id="main-content"`, `tabIndex={-1}`, and `outline: 'none'` (to prevent focus ring on container) to the target `<main>` element when implementing skip links.

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 />

src/components/ui/SkipLink.module.css

@@ -0,0 +1,20 @@
+.skipLink {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+  text-align: center;
+  text-decoration: none;
+  font-weight: 500;
+  z-index: 9999;
+  transform: translateY(-100%);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+}

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>
+  );
+}

src/components/ui/__tests__/SkipLink.test.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { SkipLink } from '../SkipLink';
+
+// Mock translations using deep relative path
+vi.mock('../../../i18n', () => ({
+  useTranslation: () => ({
+    t: {
+      nav: {
+        skipToContent: 'Skip to content',
+      },
+    },
+  }),
+}));
+
+describe('SkipLink', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders skip 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');
+  });
+});

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';

src/i18n/de.ts

@@ -1,6 +1,7 @@
 export const de = {
   // Navigation
   nav: {
+    skipToContent: 'Zum Hauptinhalt springen',
     home: 'Startseite',
     about: 'Über uns',
     contact: 'Kontakt',

src/i18n/en.ts

@@ -3,6 +3,7 @@ import type { Translations } from './de';
 export const en: Translations = {
   // Navigation
   nav: {
+    skipToContent: 'Skip to content',
     home: 'Home',
     about: 'About',
     contact: 'Contact',

src/pages/About.tsx

@@ -46,7 +46,13 @@ export function About() {
   const location = useLocation();
 
   return (
-    <main className={styles.about} key={location.key}>
+    <main
+      id="main-content"
+      tabIndex={-1}
+      style={{ outline: 'none' }}
+      className={styles.about}
+      key={location.key}
+    >
       {/* Hero Section */}
       <section className={styles.hero}>
         <div className="container">

src/pages/Contact.tsx

@@ -133,7 +133,12 @@ export function Contact() {
   };
 
   return (
-    <main className={styles.contact}>
+    <main
+      id="main-content"
+      tabIndex={-1}
+      style={{ outline: 'none' }}
+      className={styles.contact}
+    >
       {/* Hero */}
       <section className={styles.hero}>
         <div className="container">

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} style={{ outline: 'none' }}>
       <Hero />
       <Services />
     </main>