From ef6b7267e4fea362ee5813582c62adfd005aab6e Mon Sep 17 00:00:00 2001
From: Aric Camarata <aric.camarata@gmail.com>
Date: Sun, 13 Sep 2026 12:43:11 -0400
Subject: [PATCH] fix(ui): give nav links distinct focus identities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

web's Playwright keyboard-nav gate went red on main:

  Error: /products: 2 links have no accessible name
  (only 1 may fall back to the shared href)

The same destination is linked from three places — the desktop nav, the
mobile nav (Header.tsx) and the footer link groups (Footer.tsx) — and none
carried a data-testid or aria-label. The test identifies a link by
data-testid ?? aria-label ?? href, so at desktop width the visible desktop
nav link and the visible footer link both fall back to the bare href,
collapse into one identity, and read as a focus trap. That is the same
failure mode the test's own comment records from 2026-09-11.

Adds a test-only disambiguator to all three renderings:
nav-desktop-<label>, nav-mobile-<label>, footer-<group>-<label>.

Deliberately NOT an aria-label: that would satisfy the gate but get
announced to screen readers, making two identical links read differently
for no user benefit. data-testid is invisible to assistive tech and is the
identity the test prefers first.

Nothing user-visible changes. tsup build clean, all three expressions
present in dist/index.js.
---
 @nself-web/ui/src/components/Footer.tsx | 3 +++
 @nself-web/ui/src/components/Header.tsx | 8 ++++++++
 2 files changed, 11 insertions(+)

diff --git a/@nself-web/ui/src/components/Footer.tsx b/@nself-web/ui/src/components/Footer.tsx
index a9cefe0..acee990 100644
--- a/@nself-web/ui/src/components/Footer.tsx
+++ b/@nself-web/ui/src/components/Footer.tsx
@@ -200,6 +200,9 @@ function FooterCol({ group }: { group: FooterLinkGroup }) {
           <li key={link.label}>
             <a
               href={link.href}
+              // Distinct focus identity from the header's link to the same
+              // destination — see the matching comment in Header.tsx.
+              data-testid={`footer-${group.title}-${link.label}`}
               target={link.external ? '_blank' : undefined}
               rel={link.external ? 'noopener noreferrer' : undefined}
               className="text-slate-600 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
diff --git a/@nself-web/ui/src/components/Header.tsx b/@nself-web/ui/src/components/Header.tsx
index 318efc1..bfe4efa 100644
--- a/@nself-web/ui/src/components/Header.tsx
+++ b/@nself-web/ui/src/components/Header.tsx
@@ -119,6 +119,13 @@ export function Header({
                 <a
                   key={item.label}
                   href={item.href}
+                  // The same destination is linked from the desktop nav, the
+                  // mobile nav and the footer. Keyboard-nav tests identify a
+                  // link by `data-testid ?? aria-label ?? href`, so without a
+                  // testid these collapse into one identity and read as a focus
+                  // trap. An aria-label would fix the test but get announced to
+                  // screen readers, so the disambiguator stays test-only.
+                  data-testid={`nav-desktop-${item.label}`}
                   target={item.external ? '_blank' : undefined}
                   rel={item.external ? 'noopener noreferrer' : undefined}
                   aria-current={active ? 'page' : undefined}
@@ -218,6 +225,7 @@ export function Header({
               <a
                 key={item.label}
                 href={item.href}
+                data-testid={`nav-mobile-${item.label}`}
                 target={item.external ? '_blank' : undefined}
                 rel={item.external ? 'noopener noreferrer' : undefined}
                 onClick={() => setMobileOpen(false)}