feat: complete wcag accessibility and contrast improvements

2026-02-21 20:43:18 +01:00
parent 678c803408
commit 1153a79eb6
15 changed files with 228 additions and 69 deletions
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -101,7 +101,8 @@ export default function Header() {
  const headerClass = cn(
    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu animate-in fade-in slide-in-from-top-12 fill-mode-both',
    {
-      'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none': isHomePage && !isScrolled && !isMobileMenuOpen,
+      'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none':
+        isHomePage && !isScrolled && !isMobileMenuOpen,
      'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
    },
  );
@@ -137,9 +138,7 @@ export default function Header() {
            </Link>
          </div>

-          <div
-            className="flex items-center gap-4 md:gap-12"
-          >
+          <div className="flex items-center gap-4 md:gap-12">
            <nav className="hidden lg:flex items-center space-x-10">
              {menuItems.map((item, idx) => (
                <div
@@ -170,7 +169,10 @@ export default function Header() {
            </nav>

            <div
-              className={cn('hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both', textColorClass)}
+              className={cn(
+                'hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both',
+                textColorClass,
+              )}
              style={{ animationDuration: '600ms', animationDelay: '300ms' }}
            >
              <div
@@ -188,12 +190,12 @@ export default function Header() {
                        location: 'header',
                      })
                    }
-                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
                  >
                    EN
                  </Link>
                </div>
-                <div className="w-px h-4 bg-current opacity-20" />
+                <div className="w-px h-4 bg-current opacity-30" />
                <div>
                  <Link
                    href={getPathForLocale('de')}
@@ -205,7 +207,7 @@ export default function Header() {
                        location: 'header',
                      })
                    }
-                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
                  >
                    DE
                  </Link>
@@ -238,7 +240,7 @@ export default function Header() {
              className={cn(
                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50 transition-all duration-300',
                textColorClass,
-                isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100'
+                isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100',
              )}
              aria-label={t('toggleMenu')}
              aria-expanded={isMobileMenuOpen}
@@ -296,7 +298,10 @@ export default function Header() {
            {menuItems.map((item, idx) => (
              <div
                key={item.href}
-                className={cn('transition-all duration-500 transform', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+                className={cn(
+                  'transition-all duration-500 transform',
+                  isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
+                )}
                style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
              >
                <Link
@@ -317,23 +322,26 @@ export default function Header() {
            ))}

            <div
-              className={cn('pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+              className={cn(
+                'pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500',
+                isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8',
+              )}
              style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
            >
              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
                <div>
                  <Link
                    href={getPathForLocale('en')}
-                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-80'}`}
                  >
                    EN
                  </Link>
                </div>
-                <div className="w-px h-6 bg-white/20" />
+                <div className="w-px h-6 bg-white/30" />
                <div>
                  <Link
                    href={getPathForLocale('de')}
-                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-80'}`}
                  >
                    DE
                  </Link>
@@ -354,7 +362,10 @@ export default function Header() {

            {/* Bottom Branding */}
            <div
-              className={cn('p-12 flex justify-center transition-all duration-700', isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75')}
+              className={cn(
+                'p-12 flex justify-center transition-all duration-700',
+                isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75',
+              )}
              style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
            >
              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
--- a/components/blog/BlogPaginationKeyboardObserver.tsx
+++ b/components/blog/BlogPaginationKeyboardObserver.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface BlogPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  locale: string;
+}
+
+export function BlogPaginationKeyboardObserver({
+  currentPage,
+  totalPages,
+  locale,
+}: BlogPaginationProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't trigger if user is typing in an input
+      if (
+        document.activeElement?.tagName === 'INPUT' ||
+        document.activeElement?.tagName === 'TEXTAREA' ||
+        document.activeElement?.tagName === 'SELECT'
+      ) {
+        return;
+      }
+
+      if (e.key === 'ArrowLeft' && currentPage > 1) {
+        router.push(`/${locale}/blog?page=${currentPage - 1}`);
+      } else if (e.key === 'ArrowRight' && currentPage < totalPages) {
+        router.push(`/${locale}/blog?page=${currentPage + 1}`);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [currentPage, totalPages, locale, router]);
+
+  return null;
+}
--- a/components/blog/PostNavigation.tsx
+++ b/components/blog/PostNavigation.tsx
@@ -10,7 +10,13 @@ interface PostNavigationProps {
  locale: string;
 }

-export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom, locale }: PostNavigationProps) {
+export default function PostNavigation({
+  prev,
+  next,
+  isPrevRandom,
+  isNextRandom,
+  locale,
+}: PostNavigationProps) {
  if (!prev && !next) return null;

  return (
@@ -36,10 +42,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,

          {/* Content */}
          <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
-            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
              {isPrevRandom
-                ? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
-                : (locale === 'de' ? 'Vorheriger Beitrag' : 'Previous Post')}
+                ? locale === 'de'
+                  ? 'Weiterer Artikel'
+                  : 'More Article'
+                : locale === 'de'
+                  ? 'Vorheriger Beitrag'
+                  : 'Previous Post'}
            </span>
            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
              {prev.frontmatter.title}
@@ -47,9 +57,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,
          </div>

          {/* Arrow Icon */}
-          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
+          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
            </svg>
          </div>
        </Link>
@@ -78,10 +93,14 @@ export default function PostNavigation({ prev, next, isPrevRandom, isNextRandom,

          {/* Content */}
          <div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
-            <span className="text-sm font-bold uppercase tracking-wider mb-2 opacity-70">
+            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
              {isNextRandom
-                ? (locale === 'de' ? 'Weiterer Artikel' : 'More Article')
-                : (locale === 'de' ? 'Nächster Beitrag' : 'Next Post')}
+                ? locale === 'de'
+                  ? 'Weiterer Artikel'
+                  : 'More Article'
+                : locale === 'de'
+                  ? 'Nächster Beitrag'
+                  : 'Next Post'}
            </span>
            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
              {next.frontmatter.title}
--- a/components/blog/PowerCTA.tsx
+++ b/components/blog/PowerCTA.tsx
@@ -28,7 +28,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
          <span className="text-accent block">{isDe ? 'Energiewende?' : 'Energy Transition?'}</span>
        </h3>

-        <p className="text-xl text-white/70 mb-10 leading-relaxed max-w-2xl">
+        <p className="text-xl text-white/90 mb-10 leading-relaxed max-w-2xl">
          {isDe
            ? 'Von der Planung von Wind- und Solarparks bis zur Lieferung hochwertiger Energiekabel erwecken wir Ihre Projekte zum Leben.'
            : 'From wind and solar park planning to delivering high-quality energy cables, we bring your projects to life.'}
@@ -45,7 +45,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
              ? 'Zertifizierte Qualität nach EU-Standards'
              : 'Certified quality according to EU standards',
          ].map((item, i) => (
-            <div key={i} className="flex items-center gap-4 text-white/80">
+            <div key={i} className="flex items-center gap-4 text-white/90">
              <div className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                <svg
                  className="w-3 h-3 text-accent"
@@ -88,7 +88,7 @@ export default function PowerCTA({ locale }: PowerCTAProps) {
              />
            </svg>
          </Link>
-          <p className="text-white/50 text-sm font-medium">
+          <p className="text-white/80 text-sm font-medium">
            {isDe
              ? 'Kostenlose Erstberatung für Ihr Vorhaben.'
              : 'Free initial consultation for your project.'}
--- a/components/blog/TableOfContents.tsx
+++ b/components/blog/TableOfContents.tsx
@@ -53,7 +53,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
  return (
    <nav className="hidden lg:block w-full ml-12">
      <div className="relative pl-6 border-l border-neutral-200">
-        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/50 mb-6">
+        <h4 className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-text-primary/70 mb-6">
          {locale === 'de' ? 'Inhalt' : 'Table of Contents'}
        </h4>
        <ul className="space-y-4">
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -38,7 +38,7 @@ export default function Hero() {
            </Heading>
          </div>
          <div>
-            <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
+            <p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
              {t('subtitle')}
            </p>
          </div>
@@ -57,7 +57,9 @@ export default function Hero() {
                }
              >
                {t('cta')}
-                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
+                <span className="transition-transform group-hover/btn:translate-x-1 ml-2">
+                  &rarr;
+                </span>
              </Button>
            </div>
            <div>