Current page in the sidebar and navbar is shown only by color

Ouverte
  • Quelque chose ne va pas ?
#15,191 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é
3/5
Temps estimé
1-2 jours
Accessibilité débutants
68/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript, scss
Domaine
accessibility, frontend

Piste de recherche

Start by tracing how the website sidebar and navbar mark the current page, then find the shared styles or theme rules that control those active links. Check the built-in themes and the reported related issues, especially #11481, while deciding where a non-color cue can be applied consistently. Done when current-page links have a visible non-color cue in both locations across the built-in themes.

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

Description

accessibility enhancement themes website-navigation

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 website, color is the only cue that marks the link to the current page, in the sidebar and in the navbar. This is true in all built-in themes, including the default and cosmo (the quarto.org theme).

A color change passes WCAG 1.4.1 Use of Color (Level A) only if the two colors have a contrast of 3:1 or more (Understanding 1.4.1).

Suggested fix: add a cue that is not color, for example a weight change, an underline, or a left border on the sidebar link. Each theme sets its own link colors, so a contrast fix must be repeated and tested in every theme. A non-color cue is one change that works in all themes.

Workaround: authors can add a cue in a custom SCSS file, for example theme: [cosmo, custom.scss]:

/*-- scss:rules --*/

// Sidebar: bold
.sidebar-navigation .sidebar-link.active {
  font-weight: 600;
}

// Navbar: an underline
.navbar .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

On a site with a navbar and a sidebar, the navbar part of this workaround can show the wrong link: #11481.

The markup part of this problem (no aria-current in the sidebar) is #15190.

Investigated with AI assistance, grounded in a local clone of quarto-cli.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: Active page
  navbar:
    left:
      - index.qmd
      - about.qmd
  sidebar:
    contents:
      - index.qmd
      - about.qmd

index.qmd:

---
title: Home
---

Home page.

about.qmd:

---
title: About
---

About page.
  1. Render the site and open _site/index.html in a browser wider than the sidebar breakpoint.
  2. Compare "Home" with "About" in the navbar and in the sidebar.

Actual behavior

"Home" differs from "About" only in color, in both places. In the default theme, the navbar links look the same.

Expected behavior

In all built-in themes, the current page link in the sidebar and in the navbar has a visual cue that is not color, or a contrast of 3:1 or more with the other links.

Your environment

  • IDE: none (rendered from the command line)
  • OS: macOS 27.0.1 (build 26A434)

Quarto check output

Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] 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.6
      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
478
Merge moyen
17 h 26 min
PR mergées (30 j)
126

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.