feat(a11y): add accessible Skip to Content link

- Added `SkipLink` component that is visible on focus.
- Updated `App.tsx` to include `SkipLink` and wrap content in `<main id="main-content">`.
- Added translation keys for skip link in English and German.
- Added unit tests for `SkipLink`.

This improves accessibility for keyboard and screen reader users by allowing them to bypass the navigation menu.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>

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>
+        <main id="main-content" tabIndex={-1} style={{ flex: 1, outline: 'none' }}>
+          {/* 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>
+        </main>
         <Footer />
       </BrowserRouter>
     </LanguageProvider>

src/components/ui/SkipLink.module.css

@@ -0,0 +1,20 @@
+.skipLink {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 100;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform var(--transition-normal);
+  outline: none;
+  box-shadow: var(--md-sys-color-shadow) 0px 4px 8px 3px;
+}
+
+.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.skipLink}
+    </a>
+  );
+}

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

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { render, screen, cleanup } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { SkipLink } from '../SkipLink';
+import { LanguageProvider } from '../../../i18n';
+
+describe('SkipLink', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const renderWithProviders = (component: React.ReactNode) => {
+    return render(
+      <LanguageProvider>
+        {component}
+      </LanguageProvider>
+    );
+  };
+
+  it('renders correctly with correct href', () => {
+    renderWithProviders(<SkipLink />);
+    const link = screen.getByRole('link');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toBe('#main-content');
+  });
+
+  it('renders translated text', () => {
+    renderWithProviders(<SkipLink />);
+    const link = screen.getByRole('link');
+    const text = link.textContent;
+    expect(text === 'Zum Inhalt springen' || text === 'Skip to content').toBe(true);
+  });
+});

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,135 +1,118 @@
 export const de = {
   // Navigation
   nav: {
-    home: "Startseite",
-    about: "Über mich",
-    contact: "Kontakt",
+    skipLink: 'Zum Inhalt springen',
+    home: 'Startseite',
+    about: 'Über uns',
+    contact: 'Kontakt',
   },
-
+  
   // Hero Section
   hero: {
-    greeting: "Willkommen bei",
-    company: "Ragusa IT-Consulting",
-    tagline: "Websites, die",
-    rotatingWords: [
-      "Anfragen bringen",
-      "Kunden überzeugen",
-      "messbar performen",
-      "Ihr Business stärken",
-    ],
-    cta: "Kostenloses Erstgespräch",
-    ctaSecondary: "Warum Ragusa IT?",
-    scroll: "Scrollen",
+    greeting: 'Willkommen bei',
+    company: 'Ragusa IT-Consulting',
+    tagline: 'Ihr Partner für',
+    rotatingWords: ['Webentwicklung', 'IT-Support', 'Digitale Lösungen', 'Tech-Beratung'],
+    cta: 'Projekt starten',
+    ctaSecondary: 'Mehr erfahren',
+    scroll: 'Scrollen',
   },
-
+  
   // Services
   services: {
-    title: "Leistungen mit Ergebnisfokus",
-    subtitle:
-      "Konkrete IT-Lösungen, die Zeit sparen und neue Anfragen ermöglichen",
+    title: 'Unsere Leistungen',
+    subtitle: 'Professionelle IT-Lösungen für Ihr Unternehmen',
     items: [
       {
-        title: "Webentwicklung",
-        description:
-          "Conversion-orientierte Websites und Web-Apps, die Vertrauen schaffen und qualifizierte Leads generieren.",
-        icon: "code",
+        title: 'Webentwicklung',
+        description: 'Moderne, responsive Websites und Web-Applikationen mit React, TypeScript und aktuellen Technologien.',
+        icon: 'code',
       },
       {
-        title: "Tech-Support",
-        description:
-          "Schnelle Hilfe bei akuten Problemen, damit Ihr Betrieb ohne lange Ausfälle weiterläuft.",
-        icon: "support",
+        title: 'Tech-Support',
+        description: 'Schnelle und zuverlässige technische Unterstützung für Hardware und Software vor Ort.',
+        icon: 'support',
       },
       {
-        title: "IT-Beratung",
-        description:
-          "Praxisnahe Entscheidungen für Infrastruktur, Tools und Prozesse – passend zu Ihrem Budget.",
-        icon: "consulting",
+        title: 'IT-Beratung',
+        description: 'Strategische Beratung für Ihre IT-Infrastruktur und digitale Transformation.',
+        icon: 'consulting',
       },
       {
-        title: "Hosting & Wartung",
-        description:
-          "Stabile Betreuung mit Updates, Monitoring und klaren Verantwortlichkeiten für Ihre Webpräsenz.",
-        icon: "hosting",
+        title: 'Hosting & Wartung',
+        description: 'Zuverlässiges Webhosting, regelmäßige Updates und proaktive Wartung Ihrer Systeme.',
+        icon: 'hosting',
       },
     ],
   },
-
+  
   // About
   about: {
-    title: "Über mich",
-    subtitle: "Ihr persönlicher IT-Partner",
-    intro:
-      "Ich bin Melvin Ragusa und unterstütze als Einzelunternehmer Unternehmen und Selbstständige mit persönlichem IT-Service. Mein Fokus: klare Lösungen statt unnötiger Komplexität.",
-    experience:
-      "Mit Erfahrung in Webentwicklung und IT-Beratung helfe ich dabei, technische Herausforderungen schnell und pragmatisch zu lösen.",
+    title: 'Über uns',
+    subtitle: 'Ihr lokaler IT-Partner',
+    intro: 'Ragusa IT-Consulting bietet professionelle IT-Dienstleistungen mit persönlichem Service. Wir kombinieren technische Expertise mit einem tiefen Verständnis für die Bedürfnisse unserer Kunden.',
+    experience: 'Mit jahrelanger Erfahrung in der Webentwicklung und IT-Beratung unterstützen wir Unternehmen und Privatpersonen dabei, ihre technischen Herausforderungen zu meistern.',
     skills: {
-      title: "Technologien",
-      subtitle: "Moderne Tools für moderne Lösungen",
+      title: 'Technologien',
+      subtitle: 'Moderne Tools für moderne Lösungen',
     },
     values: {
-      title: "Warum mit mir arbeiten?",
+      title: 'Warum Ragusa IT?',
       items: [
         {
-          title: "Direkter Kontakt",
-          description:
-            "Sie sprechen immer direkt mit mir – ohne Umwege oder wechselnde Ansprechpartner.",
+          title: 'Persönlicher Service',
+          description: 'Direkter Ansprechpartner für alle Ihre IT-Anliegen.',
         },
         {
-          title: "Nahbar & vor Ort",
-          description:
-            "Ich bin lokal erreichbar und begleite Sie auf Wunsch auch persönlich vor Ort.",
+          title: 'Lokale Präsenz',
+          description: 'Vor-Ort-Support und persönliche Beratungsgespräche.',
         },
         {
-          title: "Faire, klare Preise",
-          description:
-            "Ich arbeite mit transparenter Preisstruktur – ohne versteckte Zusatzkosten.",
+          title: 'Faire Preise',
+          description: 'Transparente Preisgestaltung ohne versteckte Kosten.',
         },
         {
-          title: "Schnelle Rückmeldung",
-          description:
-            "Ich antworte zeitnah auf Anfragen und kümmere mich pragmatisch um Probleme.",
+          title: 'Schnelle Reaktion',
+          description: 'Kurze Reaktionszeiten bei Anfragen und Problemen.',
         },
       ],
     },
   },
-
+  
   // Contact
   contact: {
-    title: "Kontakt",
-    subtitle: "Lassen Sie uns zusammenarbeiten",
-    intro:
-      "Beschreiben Sie kurz Ihr Projekt oder Problem – ich melde mich schnell mit einer konkreten Einschätzung und nächstem Schritt.",
+    title: 'Kontakt',
+    subtitle: 'Lassen Sie uns zusammenarbeiten',
+    intro: 'Haben Sie ein Projekt im Sinn oder benötigen Sie technische Unterstützung? Ich freue mich auf Ihre Nachricht!',
     form: {
-      name: "Name",
-      namePlaceholder: "Ihr Name",
-      email: "E-Mail",
-      emailPlaceholder: "ihre@email.de",
-      subject: "Betreff",
-      subjectPlaceholder: "Worum geht es?",
-      message: "Nachricht",
-      messagePlaceholder: "Ihre Nachricht...",
-      submit: "Nachricht senden",
-      sending: "Wird gesendet...",
-      success: "Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.",
-      error:
-        "Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.",
-      rateLimit: "Zu viele Anfragen. Bitte warten Sie einen Moment.",
+      name: 'Name',
+      namePlaceholder: 'Ihr Name',
+      email: 'E-Mail',
+      emailPlaceholder: 'ihre@email.de',
+      subject: 'Betreff',
+      subjectPlaceholder: 'Worum geht es?',
+      message: 'Nachricht',
+      messagePlaceholder: 'Ihre Nachricht...',
+      submit: 'Nachricht senden',
+      sending: 'Wird gesendet...',
+      success: 'Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.',
+      error: 'Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.',
+      rateLimit: 'Zu viele Anfragen. Bitte warten Sie einen Moment.',
     },
     info: {
-      title: "Kontaktdaten",
-      email: "E-Mail",
-      location: "Standort",
-      github: "GitHub",
+      title: 'Kontaktdaten',
+      email: 'E-Mail',
+      location: 'Standort',
+      github: 'GitHub',
     },
   },
-
+  
   // Footer
   footer: {
-    copyright: "© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.",
-    madeIn: "Entwickelt in Deutschland mit",
-    love: "Liebe",
-    impressum: "Impressum",
+    copyright: '© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.',
+    madeIn: 'Entwickelt in Deutschland mit',
+    love: 'Liebe',
+    impressum: 'Impressum',
   },
 };
 

src/i18n/en.ts

@@ -1,135 +1,119 @@
-import type { Translations } from "./de";
+import type { Translations } from './de';
 
 export const en: Translations = {
   // Navigation
   nav: {
-    home: "Home",
-    about: "About Me",
-    contact: "Contact",
+    skipLink: 'Skip to content',
+    home: 'Home',
+    about: 'About',
+    contact: 'Contact',
   },
-
+  
   // Hero Section
   hero: {
-    greeting: "Welcome to",
-    company: "Ragusa IT-Consulting",
-    tagline: "Websites that",
-    rotatingWords: [
-      "generate leads",
-      "convert visitors",
-      "perform measurably",
-      "support your growth",
-    ],
-    cta: "Book a Free Discovery Call",
-    ctaSecondary: "Why Ragusa IT?",
-    scroll: "Scroll",
+    greeting: 'Welcome to',
+    company: 'Ragusa IT-Consulting',
+    tagline: 'Your partner for',
+    rotatingWords: ['Web Development', 'IT Support', 'Digital Solutions', 'Tech Consulting'],
+    cta: 'Start Project',
+    ctaSecondary: 'Learn More',
+    scroll: 'Scroll',
   },
-
+  
   // Services
   services: {
-    title: "Services Built for Outcomes",
-    subtitle:
-      "Practical IT solutions that save time and help you win new clients",
+    title: 'Our Services',
+    subtitle: 'Professional IT solutions for your business',
     items: [
       {
-        title: "Web Development",
-        description:
-          "Conversion-focused websites and web apps that build trust and generate qualified leads.",
-        icon: "code",
+        title: 'Web Development',
+        description: 'Modern, responsive websites and web applications built with React, TypeScript, and cutting-edge technologies.',
+        icon: 'code',
       },
       {
-        title: "Tech Support",
-        description:
-          "Fast help for critical issues so your day-to-day operations keep running smoothly.",
-        icon: "support",
+        title: 'Tech Support',
+        description: 'Fast and reliable technical support for hardware and software, available on-site.',
+        icon: 'support',
       },
       {
-        title: "IT Consulting",
-        description:
-          "Hands-on guidance for infrastructure, tools, and processes aligned with your budget.",
-        icon: "consulting",
+        title: 'IT Consulting',
+        description: 'Strategic consulting for your IT infrastructure and digital transformation.',
+        icon: 'consulting',
       },
       {
-        title: "Hosting & Maintenance",
-        description:
-          "Reliable care with updates, monitoring, and clear ownership for your online presence.",
-        icon: "hosting",
+        title: 'Hosting & Maintenance',
+        description: 'Reliable web hosting, regular updates, and proactive maintenance of your systems.',
+        icon: 'hosting',
       },
     ],
   },
-
+  
   // About
   about: {
-    title: "About Me",
-    subtitle: "Your personal IT partner",
-    intro:
-      "I'm Melvin Ragusa, and I run Ragusa IT-Consulting as a solo business. I help companies and freelancers with hands-on IT support and web solutions — focused on clear, practical outcomes.",
-    experience:
-      "With experience in web development and IT consulting, I help businesses and individuals solve technical challenges quickly and pragmatically.",
+    title: 'About Us',
+    subtitle: 'Your local IT partner',
+    intro: 'Ragusa IT-Consulting provides professional IT services with a personal touch. We combine technical expertise with a deep understanding of our clients\' needs.',
+    experience: 'With years of experience in web development and IT consulting, we help businesses and individuals overcome their technical challenges.',
     skills: {
-      title: "Technologies",
-      subtitle: "Modern tools for modern solutions",
+      title: 'Technologies',
+      subtitle: 'Modern tools for modern solutions',
     },
     values: {
-      title: "Why work with me?",
+      title: 'Why Ragusa IT?',
       items: [
         {
-          title: "Direct Contact",
-          description:
-            "You always work directly with me — no handoffs and no changing points of contact.",
+          title: 'Personal Service',
+          description: 'Direct point of contact for all your IT needs.',
         },
         {
-          title: "Local & Accessible",
-          description:
-            "I am locally available and can support you on-site when needed.",
+          title: 'Local Presence',
+          description: 'On-site support and in-person consultations.',
         },
         {
-          title: "Fair, Clear Pricing",
-          description:
-            "I work with transparent pricing and no hidden extra fees.",
+          title: 'Fair Pricing',
+          description: 'Transparent pricing with no hidden costs.',
         },
         {
-          title: "Fast Response",
-          description:
-            "I reply quickly and handle issues in a practical, no-nonsense way.",
+          title: 'Quick Response',
+          description: 'Short response times for inquiries and issues.',
         },
       ],
     },
   },
-
+  
   // Contact
   contact: {
-    title: "Contact",
-    subtitle: "Let's work together",
-    intro:
-      "Share your project or issue briefly — I'll reply quickly with a concrete assessment and recommended next action.",
+    title: 'Contact',
+    subtitle: 'Let\'s work together',
+    intro: 'Have a project in mind or need technical support? I look forward to hearing from you!',
     form: {
-      name: "Name",
-      namePlaceholder: "Your name",
-      email: "Email",
-      emailPlaceholder: "your@email.com",
-      subject: "Subject",
-      subjectPlaceholder: "What is it about?",
-      message: "Message",
-      messagePlaceholder: "Your message...",
-      submit: "Send Message",
-      sending: "Sending...",
-      success: "Message sent successfully! I'll get back to you soon.",
-      error: "Error sending message. Please try again or contact me directly.",
-      rateLimit: "Too many requests. Please wait a moment.",
+      name: 'Name',
+      namePlaceholder: 'Your name',
+      email: 'Email',
+      emailPlaceholder: 'your@email.com',
+      subject: 'Subject',
+      subjectPlaceholder: 'What is it about?',
+      message: 'Message',
+      messagePlaceholder: 'Your message...',
+      submit: 'Send Message',
+      sending: 'Sending...',
+      success: 'Message sent successfully! I\'ll get back to you soon.',
+      error: 'Error sending message. Please try again or contact me directly.',
+      rateLimit: 'Too many requests. Please wait a moment.',
     },
     info: {
-      title: "Contact Info",
-      email: "Email",
-      location: "Location",
-      github: "GitHub",
+      title: 'Contact Info',
+      email: 'Email',
+      location: 'Location',
+      github: 'GitHub',
     },
   },
-
+  
   // Footer
   footer: {
-    copyright: "© {year} Ragusa IT-Consulting. All rights reserved.",
-    madeIn: "Made in Germany with",
-    love: "love",
-    impressum: "Imprint",
+    copyright: '© {year} Ragusa IT-Consulting. All rights reserved.',
+    madeIn: 'Made in Germany with',
+    love: 'love',
+    impressum: 'Imprint',
   },
 };