fix: close final portfolio quality gaps

tests/browser/accessibility-keyboard.spec.ts

@@ -1,5 +1,16 @@
 import type { Page } from "@playwright/test";
-import { expect, test } from "../helpers/serve-dist";
+import { expect, revealNavigationLinks, test } from "../helpers/serve-dist";
+
+const navigationHrefs = [
+  "#start",
+  "#profile",
+  "#experience",
+  "#infrastructure",
+  "#selected-builds",
+  "#additional-work",
+  "#toolkit",
+  "#contact",
+] as const;
 
 interface FocusGeometry {
   readonly description: string;
@@ -74,6 +85,7 @@ test("every enabled author pointer target is 44 by 44 CSS pixels or a valid inli
   distUrl,
 }) => {
   await page.goto(distUrl, { waitUntil: "domcontentloaded" });
+  await revealNavigationLinks(page);
 
   const failures = await page
     .locator("a[href], button, input, select, textarea")
@@ -131,6 +143,10 @@ test("keyboard traversal reaches Contact in document order with visible unobscur
   distUrl,
 }) => {
   await page.goto(distUrl, { waitUntil: "domcontentloaded" });
+  const compactNavigation = await page
+    .locator(".site-navigation summary")
+    .isVisible();
+  await revealNavigationLinks(page);
 
   const visited: string[] = [];
   for (let index = 0; index < 64; index += 1) {
@@ -154,17 +170,12 @@ test("keyboard traversal reaches Contact in document order with visible unobscur
     if (geometry.description.startsWith("mailto:")) break;
   }
 
-  expect(visited.at(0)).toBe("#portfolio-content");
-  expect(visited.slice(1, 9)).toEqual([
-    "#start",
-    "#profile",
-    "#experience",
-    "#infrastructure",
-    "#selected-builds",
-    "#additional-work",
-    "#toolkit",
-    "#contact",
-  ]);
+  const expectedPrefix = [
+    "#portfolio-content",
+    ...(compactNavigation ? ["Navigate"] : []),
+    ...navigationHrefs,
+  ];
+  expect(visited.slice(0, expectedPrefix.length)).toEqual(expectedPrefix);
   expect(visited.some((description) => description.startsWith("mailto:"))).toBe(
     true,
   );
@@ -175,8 +186,14 @@ test("explicit keyboard navigation focuses a section heading without a fixed-sur
   distUrl,
 }) => {
   await page.goto(distUrl, { waitUntil: "domcontentloaded" });
+  const compactNavigation = await page
+    .locator(".site-navigation summary")
+    .isVisible();
+  await revealNavigationLinks(page);
 
-  for (let index = 0; index < 9; index += 1) await page.keyboard.press("Tab");
+  const contactTabIndex = compactNavigation ? 10 : 9;
+  for (let index = 0; index < contactTabIndex; index += 1)
+    await page.keyboard.press("Tab");
   await expect(page.locator('nav a[href="#contact"]')).toBeFocused();
   await page.keyboard.press("Enter");
   await expect(page.locator("#contact-heading")).toBeFocused();
@@ -194,17 +211,31 @@ test("responsive navigation exposes the exact visible label as each link's acces
   await page.setViewportSize({ width: 1440, height: 900 });
   await page.goto(distUrl, { waitUntil: "domcontentloaded" });
 
-  await expect(page.getByRole("link", { name: "Career", exact: true })).toBeVisible();
-  await expect(page.getByRole("link", { name: "More work", exact: true })).toBeVisible();
-  await expect(page.getByRole("link", { name: "Experience", exact: true })).toHaveCount(0);
-  await expect(page.getByRole("link", { name: "Additional work", exact: true })).toHaveCount(0);
+  await expect(
+    page.getByRole("link", { name: "Career", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "More work", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Experience", exact: true }),
+  ).toHaveCount(0);
+  await expect(
+    page.getByRole("link", { name: "Additional work", exact: true }),
+  ).toHaveCount(0);
 
   await page.setViewportSize({ width: 320, height: 800 });
   const career = page.getByRole("link", { name: "Career", exact: true });
   await expect(career).toHaveText("Career");
-  await expect(page.getByRole("link", { name: "More work", exact: true })).toHaveText("More work");
-  await expect(page.getByRole("link", { name: "Experience", exact: true })).toHaveCount(0);
-  await expect(page.getByRole("link", { name: "Additional work", exact: true })).toHaveCount(0);
+  await expect(
+    page.getByRole("link", { name: "More work", exact: true }),
+  ).toHaveText("More work");
+  await expect(
+    page.getByRole("link", { name: "Experience", exact: true }),
+  ).toHaveCount(0);
+  await expect(
+    page.getByRole("link", { name: "Additional work", exact: true }),
+  ).toHaveCount(0);
 
   await career.focus();
   await page.keyboard.press("Enter");