From b6930aff9446a7fb83a9aadcf274a9d89f5e44a3 Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <41178744+maonakamoto@users.noreply.github.com>
Date: Mon, 31 Aug 2026 12:50:06 +0200
Subject: [PATCH] fix(nav): the app knew which page you were on and never said
 it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both nav surfaces compared `pathname === link.href` to paint a highlight and
set no aria-current, so the current page existed only for people who can see
it. There were zero occurrences of aria-current in the whole repo.

- Desktop and mobile nav links announce aria-current="page".
- The project step rail announces aria-current="step" — it is a progress rail
  through one project, and `step` is the token for exactly that; `page` would
  claim something else.

Three targets were also under the 44px touch floor, which this repo enforced
nowhere: nav links (py-2 on text-sm, ~36px), step pills (~36px), and the
mobile menu button (h-10 w-10 = 40px) — the one control a phone user must hit
to reach any other page. All now min-h-11 / h-11 w-11. The hamburger also
gains aria-expanded and an aria-label, which it had neither of.

No visual change beyond the target sizes; the active styling is untouched.

Found by the fleet nav-contract audit, which flags a repo whose navigation
computes an active state and never announces it anywhere.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XeELB8b3N4JrT2asYL9WvE
---
 app/src/components/layout/AppShell.tsx       | 15 +++++++++++++--
 app/src/components/layout/ProjectStepNav.tsx |  7 ++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/src/components/layout/AppShell.tsx b/app/src/components/layout/AppShell.tsx
index 786e43b..f8a74a4 100644
--- a/app/src/components/layout/AppShell.tsx
+++ b/app/src/components/layout/AppShell.tsx
@@ -84,8 +84,14 @@ export function AppShell({ children }: { children: ReactNode }) {
               <Link
                 key={link.href}
                 href={link.href}
+                // The comparison below already knows which link is the page you
+                // are on; it only painted it. Announce it too, or the highlight
+                // exists solely for people who can see it.
+                aria-current={pathname === link.href ? 'page' : undefined}
                 className={cn(
-                  'px-4 py-2 text-sm font-medium rounded-full transition-colors',
+                  // min-h-11 is the 44px touch floor. py-2 on text-sm came out
+                  // near 36px, which is a fiddly target on a phone.
+                  'inline-flex min-h-11 items-center px-4 py-2 text-sm font-medium rounded-full transition-colors',
                   pathname === link.href
                     ? 'text-foreground'
                     : 'text-muted-foreground hover:text-foreground',
@@ -129,7 +135,11 @@ export function AppShell({ children }: { children: ReactNode }) {
             <Button
               variant="ghost"
               size="sm"
-              className="md:hidden h-10 w-10 p-0"
+              // h-10 w-10 was 40px — under the 44px floor, on the one control a
+              // phone user must hit to reach any other page.
+              className="md:hidden h-11 w-11 p-0"
+              aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={mobileMenuOpen}
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
             >
               {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
@@ -159,6 +169,7 @@ export function AppShell({ children }: { children: ReactNode }) {
             <Link
               key={link.href}
               href={link.href}
+              aria-current={pathname === link.href ? 'page' : undefined}
               className={cn(
                 'w-full max-w-sm text-center px-6 py-5 text-xl font-medium rounded-2xl transition-colors',
                 pathname === link.href
diff --git a/app/src/components/layout/ProjectStepNav.tsx b/app/src/components/layout/ProjectStepNav.tsx
index dc7db19..4b0f40f 100644
--- a/app/src/components/layout/ProjectStepNav.tsx
+++ b/app/src/components/layout/ProjectStepNav.tsx
@@ -75,8 +75,13 @@ export function ProjectStepNav({ projectId }: { projectId: string }) {
 
                 <Link
                   href={href}
+                  // `step`, not `page`: this is a progress rail through one
+                  // project, and aria-current="step" is the token for exactly
+                  // that. It also reaches the 44px floor — these pills came out
+                  // near 36px and are the primary way through the flow.
+                  aria-current={isActive ? 'step' : undefined}
                   className={cn(
-                    'relative flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2 text-sm font-medium rounded-full transition-all whitespace-nowrap',
+                    'relative flex min-h-11 items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2 text-sm font-medium rounded-full transition-all whitespace-nowrap',
                     isActive
                       ? 'bg-primary text-primary-foreground shadow-md shadow-primary/20'
                       : isComplete