fix SVG focus scrolling

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);

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);