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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,175 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
sass
Domaine
accessibility

Piste de recherche

Commencez par les deux emplacements cités dans l’issue dans src/resources/projects/website/navigation/quarto-nav.scss : les lignes 495–504 pour le fil d’Ariane du titre et 801–806 pour la navigation entre les pages. Vérifiez comment la barre latérale utilise les fonctions d’aide au contraste de Quarto, puis générez la reproduction fournie avec les thèmes sombres intégrés et exécutez axe-core. Le travail est terminé lorsque les deux éléments atteignent un contraste de 4.5:1 avec chaque thème intégré.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
JavaScript
Étoiles
6.1k
Forks
478
Merge moyen
17 h 7 min
PR mergées (30 j)
112

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.