Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Navbar dropdown toggles have `role="link"`

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,188 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@Mittalnew arbeitet bereits daran.

Seit 26.10.2026.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
88/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
bootstrap, html, javascript, playwright
Bereich
accessibility, frontend

Rechercherichtung

Lies die drei im Bericht genannten Templates: src/resources/projects/website/templates/navitem.ejs, navitem-dropdown.ejs und navtools.ejs. Prüfe, wie jeder Dropdown-Schalter seine Rolle festlegt, und vergleiche den gerenderten Accessibility Tree mit der erwarteten Button-Rolle aus dem Bericht. Fertig ist die Arbeit, wenn alle drei Schalter die Button-Rolle bereitstellen und dabei den erweiterten Zustand beibehalten; das Issue enthält eine Navbar-Konfiguration zum Rendern und Überprüfen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Navbar menus (menu: on a nav item or a navbar tool) open with a toggle that has role="link". Screen readers announce the toggle as a link. But the control opens a menu and does not go to a page. This fails WCAG 4.1.2 Name, Role, Value (Level A).

Three templates write the role (navitem.ejs#L9, navitem-dropdown.ejs#L9, navtools.ejs#L29):

<a class="nav-link dropdown-toggle" href="#" id="nav-menu-guides" role="link"
   data-bs-toggle="dropdown" aria-expanded="false">

Commit 9143e2cab (1.5) changed role="menu" to role="link", to remove a Lighthouse warning about aria-expanded. role="menu" was also wrong, but role="button" is correct here. Bootstrap's navbar dropdown example uses role="button", and aria-expanded is valid on a button.

A possible fix: change role="link" to role="button" in the three templates. A <button> element is also correct, but it changes more CSS.

This was first reported in a comment on discussion #12644, tested with NVDA and JAWS.

Investigated with AI assistance, grounded in a local clone of quarto-cli.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  navbar:
    left:
      - text: Guides
        menu:
          - text: One
            href: index.qmd
          - text: Two
            href: index.qmd

index.qmd:

---
title: Home
---

Text.
  1. Render the site and open _site/index.html.
  2. Move to "Guides" with a screen reader, or examine it in the browser accessibility tree.
  3. Press Enter.

Actual behavior

  • The accessibility tree shows link "Guides" with URL #.
  • Enter opens the menu (aria-expanded changes to true). The page does not change.

Tested in Chromium with Playwright.

Expected behavior

The toggle has the button role, for example "Guides, button, collapsed". The aria-expanded state is announced with it.

Your environment

  • IDE: none (rendered with the CLI)
  • 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...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
476
Ø Merge
16 Std. 45 Min.
Gemergte PRs (30 T.)
117

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.