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

Offen
  • Stimmt etwas nicht?
#15,191 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
478
Ø Merge
17 Std. 26 Min.
Gemergte PRs (30 T.)
126

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.