From 64dda16493964aec60fbbfc74f06999d1df0e89c Mon Sep 17 00:00:00 2001
From: Simon Axelsson <simon@siax.io>
Date: Thu, 25 Jun 2026 17:54:23 +0200
Subject: [PATCH] fix: aria-current on active nav links and stepper step

- header: mark active page with aria-current="page" + highlight underline
- portal-shell sidebar: aria-current="page" on active nav link
- order-stepper: aria-current="step" on the active step

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/header.tsx        | 27 +++++++++++++++++----------
 components/order-stepper.tsx |  1 +
 components/portal-shell.tsx  |  1 +
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/header.tsx b/components/header.tsx
index 7e7b3a9..65831b2 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { usePathname } from "next/navigation";
 import { useT } from "@/components/locale-provider";
 import { LocaleSwitcher } from "@/components/locale-switcher";
 
@@ -47,6 +48,7 @@ function ThemeToggle() {
 
 export function Header() {
   const t = useT();
+  const pathname = usePathname();
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
 
@@ -69,16 +71,21 @@ export function Header() {
         <Wordmark />
 
         <nav className="hidden items-center md:flex">
-          {NAV.map((n) => (
-            <Link
-              key={n.href}
-              href={n.href}
-              className="group relative px-4 py-2 font-mono text-[12px] uppercase tracking-[0.12em] text-muted-foreground transition-colors hover:text-foreground"
-            >
-              {t(n.label)}
-              <span aria-hidden className="pointer-events-none absolute bottom-1 left-4 right-4 h-px origin-left scale-x-0 bg-foreground transition-transform duration-300 group-hover:scale-x-100" />
-            </Link>
-          ))}
+          {NAV.map((n) => {
+            const active = !n.href.includes("#") && pathname === n.href;
+            return (
+              <Link
+                key={n.href}
+                href={n.href}
+                aria-current={active ? "page" : undefined}
+                className="group relative px-4 py-2 font-mono text-[12px] uppercase tracking-[0.12em] text-muted-foreground transition-colors hover:text-foreground"
+                style={{ color: active ? "var(--foreground)" : undefined }}
+              >
+                {t(n.label)}
+                <span aria-hidden className="pointer-events-none absolute bottom-1 left-4 right-4 h-px origin-left bg-foreground transition-transform duration-300 group-hover:scale-x-100" style={{ transform: active ? "scaleX(1)" : "scaleX(0)", transformOrigin: "left" }} />
+              </Link>
+            );
+          })}
         </nav>
 
         <div className="hidden items-center gap-4 md:flex">
diff --git a/components/order-stepper.tsx b/components/order-stepper.tsx
index 0532f66..7d8b230 100644
--- a/components/order-stepper.tsx
+++ b/components/order-stepper.tsx
@@ -45,6 +45,7 @@ export function OrderStepper({ active }: { active: 1 | 2 | 3 | 4 }) {
           <div
             key={s.n}
             className="flex flex-1 items-center justify-center border-r border-border px-4 py-3 last:border-r-0"
+            aria-current={isActive ? "step" : undefined}
           >
             {s.href && (isDone || isActive) ? (
               <Link href={s.href} className="transition-opacity hover:opacity-70">
diff --git a/components/portal-shell.tsx b/components/portal-shell.tsx
index d2eeef7..02cfe95 100644
--- a/components/portal-shell.tsx
+++ b/components/portal-shell.tsx
@@ -86,6 +86,7 @@ export function PortalShell({
                 <Link
                   key={n.href}
                   href={n.href}
+                  aria-current={active ? "page" : undefined}
                   className="border-l-2 px-4 py-2.5 font-mono text-[11px] uppercase tracking-[0.1em] transition-colors"
                   style={{
                     borderColor: active ? "var(--accent-red)" : "transparent",