From d2bf66bb08a957fa86a7bac91fb3206cf2e5ec70 Mon Sep 17 00:00:00 2001
From: TurtleWolfe <TurtleWolfe@users.noreply.github.com>
Date: Thu, 20 Aug 2026 06:31:00 +0000
Subject: [PATCH] fix(#396): the button gate only ever looked at the home page,
 so a 40px submit shipped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The zero-assertion reporter (#846/#847) produced its first real CI output, and it named
`mobile-buttons.spec.ts:35 › All buttons meet 44x44px minimum on mobile` among 31 tests
that ran no assertions across the required lane. Investigating that one found a live
defect rather than a broken test.

The test is fine. It visits `/`, whose three visible `.btn` elements all pass — so it
correctly asserted nothing and went green. Meanwhile the CONTACT FORM'S PRIMARY ACTION
renders at 40px: `btn btn-primary` with no height floor, measured 139x40 on production
at 390px, below the 44px minimum CLAUDE.md mandates.

A gate is only as wide as what it points at (#411). This one pointed at one route.

Two changes:

  - `min-h-11` on the submit button. Measured 44px after, locally, on a restarted
    container with the page proven loaded (`h1 = "Get in Touch"`, not a 404).
  - `mobile-buttons.spec.ts` now sweeps `/`, `/contact/` and `/blog/`, each earning its
    place by holding buttons the others do not: nav/hero chrome, a form submit, card
    actions.

AND THE ASSERTION IS NOW UNCONDITIONAL. It read:

    if (failures.length > 0) {
      expect(failures.length, ...).toBe(0);
    }

which is why it reported zero assertions when passing. That shape is not wrong — it
fails correctly when a button IS too small — but it makes "found nothing wrong"
indistinguishable from "measured nothing" in every report. It now asserts
`failures` is empty unconditionally, plus a COVERAGE FLOOR: at least one visible `.btn`
per route, so a selector change or an empty route fails loudly instead of passing.

Verified against production, which still carries the defect:

    Error: 1 button(s) below 44px:
    /contact/ — "Send Message": 139x40px

and mutation-verified with the mutant confirmed present first: pointing the locator at
`.btn-does-not-exist` fails on the coverage floor ("this gate measured nothing")
rather than passing green, which is what the old shape would have done.

Worth noting for the other 30 names on that list: they are NOT all defects. Several use
`checkA11y()`, which throws rather than calling `expect`, so they assert without a
countable step — the reporter's documented blind spot. The list is a lead, not a verdict.

ContactForm 33/33; test:scripts 428/428; type-check and lint clean.

Refs #396
---
 .../forms/ContactForm/ContactForm.tsx         |  2 +-
 tests/e2e/tests/mobile-buttons.spec.ts        | 79 ++++++++++++-------
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/components/forms/ContactForm/ContactForm.tsx b/src/components/forms/ContactForm/ContactForm.tsx
index 50745bae..f0beb26c 100644
--- a/src/components/forms/ContactForm/ContactForm.tsx
+++ b/src/components/forms/ContactForm/ContactForm.tsx
@@ -359,7 +359,7 @@ export const ContactForm: React.FC<ContactFormProps> = ({
         <div className="mt-6">
           <button
             type="submit"
-            className={`btn btn-primary ${isSubmitting ? 'loading' : ''} ${!isOnline ? 'btn-warning' : ''}`}
+            className={`btn btn-primary min-h-11 ${isSubmitting ? 'loading' : ''} ${!isOnline ? 'btn-warning' : ''}`}
             disabled={isSubmitting || !!honeypotValue}
           >
             {isSubmitting
diff --git a/tests/e2e/tests/mobile-buttons.spec.ts b/tests/e2e/tests/mobile-buttons.spec.ts
index c6649ba3..f27a0b87 100644
--- a/tests/e2e/tests/mobile-buttons.spec.ts
+++ b/tests/e2e/tests/mobile-buttons.spec.ts
@@ -32,46 +32,69 @@ test.describe('Mobile Button Standards', () => {
   const MINIMUM = TOUCH_TARGET_STANDARDS.AAA.minWidth;
   const TOLERANCE = 1;
 
+  /**
+   * Routes this gate visits. `/` ALONE WAS NOT ENOUGH (#396).
+   *
+   * Its three visible `.btn` elements all pass, so the gate ran green while the
+   * contact form's PRIMARY ACTION rendered at 40px — a bare `btn btn-primary` with
+   * no height floor, on the one button that page exists for. Measured on production
+   * at 390px. A gate is only as wide as what it points at.
+   *
+   * Each route earns its place by holding buttons the others do not:
+   *   /          nav and hero chrome
+   *   /contact/  a form submit — the case that was missed
+   *   /blog/     card actions
+   */
+  const BUTTON_ROUTES = ['/', '/contact/', '/blog/'];
+
   test('All buttons meet 44x44px minimum on mobile', async ({ page }) => {
     await page.setViewportSize({ width: 390, height: 844 });
-    await page.goto('/');
-    await dismissCookieBanner(page);
-    await waitForLayoutStability(page);
 
-    // Check primary action buttons (btn class), not all buttons
-    // Small icon buttons and decorative buttons are exempt
-    const buttons = await page.locator('.btn').all();
     const failures: string[] = [];
+    let measured = 0;
 
-    for (let i = 0; i < buttons.length; i++) {
-      const button = buttons[i];
+    for (const route of BUTTON_ROUTES) {
+      await page.goto(route);
+      await dismissCookieBanner(page);
+      await waitForLayoutStability(page);
 
-      if (await button.isVisible()) {
+      // Check primary action buttons (btn class), not all buttons
+      // Small icon buttons and decorative buttons are exempt
+      const buttons = await page.locator('.btn').all();
+
+      for (const button of buttons) {
+        if (!(await button.isVisible())) continue;
         const box = await button.boundingBox();
+        if (!box) continue;
+
+        measured++;
+        const text =
+          (await button.textContent())?.trim().substring(0, 20) || '';
 
-        if (box) {
-          const text =
-            (await button.textContent())?.trim().substring(0, 20) || '';
-
-          // Primary buttons should meet the 44px minimum
-          if (
-            box.width < MINIMUM - TOLERANCE ||
-            box.height < MINIMUM - TOLERANCE
-          ) {
-            failures.push(
-              `Button "${text}": ${box.width.toFixed(0)}x${box.height.toFixed(0)}px`
-            );
-          }
+        if (
+          box.width < MINIMUM - TOLERANCE ||
+          box.height < MINIMUM - TOLERANCE
+        ) {
+          failures.push(
+            `${route} — "${text}": ${box.width.toFixed(0)}x${box.height.toFixed(0)}px`
+          );
         }
       }
     }
 
-    if (failures.length > 0) {
-      expect(
-        failures.length,
-        `${failures.length} buttons too small:\n${failures.join('\n')}`
-      ).toBe(0);
-    }
+    // COVERAGE FLOOR, asserted unconditionally. Without it a selector change or an
+    // empty route makes this pass having measured nothing — and it would look
+    // identical to a clean sweep in the report (#396).
+    expect(
+      measured,
+      `no visible .btn elements found across ${BUTTON_ROUTES.join(', ')} — this ` +
+        'gate measured nothing'
+    ).toBeGreaterThanOrEqual(BUTTON_ROUTES.length);
+
+    expect(
+      failures,
+      `${failures.length} button(s) below ${MINIMUM}px:\n${failures.join('\n')}`
+    ).toEqual([]);
   });
 
   test('Buttons have 8px minimum spacing', async ({ page }) => {