Scroll to first visible search match after tab activation

After activating tabs that contain search matches, scroll the first
visible <mark> element into view. This completes the UX: the user
lands on the page with the correct tab open and the match centered
in the viewport.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: cderv

src/resources/projects/website/search/quarto-search.js

@@ -56,6 +56,9 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     window.addEventListener("pageshow", function (event) {
       if (!event.persisted) {
         activateTabsWithMatches(mainEl);
+        // Let the browser settle layout after Bootstrap tab transitions
+        // before calculating scroll position.
+        requestAnimationFrame(() => scrollToFirstMatch(mainEl));
       }
     }, { once: true });
 
@@ -1194,6 +1197,29 @@ function ancestorCount(el, stopAt) {
   return count;
 }
 
+// After tab activation, scroll to the first visible search match so the user
+// sees the highlighted result without manually scrolling.
+// Only checks tab-pane visibility (not collapsed callouts, details/summary, etc.)
+// since this runs specifically after tab activation for search results.
+function scrollToFirstMatch(mainEl) {
+  const marks = mainEl.querySelectorAll("mark");
+  for (const mark of marks) {
+    let hidden = false;
+    let el = mark.parentElement;
+    while (el && el !== mainEl) {
+      if (el.classList.contains("tab-pane") && !el.classList.contains("active")) {
+        hidden = true;
+        break;
+      }
+      el = el.parentElement;
+    }
+    if (!hidden) {
+      mark.scrollIntoView({ block: "center" });
+      return;
+    }
+  }
+}
+
 // highlight matches
 function highlight(term, el) {
   const termRegex = new RegExp(term, "ig");

tests/integration/playwright/package.json

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "@playwright/test": "^1.28.1"
+    "@playwright/test": "^1.31.0"
   },
   "scripts": {}
 }

tests/integration/playwright/tests/html-search-tabsets.spec.ts

@@ -103,3 +103,14 @@ test('Search activation overrides localStorage tab preference', async ({ page })
   await expect(marks).toHaveCount(1);
   expect(await visibleMarkCount(page)).toBe(1);
 });
+
+test('Search scrolls to first visible match', async ({ page }) => {
+  // Use small viewport so the nested tabset at the bottom is below the fold,
+  // ensuring the test actually exercises scrollIntoView (not trivially passing).
+  await page.setViewportSize({ width: 800, height: 400 });
+  await page.goto(`${BASE}?q=nested-inner-only-term`);
+
+  const mark = page.locator('mark').first();
+  await expect(mark).toBeVisible({ timeout: 5000 });
+  await expect(mark).toBeInViewport();
+});