fix(cookie-banner): stop blocking pointer events on the rest of the page (#397)

JohnMcLear · claude · web-flow · commit 62d7e9497316 · 2026-05-06T20:50:46.000+08:00
The cookie consent banner is rendered with a Radix `Dialog.Root`, which
defaults to `modal=true`. In modal mode Radix's `DismissableLayer` sets
`document.body.style.pointerEvents = "none"` so that nothing outside the
dialog can be clicked. With no `Dialog.Overlay` rendered there's no
visual hint that anything is "over" the page — but every link, button
and form on the home page silently stops responding to clicks until the
visitor accepts or declines cookies. First-time visitors on
etherpad.org saw a top bar that didn't navigate and a Links section
where none of the external anchors fired.

Two changes to `src/components/CookieBanner.tsx`:

- Pass `modal={false}` on `Dialog.Root`. The banner is informational,
  not a focus-trapping modal, so there's no reason to disable pointer
  events on the rest of the document.
- Drop the `pointer-events-none` Tailwind class from `Dialog.Content`.
  It's been a no-op so far because Radix injects an inline
  `style={{pointerEvents: 'auto'}}` on the layer wrapper that wins
  against className-based rules — but with `modal={false}` that inline
  override is removed, and the inherited `pointer-events: none` would
  start propagating into the Accept / Decline buttons themselves and
  prevent the banner from ever being dismissed.

Add Playwright with three regression tests that load the page with no
`cookiesAccepted` cookie set (the exact state a fresh visitor sees) and
assert that:

- the top-bar "Links" item scrolls to `#links` while the banner is
  shown,
- the Accept button dismisses the banner,
- the Blog anchor in the Links section opens its popup.

All three failed against the previous code (Playwright reported
`&lt;html lang="en"&gt;… intercepts pointer events`, exactly the body-level
disable) and pass with the fix.

Co-authored-by: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,6 @@ dist/
 package-lock.json
 .next/
 .idea/
+test-results/
+playwright-report/
+playwright/.cache/
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -36,6 +37,7 @@
     "timeago": "^1.6.7"
   },
   "devDependencies": {
+    "@playwright/test": "^1.59.1",
     "@saber2pr/types-github-api": "^0.0.9",
     "@types/node": "^24.3.0",
     "@types/react": "^19.2.14",
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const PORT = 3033
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  use: {
+    baseURL: `http://localhost:${PORT}`,
+    trace: 'retain-on-failure',
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+  ],
+  webServer: {
+    command: `pnpm dev --port ${PORT}`,
+    url: `http://localhost:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
@@ -36,10 +36,15 @@ export const CookieBanner = ()=>{
             }
     }, []);
 
+    // modal={false} keeps the rest of the page interactive while the
+    // banner is shown. Without it, Radix sets `pointer-events: none` on
+    // <body>, which silently disables every link/button on the page until
+    // the user clicks Accept or Decline.
     return <Dialog.Root
     open={cookiesAccepted === undefined}
+    modal={false}
     ><Dialog.Portal>
-        <Dialog.Content className="sticky bottom-0 bg-gray-800 p-5 text-white grid grid-cols-[auto_1fr_auto] pointer-events-none">
+        <Dialog.Content className="sticky bottom-0 bg-gray-800 p-5 text-white grid grid-cols-[auto_1fr_auto]">
             <Dialog.Title></Dialog.Title>
             <span className="self-center">This page uses Google analytics to track page visits.
                 Are you okay with that?</span>
diff --git a/tests/cookie-banner.spec.ts b/tests/cookie-banner.spec.ts
@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('cookie banner does not block page interaction', () => {
+  test.beforeEach(async ({ context }) => {
+    // Force first-visit state: no cookiesAccepted cookie, so the consent
+    // banner is rendered.
+    await context.clearCookies()
+  })
+
+  test('top bar "Links" anchor scrolls to the Links section while banner is shown', async ({ page }) => {
+    await page.goto('/')
+
+    // Sanity check: the cookie banner is open.
+    await expect(page.getByRole('button', { name: 'Accept cookies' })).toBeVisible()
+
+    // Click the "Links" item in the top bar. The Header's onClick handler
+    // calls router.push('/#links') and scrolls to #links. If the modal
+    // dialog is blocking pointer events, the click never fires and the URL
+    // stays at "/". (The nav anchors have no href, so we locate by text.)
+    await page.locator('#nav').getByText('Links', { exact: true }).click()
+
+    await expect(page).toHaveURL(/#links$/)
+    await expect(page.locator('#links')).toBeInViewport()
+  })
+
+  test('cookie banner buttons are clickable', async ({ page }) => {
+    await page.goto('/')
+
+    const acceptButton = page.getByRole('button', { name: 'Accept cookies' })
+    await expect(acceptButton).toBeVisible()
+
+    // pointer-events:none on Dialog.Content inherits to children, so the
+    // banner buttons themselves stop receiving clicks. Tapping Accept must
+    // dismiss the banner.
+    await acceptButton.click()
+
+    await expect(acceptButton).toBeHidden()
+  })
+
+  test('Links section anchors fire clicks while banner is shown', async ({ page, context }) => {
+    await page.goto('/')
+    await expect(page.getByRole('button', { name: 'Accept cookies' })).toBeVisible()
+
+    await page.locator('#links').scrollIntoViewIfNeeded()
+
+    // The Blog anchor opens in a new tab (target="_blank"). If pointer
+    // events are blocked we never get a popup event.
+    const blogLink = page.getByRole('link', { name: 'Blog' })
+    const popupPromise = context.waitForEvent('page', { timeout: 5_000 })
+    await blogLink.click()
+    const popup = await popupPromise
+    expect(popup.url()).toContain('blog.etherpad.org')
+    await popup.close()
+  })
+})
