From 462d2058e1581e261e59a6eff933f5bb0746ebb4 Mon Sep 17 00:00:00 2001
From: platform-mcp <platform-mcp@service.local>
Date: Wed, 17 Jun 2026 12:57:47 +0530
Subject: [PATCH] fix(forms): harden honeypot hiding on contact + inline lead
 forms

Both honeypots now use off-screen positioning (position:absolute; left:-9999px;
width:1px; height:1px; overflow:hidden) instead of relying on a parent's
aria-hidden alone, and the input itself carries tabindex="-1",
autocomplete="off", and aria-hidden="true". Labels are sr-only and sit as
siblings of the input (no nested label/input). Avoid display:none and
visibility:hidden so bots that skip those still trip the trap.

Verified: rendered honeypot HTML matches spec on both /contact and the
homepage inline lead form, and /api/contact still 200s a populated `website`
silently (bot path) while accepting empty `website` payloads as real leads.
---
 src/components/InlineLeadForm.astro | 17 ++++++++++++---
 src/pages/contact.astro             | 34 +++++++++++++++++++----------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/InlineLeadForm.astro b/src/components/InlineLeadForm.astro
index 3021295..ebb35e5 100644
--- a/src/components/InlineLeadForm.astro
+++ b/src/components/InlineLeadForm.astro
@@ -54,15 +54,26 @@
             data-testid="inline-lead-form"
             novalidate
           >
-            <!-- Honeypot (visually & SR-hidden — bots fill it, real users do not). -->
-            <div class="absolute -left-[9999px] top-auto w-px h-px overflow-hidden" aria-hidden="true">
-              <label for="inline-lead-website">Website</label>
+            <!--
+              Honeypot — off-screen positioned, NOT display:none / visibility:hidden
+              (some bots skip those entirely). aria-hidden + sr-only label keep it
+              silent for screen readers; tabindex="-1" + autocomplete="off" keep it
+              out of the tab order and browser autofill. Bots that blindly fill
+              every field will populate `website`, and /api/contact silently drops
+              the submission.
+            -->
+            <div
+              class="absolute -left-[9999px] top-auto w-px h-px overflow-hidden"
+              aria-hidden="true"
+            >
+              <label for="inline-lead-website" class="sr-only">Website</label>
               <input
                 type="text"
                 id="inline-lead-website"
                 name="website"
                 tabindex="-1"
                 autocomplete="off"
+                aria-hidden="true"
               />
             </div>
 
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 46e0d99..085f5a8 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -156,18 +156,28 @@ const trustStats = [
             </div>
 
             <form id="contact-form" class="space-y-5" novalidate>
-              <!-- Honeypot field (anti-spam) - hidden from users -->
-              <div class="absolute -left-[9999px]" aria-hidden="true">
-                <label for="website">
-                  Website
-                  <input
-                    type="text"
-                    id="website"
-                    name="website"
-                    tabindex="-1"
-                    autocomplete="off"
-                  />
-                </label>
+              <!--
+                Honeypot field (anti-spam).
+                Hidden from sighted users via off-screen positioning (NOT display:none /
+                visibility:hidden — some bots skip those entirely and never trip the trap).
+                The wrapper carries aria-hidden so screen-readers don't announce the label
+                or the input, and tabindex="-1" + autocomplete="off" keep it out of the
+                tab order and browser autofill. Bots that blindly fill every field will
+                set a value here, and /api/contact silently discards the submission.
+              -->
+              <div
+                class="absolute -left-[9999px] top-auto w-px h-px overflow-hidden"
+                aria-hidden="true"
+              >
+                <label for="website" class="sr-only">Website</label>
+                <input
+                  type="text"
+                  id="website"
+                  name="website"
+                  tabindex="-1"
+                  autocomplete="off"
+                  aria-hidden="true"
+                />
               </div>
 
               <!-- Name + Email row -->