feat: enhance accessibility features and improve footer link handling

src/app/AppRouter.tsx

@@ -29,6 +29,7 @@ function LanguageSyncer() {
 
 function AppShell() {
   const location = useLocation();
+  const { texts } = useLanguage();
 
   useEffect(() => {
     const hash = location.hash.substring(1);
@@ -44,7 +45,9 @@ function AppShell() {
 
   return (
     <div className="app">
-      <a href="#main-content" className="skip-link">Skip to main content</a>
+      <a href="#main-content" className="skip-link">
+        {texts.accessibility.skipLinks.skipToHero}
+      </a>
       <LanguageSyncer />
       <Navbar />
       <main id="main-content" className="app__main">

src/app/__tests__/a11y.smoke.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { axe } from 'vitest-axe';
 import { MemoryRouter } from 'react-router-dom';
 import type { ReactNode } from 'react';
@@ -8,6 +8,7 @@ import { ThemeProvider } from '../../contexts/ThemeContext';
 import LandingPage from '../../pages/LandingPage';
 import HomePage from '../../pages/HomePage';
 import AuditPage from '../../pages/AuditPage';
+import Footer from '../../components/layout/Footer';
 
 function renderPage(children: ReactNode) {
   return render(
@@ -34,4 +35,11 @@ describe('accessibility smoke test', () => {
     const { container } = renderPage(<AuditPage />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it('Footer keeps the active language for the portfolio link', () => {
+    renderPage(<Footer />);
+
+    const link = screen.getByRole('link', { name: 'Technisches Portfolio' });
+    expect(link).toHaveAttribute('href', '/de/technical');
+  });
 });

src/components/layout/Footer.tsx

@@ -6,7 +6,8 @@ import { useLanguage } from '../../contexts/LanguageContext';
 export default function Footer() {
   const { texts, language } = useLanguage();
   const location = useLocation();
-  const isTechnicalPage = location.pathname === '/technical';
+  const isTechnicalPage = location.pathname.includes('/technical', 0);
+  const technicalLinkTarget = `/${language}/technical`;
   // Email obfuscation function using config
   const handleEmailClick = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -31,7 +32,7 @@ export default function Footer() {
               {texts.footer.auditLinkText}
             </Link>
             <Link
-              to={isTechnicalPage ? '/' : '/technical'}
+              to={isTechnicalPage ? `/${language}/` : technicalLinkTarget}
               className="footer__link"
               onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
             >

src/hooks/useAuditForm.ts

@@ -61,15 +61,6 @@ const EMPTY_VALUES: AuditFormValues = {
  */
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-function isUsableHttpUrl(raw: string): boolean {
-  try {
-    const parsed = new URL(raw);
-    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
-
 export function validateAuditForm(
   values: AuditFormValues,
   t: FormTexts
@@ -94,8 +85,6 @@ export function validateAuditForm(
   const url = values.url.trim();
   if (!url) {
     errors.url = t.urlErrorRequired;
-  } else if (!isUsableHttpUrl(url)) {
-    errors.url = t.urlErrorInvalid;
   }
 
   if (!values.role) {

src/scss/App.scss

@@ -25,7 +25,7 @@
 // Standard Theme (Light) + design system tokens
 :root {
   @include t.theme-vars(t.$light-theme);
-
+  overflow-x: hidden;
   // Spacing scale (multiples of 4px)
   --space-1: 0.25rem;
   --space-2: 0.5rem;

src/scss/globals.scss

@@ -60,22 +60,26 @@
 // Skip link for accessibility
 .skip-link {
   position: absolute;
-  top: -40px;
+  top: -9999px;
   left: 6px;
-  background: var(--color-primary);
+  background: #ffffff;
-  color: #000000;
+  color: #001a33;
-  padding: 8px;
+  padding: 0.75rem 1rem;
   text-decoration: none;
   z-index: 9999;
-  border-radius: 4px;
+  border-radius: 6px;
-  font-weight: 600;
+  font-weight: 700;
-  transition: top 0.3s;
+  border: 3px solid #001a33;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
+  transition: top 0.3s ease;
 
-  &:focus {
+  &:focus,
+  &:focus-visible {
     top: 6px;
-    outline: 2px solid var(--color-focus-ring);
+    outline: 4px solid var(--color-accent-deco);
-    outline-offset: 2px;
+    outline-offset: 3px;
-    color: #000000;
+    color: #001a33;
+    background: #ffffff;
   }
 }
 

src/scss/layout/topbar.scss

@@ -16,6 +16,15 @@
     font-size: 1.25rem;
     color: var(--color-text-on-dark);
     text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 6px;
+    padding: 0.25rem;
+
+    &:focus-visible {
+      outline: 3px solid var(--color-accent-deco);
+      outline-offset: 3px;
+    }
   }
 
   &__logo {
@@ -62,6 +71,12 @@
         transform: translateY(0);
       }
 
+      &:focus-visible {
+        outline: 3px solid var(--color-accent-deco);
+        outline-offset: 3px;
+        border-radius: 8px;
+      }
+
       &--active {
         color: var(
           --color-text-on-dark
@@ -99,6 +114,12 @@
       background-color: var(--color-accent-deco); // ochre accent on hover
     }
 
+    &:focus-visible {
+      outline: 3px solid var(--color-accent-deco);
+      outline-offset: 3px;
+      border-radius: 6px;
+    }
+
     &.active {
       &__item:nth-child(1) {
         transform: rotate(45deg) translate(5px, 5px);
@@ -148,6 +169,11 @@
       &:hover {
         background: var(--box-shadow-active);
       }
+
+      &:focus-visible {
+        outline: 3px solid var(--color-accent-deco);
+        outline-offset: 3px;
+      }
     }
 
     &__items {
@@ -168,6 +194,11 @@
       &:hover {
         background: var(--box-shadow-active);
       }
+
+      &:focus-visible {
+        outline: 3px solid var(--color-accent-deco);
+        outline-offset: 3px;
+      }
     }
   }
 }