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

Đang mở
  • Có gì không ổn?
#15,191 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, scss
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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...
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 26 phút
Pull request đã merge (30 ngày)
126

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.