Activate tabs with search matches when page loads with ?q= parameter

After highlight() adds <mark> tags to matching text, the new
activateTabsWithMatches() function detects marks inside inactive
Bootstrap tab panes and activates the first one. If the already-active
tab in a tabset contains a match, no switch occurs.

Includes test fixture for manual and future Playwright testing.

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

Author: cderv

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

@@ -47,6 +47,9 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     // perform any highlighting
     highlight(escapeRegExp(query), mainEl);
 
+    // activate tabs that contain highlighted matches
+    activateTabsWithMatches(mainEl);
+
     // fix up the URL to remove the q query param
     const replacementUrl = new URL(window.location);
     replacementUrl.searchParams.delete(kQueryArg);
@@ -1112,6 +1115,47 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
 }
 
+// After search highlighting, activate any tabs whose panes contain <mark> matches.
+// This ensures that search results inside inactive Bootstrap tabs become visible.
+// Only switches tabs when no match is already visible in the active tab of that tabset.
+function activateTabsWithMatches(mainEl) {
+  if (typeof bootstrap === "undefined") return;
+
+  const marks = mainEl.querySelectorAll("mark");
+  if (marks.length === 0) return;
+
+  // Group marks by their parent tabset (.tab-content container)
+  const tabsetMatches = new Map();
+  for (const mark of marks) {
+    const pane = mark.closest(".tab-pane");
+    if (!pane) continue;
+    const tabContent = pane.parentElement;
+    if (!tabContent || !tabContent.classList.contains("tab-content")) continue;
+
+    if (!tabsetMatches.has(tabContent)) {
+      tabsetMatches.set(tabContent, { activeHasMatch: false, firstInactivePane: null });
+    }
+    const info = tabsetMatches.get(tabContent);
+    if (pane.classList.contains("active")) {
+      info.activeHasMatch = true;
+    } else if (!info.firstInactivePane) {
+      info.firstInactivePane = pane;
+    }
+  }
+
+  // For each tabset, only activate if the active tab has no match
+  for (const [, info] of tabsetMatches) {
+    if (info.activeHasMatch || !info.firstInactivePane) continue;
+
+    const tabButton = mainEl.querySelector(
+      `[data-bs-toggle="tab"][data-bs-target="#${info.firstInactivePane.id}"]`
+    );
+    if (tabButton) {
+      new bootstrap.Tab(tabButton).show();
+    }
+  }
+}
+
 // highlight matches
 function highlight(term, el) {
   const termRegex = new RegExp(term, "ig");

tests/docs/playwright/html/search-tabsets/.gitignore

@@ -0,0 +1,3 @@
+/.quarto/
+/_site/
+**/*.quarto_ipynb

tests/docs/playwright/html/search-tabsets/_quarto.yml

@@ -0,0 +1,9 @@
+project:
+  type: website
+website:
+  title: "Search Tab Test"
+  search: true
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home

tests/docs/playwright/html/search-tabsets/index.qmd

@@ -0,0 +1,49 @@
+---
+title: "Search Tab Test"
+---
+
+## Plain Section
+
+This section contains epsilon-no-tabs content outside of any tabset.
+
+## Ungrouped Tabset
+
+::: {.panel-tabset}
+
+### Tab Alpha
+
+This tab contains alpha-visible-content that is in the default active tab.
+
+### Tab Beta
+
+This tab contains beta-unique-search-term that is only in this inactive tab.
+
+:::
+
+## Both Tabs Match
+
+::: {.panel-tabset}
+
+### R
+
+This tab contains gamma-both-tabs content in the active R tab.
+
+### Python
+
+This tab also contains gamma-both-tabs content in the inactive Python tab.
+
+:::
+
+## Grouped Tabset
+
+::: {.panel-tabset group="language"}
+
+### R
+
+This tab contains delta-r-only-term that is only in the R tab.
+
+### Python
+
+This tab contains python-only-content in the Python tab.
+
+:::