Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Navbar item with icon and text renders an unnamed role="img" icon

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,123 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
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript, yaml
Domaine
accessibility, frontend

Piste de recherche

Commencez par navicon.ejs, puis examinez son utilisation dans sidebaritem.ejs, navitem-dropdown.ejs et nav-footer-navitem.ejs pour comprendre comment les éléments avec texte sont distingués de ceux qui n’ont qu’une icône. Reproduisez le problème avec les fichiers _quarto.yml et index.qmd fournis, puis exécutez quarto render et la commande axe indiquée. Le travail est terminé lorsque les icônes accompagnées de texte sont décoratives et que le cas avec une icône seule conserve un nom accessible.

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

Description

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

A navbar item with both icon and text renders its icon as role="img" with no accessible name.
axe reports role-img-alt (WCAG 1.1.1) on every page.

The link text already names the link, so the icon is decorative.
There is no option to say so: icon takes only a string, and navicon.ejs always writes role="img".
The only attribute it passes on is the item's aria-label, which goes on the icon, not the link.
The link then reads its name twice, for example "external link Blog".

navicon.ejs is also used by sidebaritem.ejs, navitem-dropdown.ejs and nav-footer-navitem.ejs, so sidebar, menu and footer items with an icon and text behave the same way.

  • #15038 covers icon-only navbar links, which is a different case.
Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: "Navbar icon"
  navbar:
    left:
      - text: "Overview"
        icon: house
        href: index.qmd

index.qmd:

---
title: "Home"
---

Home page.

Then:

quarto render
quarto call axe _site --viewports 1440x900
jq -r '.findings[].signature' _axe-checks/findings.json
Actual behavior
<a class="nav-link active" href="./index.html" aria-current="page"> <i class="bi bi-house" role="img"> </i> <span class="menu-text">Overview</span></a>

findings.json lists role-img-alt :: i (plus region :: #quarto-skip-link, which is unrelated).

Expected behavior

When the item has text, the icon is decorative: <i class="bi bi-house" aria-hidden="true"></i>.
role="img" with a name is only needed for icon-only items, and the item's aria-label names the link rather than the icon.

Your environment
  • IDE: none, command line.
  • OS: macOS 27.0.
  • The same output comes from a current development build (99.9.9).
Quarto check output
Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project root: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/repro-sidebar
      Project config: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/repro-sidebar/_quarto.yml

[✓] 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: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/quarto-1.11.6/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Checking basic markdown render....OK
ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/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.13
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-web/.venv/bin/python3
      Jupyter: 5.9.1
      Kernels: julia-1.12, python3
[IPKernelApp] WARNING | Kernel is running over TCP without encryption. All communication (including code and outputs) is sent in plain text and is susceptible to eavesdropping. Use IPC transport or launch with kernel manager-provisioned CurveZMQ keys to enable transport encryption.

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...
Langage dominant
JavaScript
Étoiles
6.1k
Forks
471
Merge moyen
22 h 12 min
PR mergées (30 j)
103

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.