Contact modals on one native-dialog component, with consent-aware tracking

[vvlladd28]

What

Shared form protection — @util/form-guard
Field validation with inline hints, the XSS pre-check, the honeypot, the render-to-submit timing check and consent-aware tracking fields, in one module. ContactForm, the dev-services form and the contact modals use it instead of their own copies.

One contact modal — Modal.astro + ContactModal.astro
Modal is a native <dialog> shell: title, close button, backdrop, the form-modal card, an intro slot. ContactModal puts the contact form in it. It replaces three separate modals:

Page	Before	Now
/services/development-services/	.dev-modal div, <img> close button not reachable by keyboard, no Esc, no aria-modal/name	ContactModal
/products/trendz/	TrendzContactModal (deleted), hand-rolled focus trap, honeypot armed but never checked	ContactModal
/smart-farming-demo/	painted under the header and chat launcher (inside the isolated .main-pane), alert() validation, no UTM/client_id/fpr/honeypot	ContactModal, intro text via the slot, subject sent as a hidden field

All of them now:

• sit in the top layer (above the header, promo banner and chat launcher);
• trap focus, close on Esc and backdrop click, and return focus to the trigger;
• post to FORMSPREE_CONTACT;
• redirect to /contact-us-thanks/ (as ContactForm does);
• fill utm_*/fpr only with Marketing consent and client_id only with Analytics consent, and refill on consent change.

Triggers use data-contact-modal-open (bare = the page's only contact modal). ServicesBanner's buttonOnClick prop becomes buttonOpensContactModal.

The dev-services in-page form gets client_id/fpr, FORMSPREE_CONTACT, and no longer validates twice per submit (inline onsubmit + listener).

Shared dialog wiring — @util/modal-dialog
bindModalDialog() handles the scroll lock, backdrop close, and unlocking after the exit fade. These now use it:

• cookie preferences
• Cloud region chooser
• IoT Hub install dialog
• blog image lightbox — now a <dialog>. Images open it from the keyboard too (Enter / Space), so each image in a post is now a Tab stop. Esc no longer releases another overlay's scroll lock.

Smaller fixes

• Search overlay: role="dialog", aria-modal, aria-label, shared lockScroll. It stays a <div>, since Google CSE's suggestion dropdown is appended to <body> and would render under a top-layer dialog.
• IoT Hub install dialog: aria-labelledby.
• PromoBanner.astro: z-index comment had the cookie banner at 9999; it is 1100.
• Removed the now-unused public/images/close-icon.svg.

Visual changes

• dev-services modal: the close icon is a 20px stroke X (was a 28px image); fields stack to one column below 750px (was 960px).
• smart-farming modal: new look, the same as the dev-services and Trendz modals; the intro text keeps its two lines (16px lead, 14px muted note).
• Trendz modal: site typography mixins instead of trendz-*, otherwise the same layout.

Behaviour notes

• The timing check now counts from opening a modal, not from page load.
• Trendz and smart-farming modal forms now carry gtm_form/gtm_button, as the dev-services one already did.
• smart-farming no longer pre-selects a subject from ?subject=; it always sends Custom Development.

Checked

Manually in Chrome on the dev server (no form was submitted; validation and bot paths were exercised with synthetic submit events):

• every dialog above: open/close, focus, Esc, backdrop, scroll lock;
• consent: with, without Marketing, without any consent, restored;
• dark theme.

pnpm lint:eslint passes on the touched files. Not run yet: pnpm check, pnpm build, pnpm lint:linkcheck.

Follow-ups

• Poc in two weeks #760's Services/ContactModal.astro can be replaced by <ContactModal id="poc-contact" title="Let's talk about your project" formId="poc_sales_modal" tags="sales" />; its bare data-contact-modal-open triggers work unchanged. Until then it still references the removed close-icon.svg.
• The /pricing/ calculator modals still use portalToBody + their own controller.

[vvlladd28]

Review summary

Reviewed 20 changed files in Contact modals on one native-dialog component, with consent-aware tracking. Left 1 comment inline.

The one finding is in the shared backdrop-close check in src/util/modal-dialog.ts: it holds for the cookie, Cloud region and IoT Hub dialogs, whose inner panel fills the dialog box, but not for Modal.astro, where the <dialog> is the padded card itself. Clicks on the padding, or a text selection dragged out of a field, close the contact modal and drop what the visitor typed.

Not reviewed: public/images/close-icon.svg (deleted asset) — no reviewable logic.

---

This review was auto-generated. Findings may contain errors — please verify before applying changes.