Merge pull request #13256 from quarto-dev/glin-fix-tabs

a11y: fix keyboard navigation for tabset panels in websites when using an HTML theme

Author: cscheid

news/changelog-1.8.md

@@ -67,6 +67,7 @@ All changes included in 1.8:
 
 ### `website`
 
+- ([#10284](https://github.com/quarto-dev/quarto-cli/issues/10284)): a11y - Fix keyboard navigation for tabset panels when using an HTML theme. Tabs now properly receive keyboard focus.
 - ([#12551](https://github.com/quarto-dev/quarto-cli/pull/12551)): Improve warning issued when `aliases` would overwrite an existing document.
 - ([#12616](https://github.com/quarto-dev/quarto-cli/issues/12616)): find SVG images in image discovery for listings.
 - ([#12693](https://github.com/quarto-dev/quarto-cli/issues/12693)): Prevent resource exhaustion on large websites by serializing `NotebookContext` information to file instead of the environment.

src/resources/filters/customnodes/panel-tabset.lua

@@ -286,7 +286,7 @@ function bootstrapTabs()
         active = " active"
         selected = "true"
       end
-      return 'class="nav-link' .. active .. '" id="' .. tablinkid .. '" data-bs-toggle="tab" data-bs-target="#' .. tabid .. '" role="tab" aria-controls="' .. tabid .. '" aria-selected="' .. selected .. '"'
+      return 'class="nav-link' .. active .. '" id="' .. tablinkid .. '" data-bs-toggle="tab" data-bs-target="#' .. tabid .. '" role="tab" aria-controls="' .. tabid .. '" aria-selected="' .. selected .. '" href=""'
     end,
     paneAttribs = function(tabid, isActive, headingAttribs)
       local tablinkid = tabid .. "-tab"

tests/docs/smoke-all/2025/08/20/issue-13233/.gitignore

@@ -0,0 +1 @@
+/.quarto/

tests/docs/smoke-all/2025/08/20/issue-13233/_quarto.yml

@@ -0,0 +1,21 @@
+project:
+  type: website
+
+website:
+  title: "issue-13233"
+  navbar:
+    left:
+      - href: index.qmd
+        text: Home
+      - about.qmd
+
+format:
+  html:
+    theme:
+      - cosmo
+      - brand
+    css: styles.css
+    toc: true
+
+
+

tests/docs/smoke-all/2025/08/20/issue-13233/about.qmd

@@ -0,0 +1,5 @@
+---
+title: "About"
+---
+
+About this site

tests/docs/smoke-all/2025/08/20/issue-13233/index.qmd

@@ -0,0 +1,21 @@
+---
+title: "mysite"
+_quarto:
+  tests:
+    html:
+      ensureFileRegexMatches:
+        - ['href=""']
+---
+
+::: {.panel-tabset}
+
+## First tab
+
+1. Press Tab. "First tab" should be focused.
+2. Press Right Arrow. "Second tab" should now be active and focused.
+
+## Second tab
+
+Other text might go here
+
+:::

tests/docs/smoke-all/2025/08/20/issue-13233/styles.css

@@ -0,0 +1 @@
+/* css styles */