From c1343f91f23fe80d75a11ece9b9a881a4823c5b0 Mon Sep 17 00:00:00 2001 From: Jason E Plumb Date: Fri, 5 Jun 2026 14:16:11 -0700 Subject: [PATCH 1/2] feat(consent): require scrolling the terms before enabling "I agree" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The first-run consent dialog's "I agree — continue" button now starts disabled and unlocks only once the user scrolls to the bottom of the terms (#consent-body), so acceptance follows actually seeing the full Privacy Policy + Terms of Use. - Accept button renders `disabled` (dimmed, not-allowed cursor); a small hint ("Please scroll to the bottom to continue.") shows beneath the actions while locked. - Unlocks on scroll-to-bottom (4px tolerance for sub-pixel rounding), hiding the hint. - If the terms already fit without scrolling (tall viewport), enables immediately — nothing to scroll past. - Re-checked on resize so rotating to a layout where the content fits also unlocks it. - The terms region is now focusable (tabindex=0) and receives initial focus, so keyboard users can scroll to read (and unlock) instead of landing on a disabled button. Decline stays enabled throughout. - The window resize listener is cleaned up on close (incl. decline-before-scroll). Closes #225 Co-Authored-By: Claude Opus 4.8 --- src/consent.ts | 43 +++++++++++++++++++++++++++++++++++++------ src/style.css | 15 +++++++++++++++ 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/consent.ts b/src/consent.ts index d273c8c..fc30585 100644 --- a/src/consent.ts +++ b/src/consent.ts @@ -37,7 +37,7 @@ export function showConsentModal(): Promise { panel.innerHTML = `

webmap.dev — privacy-first GPS mapping, no account required

-
+

Privacy Policy

  • Local only. All GPS data and app settings stay in your browser. Nothing is sent to our servers.
    • @@ -59,7 +59,8 @@ export function showConsentModal(): Promise {
`; @@ -67,14 +68,43 @@ export function showConsentModal(): Promise { overlay.appendChild(panel); document.body.appendChild(overlay); + const acceptBtn = panel.querySelector('#consent-accept')!; + const body = panel.querySelector('#consent-body')!; + const hint = panel.querySelector('#consent-scroll-hint')!; + + // Gate the accept button on the user having scrolled to the bottom of the terms. + // Enable as soon as the bottom is reached (4px tolerance for sub-pixel rounding), + // or immediately if the terms are short enough not to scroll. Re-checked on resize + // so a rotate that makes the content fit also unlocks it. + const atBottom = (): boolean => + body.scrollTop + body.clientHeight >= body.scrollHeight - 4; + const unlock = (): void => { + acceptBtn.disabled = false; + hint.style.display = 'none'; + body.removeEventListener('scroll', onScrollOrResize); + window.removeEventListener('resize', onScrollOrResize); + }; + const onScrollOrResize = (): void => { + if (atBottom()) unlock(); + }; + + if (atBottom()) { + unlock(); + } else { + hint.style.display = 'block'; + body.addEventListener('scroll', onScrollOrResize, { passive: true }); + window.addEventListener('resize', onScrollOrResize); + } + function cleanup(accepted: boolean): void { + window.removeEventListener('resize', onScrollOrResize); overlay.remove(); if (accepted) recordConsent(); resolve(accepted); } - document.getElementById('consent-accept')!.addEventListener('click', () => cleanup(true)); - document.getElementById('consent-decline')!.addEventListener('click', () => cleanup(false)); + acceptBtn.addEventListener('click', () => cleanup(true)); + panel.querySelector('#consent-decline')!.addEventListener('click', () => cleanup(false)); overlay.addEventListener('click', (e) => { if (e.target === overlay) cleanup(false); }); @@ -87,7 +117,8 @@ export function showConsentModal(): Promise { }; document.addEventListener('keydown', onKey); - // Focus the accept button for keyboard accessibility - document.getElementById('consent-accept')!.focus(); + // Focus the scrollable terms so keyboard users can scroll to read (and thereby + // unlock the accept button, which starts disabled and can't take focus yet). + body.focus(); }); } diff --git a/src/style.css b/src/style.css index 77a46f5..8760639 100644 --- a/src/style.css +++ b/src/style.css @@ -1538,6 +1538,21 @@ body { height: 100%; width: 100%; padding: 0; margin: 0; } cursor: pointer; } +#consent-accept:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Shown (display:block via JS) only while the accept button is locked, i.e. when the + terms actually overflow and haven't been scrolled to the bottom yet. */ +#consent-scroll-hint { + display: none; + margin: 0 0 8px; + font-size: 12px; + color: #888; + text-align: center; +} + #consent-decline { padding: 8px 16px; font-size: 13px; From cb9d9b3eb6c76194e197b60d017220523102a26f Mon Sep 17 00:00:00 2001 From: Jason E Plumb Date: Fri, 5 Jun 2026 14:19:19 -0700 Subject: [PATCH 2/2] fix(consent): symmetric listener teardown + focus accept on unlock Address review on #226: - cleanup() now also removes the body scroll listener (symmetric with unlock), so decline-before-scroll tears down both listeners. - unlock() moves focus to the now-enabled accept button so a keyboard user who just scrolled to the bottom doesn't have to Tab to reach it. Co-Authored-By: Claude Opus 4.8 --- src/consent.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/consent.ts b/src/consent.ts index fc30585..b0419e4 100644 --- a/src/consent.ts +++ b/src/consent.ts @@ -83,6 +83,9 @@ export function showConsentModal(): Promise { hint.style.display = 'none'; body.removeEventListener('scroll', onScrollOrResize); window.removeEventListener('resize', onScrollOrResize); + // Move focus to the now-interactive button so a keyboard user who just scrolled + // to the bottom doesn't have to Tab forward to reach it. + acceptBtn.focus(); }; const onScrollOrResize = (): void => { if (atBottom()) unlock(); @@ -97,6 +100,9 @@ export function showConsentModal(): Promise { } function cleanup(accepted: boolean): void { + // Symmetric teardown — tear down both listeners regardless of which path closes + // the modal (e.g. decline-before-scroll leaves the scroll listener attached). + body.removeEventListener('scroll', onScrollOrResize); window.removeEventListener('resize', onScrollOrResize); overlay.remove(); if (accepted) recordConsent();