From 3c99c75ad757e0a48d476a5c54eddfdceac88755 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 12:51:10 +0200
Subject: [PATCH] fix SVG focus scrolling

---
 .../src/components/board/advanced-focus/wheel.ts |  6 +++---
 e2e/board-advanced-interactions.spec.ts          | 16 +++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
index 285fb22ec..193fa5dde 100644
--- a/apps/nextjs/src/components/board/advanced-focus/wheel.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -1,18 +1,18 @@
-const isVerticalScrollContainer = (element: HTMLElement) => {
+const isVerticalScrollContainer = (element: Element) => {
   if (element.scrollHeight <= element.clientHeight) return false;
 
   const overflowY = getComputedStyle(element).overflowY;
   return overflowY === "auto" || overflowY === "scroll";
 };
 
-const canScrollVertically = (element: HTMLElement, delta: number) => {
+const canScrollVertically = (element: Element, delta: number) => {
   return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
 };
 
 export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null, delta: number) => {
   if (delta === 0) return false;
 
-  let current = target instanceof HTMLElement ? target : null;
+  let current = target instanceof Element ? target : null;
   let startedInScrollContainer = false;
   while (current && root.contains(current)) {
     const isCurrentScrollContainer = isVerticalScrollContainer(current);
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 0b3f12bbb..8ffd0c237 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -119,7 +119,7 @@ describe("Board advanced interactions", () => {
         const probe = document.createElement("div");
         probe.dataset.shiftScrollProbe = "true";
         probe.style.cssText = "height:80px;overflow-y:auto";
-        probe.innerHTML = '<div style="height:600px"></div>';
+        probe.innerHTML = '<svg data-shift-scroll-target="true"></svg><div style="height:600px"></div>';
         probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
 
@@ -139,12 +139,14 @@ describe("Board advanced interactions", () => {
       await scrollProbe.evaluate((element) => {
         element.scrollTop = 0;
       });
-      const lineEventCancelled = await scrollProbe.evaluate(
-        (element) =>
-          !element.dispatchEvent(
-            new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
-          ),
-      );
+      const lineEventCancelled = await scrollProbe
+        .locator("[data-shift-scroll-target='true']")
+        .evaluate(
+          (element) =>
+            !element.dispatchEvent(
+              new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
+            ),
+        );
       await page.keyboard.up("Shift");
       expect(lineEventCancelled).toBe(true);
       expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);