Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

a11y: prev/next page links and title breadcrumbs use `$text-muted` and fail contrast on dark themes

Abierto Apto para principiantes
  • ¿Algo no está bien?
#15,175 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
sass
Área
accessibility

Línea de trabajo

Empieza por las dos ubicaciones citadas en el issue en src/resources/projects/website/navigation/quarto-nav.scss: las líneas 495–504 para la ruta de navegación del título y 801–806 para la navegación de páginas. Comprueba cómo usa la barra lateral las funciones auxiliares de contraste de Quarto; después, renderiza la reproducción proporcionada con los temas oscuros integrados y ejecuta axe-core. El trabajo estará terminado cuando ambos elementos alcancen un contraste de 4.5:1 en todos los temas integrados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

accessibility bug
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

The previous and next page links, and the last item of the title breadcrumb, are coloured with $text-muted.
On several of the built-in dark themes that colour is too faint against the page, and axe-core reports color-contrast (serious, WCAG 2.2 SC 1.4.3).

The page navigation links get the colour here:

The last item of the title breadcrumb gets it here:

Ratios axe-core reports for a site with a docked sidebar, bread-crumbs: true and page-navigation: true, one theme at a time:

Theme Prev/next link text Last breadcrumb in the title block
default passes passes
darkly 3.39:1 2.10:1
cyborg 4.32:1 1.45:1
slate 3.03:1 not measurable
superhero 3.34:1 1.86:1 and 2.57:1
solar 3.20:1 2.45:1 and 3.64:1

With darkly, the prev/next text is #6c757d on #222222.

The last breadcrumb item with darkly:

The title breadcrumb Section > Page b on a dark grey bar: Page b is dim grey and hard to read.

The previous and next page links with darkly:

Previous and next page links, Page a and Page c, in dim grey on the dark page.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: t
  bread-crumbs: true
  page-navigation: true
  sidebar:
    style: docked
    contents:
      - index.qmd
      - section: Section
        contents:
          - a.qmd
          - b.qmd
          - c.qmd
format:
  html:
    theme: darkly

Each page is a .qmd with a title and a line of text.
Render the project, open b.html, and run axe-core on it, for example with the axe.min.js that ships with Quarto.

Actual behavior

axe-core reports color-contrast on the Page a and Page c links at the bottom of b.html, and on the last item of the breadcrumb above the title, with the ratios in the table above.

Expected behavior

Both elements keep 4.5:1 against their background on every built-in theme, for example by deriving the colour with the contrast helpers that Quarto already uses for the sidebar.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] 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 Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Lenguaje dominante
JavaScript
Estrellas
6.1k
Forks
471
Merge medio
17 h 35 min
PR fusionados (30 d)
107

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.