Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Navbar dropdown toggles have `role="link"`

未关闭 适合新手
  • 哪里不对？
#15,188 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@Mittalnew 已经在做这个了。

开始于 2026年10月26日。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
88/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
bootstrap, html, javascript, playwright
领域
accessibility, frontend

调研方向

阅读报告中提到的三个模板：src/resources/projects/website/templates/navitem.ejs、navitem-dropdown.ejs 和 navtools.ejs。检查每个下拉菜单切换控件如何设置 role，并将渲染后的无障碍树与报告中预期的按钮 role 进行比较。完成标准是三个切换控件都暴露按钮 role，同时保留展开状态；issue 提供了用于渲染和验证的 navbar 配置。

由索引模型根据 Issue 内容生成。

描述

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...
主要语言
JavaScript
星标
6.1k
派生
476
平均合并
16 小时 57 分钟
30 天内合并 PR
102

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

quarto-dev/quarto-cli 的其他 Issue

查看 quarto-dev/quarto-cli 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。