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

オープン
  • 何か問題がありますか？
#15,191 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, scss
領域
accessibility, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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...
主要言語
JavaScript
スター
6.1k
フォーク
478
平均マージ
17時間 26分
マージ済み PR（30日）
126

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。