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

Aberta
  • Algo errado?
#15,191 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
68/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
javascript, scss
Domínio
accessibility, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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...
Linguagem predominante
JavaScript
Estrelas
6.1k
Forks
478
Merge médio
17h 7min
PRs com merge (30d)
112

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.