Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

revealjs tabset tabs get positive tabindex values

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#14,970 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
88/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript
Bereich
accessibility, frontend

Rechercherichtung

Beginne mit src/resources/formats/html/tabby/js/tabby.js etwa in den Zeilen 314–336 und reproduziere das Problem anhand des bereitgestellten revealjs-QMD-Beispiels mit drei Folien. Überprüfe, dass revealjs-Tabset-Tabs keine positiven tabindex-Werte mehr erhalten und dass der Tastaturfokus der DOM-Reihenfolge der sichtbaren Folie folgt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accessibility revealjs

I have:

  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide

Bug description

In a revealjs deck, tabset tabs get tabindex="1", "2", and so on. Positive values put the tabs before all other content in the Tab order. As a result, on the 2 slides before a tabset, the first Tab moves focus to a tab on a slide that is not visible. This breaks WCAG 2.2 SC 2.4.3 Focus Order.

  • Cause: when body.reveal-viewport is present, Quarto's copy of tabby.js gives each tab, and each focusable element in each tab panel, the next positive tabindex (tabby.js#L314-L336, from a174f59).
  • Impact: keyboard users lose focus to a tab on a slide that is not visible. There is no visible focus and no slide change.
  • Fix: use tabindex="0" in revealjs too (the non-reveal branch), or a roving tabindex (0 on the selected tab, -1 on the others).

Related: #14795 (off-screen slides stay in the tab order). Positive tabindex makes that problem worse, because the tabs come before the content of the current slide.

AI note: I used an AI assistant to investigate. Its findings are grounded in a local clone of quarto-cli.

Steps to reproduce

---
format: revealjs
---

## Slide 1

Plain slide.

## Slide 2

Plain slide.

## Slide 3

::: {.panel-tabset}

### Tab A

Content A

### Tab B

Content B

:::
  1. Render the file and open it in Chrome.
  2. On slide 1, press Tab.
  3. Go to slide 2, then press Tab.

Actual behavior

  • On slide 1, focus moves to "Tab A" (tabindex="1") on slide 3, which is not visible.
  • On slide 2, focus moves to "Tab B" (tabindex="2") on slide 3, which is not visible.
  • The slide does not change, and nothing on screen shows focus.

Expected behavior

Focus moves in DOM order to content on the current slide. The tabs have tabindex="0" (or -1 for tabs that are not selected), as they do in HTML output.

Your environment

  • IDE: none (rendered with the CLI, tested in Chrome 154.0.8037.58)
  • OS: macOS 26.6.2 (build 25G83)

Quarto check output

Quarto 1.11.4
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.4
      Path: /Applications/quarto/bin
[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2
[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026
[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115
[✓] Checking basic markdown render....OK
[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking Julia installation...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
471
Ø Merge
22 Std. 56 Min.
Gemergte PRs (30 T.)
98

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.