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

Selected revealjs tab fails contrast on narrow screens

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#14,963 0 commentaires 0 réactions 0 personnes assignées 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
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
sass
Domaine
accessibility, frontend

Piste de recherche

Commencez par les lignes 39-49 de src/resources/formats/html/_quarto-rules-tabby.scss et les définitions de couleurs de revealjs aux lignes 81 et 94 de src/resources/formats/revealjs/quarto.scss. Effectuez le rendu de l’exemple panel-tabset fourni dans un viewport de 320px, puis vérifiez que l’onglet sélectionné atteint au moins un contraste de 3:1, y compris avec axe sur l’exemple de tabset revealjs.

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

Description

accessibility revealjs themes

I have:

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

Bug description

Below 30em, the selected tab gets background-color: $tabset-border-color (_quarto-rules-tabby.scss L39-L49). In revealjs, $tabset-border-color is $code-block-border-color, which is lighten($body-color, 60%) = #bbbbbb (L81, L94).

The tab text is $link-color #2a76dd. On #bbbbbb, the contrast is 2.31:1. The text is 40px, so WCAG 2.2 SC 1.4.3 requires 3:1. At wide viewports the selected tab is transparent, and it passes.

axe reports this on the quarto.org tabset example.

Steps to reproduce

---
format: revealjs
---

## Slide

::: {.panel-tabset}

### Tab A

Content A

### Tab B

Content B

:::
  1. Render the file.
  2. Open it in a 320px-wide viewport.
  3. Measure the selected tab text against its background.

Actual behavior

The selected tab text is #2a76dd on #bbbbbb, at 2.31:1.

Blue Tab A text on grey background

Expected behavior

The selected tab gives at least 3:1. For example, use a lighter fill, or use $body-color text on the fill (#222 on #bbb is 8.29:1).

AI helped investigate this issue. The investigation used a local clone of quarto-cli (see "Using AI tools to investigate" in CONTRIBUTING.md).

Your environment

  • IDE: Positron 1.134.0
  • 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
16 h 41 min
PR mergées (30 j)
102

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.