Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

revealjs tabset tabs get positive tabindex values

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#14,970 2 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
88/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript
Domaine
accessibility, frontend

Piste de recherche

Commencez par src/resources/formats/html/tabby/js/tabby.js autour des lignes 314-336 et reproduisez le problème avec l’exemple QMD revealjs fourni comportant trois diapositives. Vérifiez que les onglets des tabsets revealjs ne reçoivent plus de valeurs tabindex positives et que le focus du clavier suit l’ordre DOM de la diapositive visible.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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...
Langage dominant
JavaScript
Étoiles
6.1k
Forks
471
Merge moyen
21 h 50 min
PR mergées (30 j)
105

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.