Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Navbar dropdown toggles have `role="link"`

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,188 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
88/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
bootstrap, html, javascript, playwright
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Đọc ba template được nêu trong báo cáo: src/resources/projects/website/templates/navitem.ejs, navitem-dropdown.ejs và navtools.ejs. Kiểm tra cách mỗi nút bật/tắt menu thả xuống thiết lập role, rồi so sánh cây trợ năng được render với role button được mong đợi trong báo cáo. Hoàn tất khi cả ba nút đều hiển thị role button và vẫn giữ trạng thái mở rộng; issue cung cấp cấu hình navbar để render và xác minh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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...
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
471
Merge trung bình
16 giờ 41 phút
Pull request đã merge (30 ngày)
102

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.