Tabsets aren't tabbing as expected

[nathanj3]

Bug description

Tabsets don't seem to be tabbable in the current version of Quarto (which is a problem for accessibility). I found an older issue that mentioned some inconsistency but stated that the tabs in the tabset documentation were working as expected. However, when I check the tabset documentation, it has the same issue as in my minimal example: Tab navigation seems to ignore the tabsets and their content entirely.

Steps to reproduce

# Title

::: {.panel-tabset}

## First tab

Text goes here

## Second tab

Other text might go here

:::

Expected behavior

Tabsets should be tab navigable, which is a feature in Bootstrap (here's another example from an external site),

Actual behavior

Tab navigation skips the tabset.

Your environment

• IDE: RStudio 2024.04.2 Build 764, "Chocolate Cosmos" Release (e4392fc9, 2024-06-05) for windows
• R version 4.4.1 (2024-06-14 ucrt) -- "Race for Your Life"
• Windows 10
• I tried using both Firefox 127.0.1 (32-bit) and Chrome (Version 126.0.6478.127) and the issue was present in both browsers.

Quarto check output

Microsoft Windows [Version 10.0.19045.4529]
(c) Microsoft Corporation. All rights reserved.

Z:\Qualtrics\QualtricsBook>quarto check
Quarto 1.5.53
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.5.53
      Path: C:\Users\[redacted]\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: Installation From Path
      Path: C:\texlive\2023\bin\windows
      Version: 2023

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.4.1
      Path: C:/PROGRA~1/R/R-44~1.1
      LibPaths:
        - C:/Users/[redacted]/AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.1/library
      knitr: 1.46
      rmarkdown: 2.26

[>] Checking Knitr engine render......OK

[cscheid]

Bug description

Tabsets don't seem to be tabbable in the current version of Quarto (which is a problem for accessibility). I found an older issue that mentioned some inconsistency but stated that the tabs in the tabset documentation were working as expected.

This is admittedly confusing because of the "tabset" name.

But, just to clarify, our docs don't say anything about "tabset navigation" in the sense of hitting the "tab" key. I agree our "tab-key navigation" needs improvement, but our documentation doesn't currently promise that.

[glin]

+1 here, and I would consider it an accessibility bug in that Tabset Panels aren't usable by keyboards or screen readers at all right now. The fix could be fairly straightforward from a quick look at the tabset html though.

The Tabset tabs use anchor tags which need an href attribute to be accessible. If I manually add an empty href="", the tabs work as expected - you can tab-navigate to the tabset and then switch tabs using arrow keys. There already seems to be accessible markup and JavaScript for making the tabsets keyboard and screen reader usable. The href could optionally be an actual #anchor link to the tabbed content.

<a
+ href=""
  class="nav-link active"
  id="tabset-1-1-tab"
  data-bs-toggle="tab"
  data-bs-target="#tabset-1-1"
  role="tab"
  aria-controls="tabset-1-1"
  aria-selected="true"
  >Plot</a>

Alternatively, as the Bootstrap docs recommend, a <button> could work better than an anchor, as it'll automatically have keyboard support, e.g.:

-<a
+<button
  class="nav-link active"
  id="tabset-1-1-tab"
  data-bs-toggle="tab"
  data-bs-target="#tabset-1-1"
  role="tab"
  aria-controls="tabset-1-1"
  aria-selected="true"
-  >Plot</a>
+  >Plot</button>

For expected behavior, here's another example I found in the Bootstrap docs: https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior

• Tabset Panels should be navigable when pressing the Tab key. The first tab should be visibly focused
• Once a tab is focused, other tabs should be switchable using arrow keys (this already seems to work, but I couldn't verify it when manually editing the tabs to use <button>s)
• Should be able to navigate out of the Tabset Panel from any tab using the Tab key (this already seems to work)

[srvanderplas]

This is an issue that I'm concerned with because it causes most of my content to fail WCAG2.1 checks. Quarto should, by default, produce documents which are at least minimally compliant with accessibility standards wherever possible.

[cscheid]

@srvanderplas Thanks for the feedback. Can you share what tool you're using to produce the error, and the specific error being reported? It's hard for us to do something about the problem without any information besides "fails the check".

(As a minor point, I think "are [not] at least minimally compliant" is an unfair description of Quarto's a11y behavior.)

One problem I can see is that in our quarto preview functionality, we are using tabster, Microsoft's own open-source tool for keyboard navigation in html tabs. And tabster's authors specifically claim that one of the warnings produced by the tools is a false positive.

As a result, in our own internal checks, we are following Microsoft's guidance and removing tabster's dummy elements. See src/resources/formats/html/axe/axe-check.js.

We really do want to help with a11y, and we really do work on it. But we also really do need requests that provide info we can act on!

[cscheid]

To expand further -

If I don't use quarto preview for navigating the pages (instead calling quarto publish or quarto render and a local server), then even if I remove that tabster exclusion from our axe-core check, I get no accessibility violation reports.

(The upshot is that I really do need to know which specific tool is being used to check for violations, and unfortunately we're blocked on helping until we know more.)