Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Navbar dropdown toggles have `role="link"`

Open Beginner friendly
  • Is something wrong?
#15,188 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Mittalnew is already working on this.

Since Oct 26, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
bootstrap, html, javascript, playwright
Domain
accessibility, frontend

Research direction

Read the three templates named in the report: src/resources/projects/website/templates/navitem.ejs, navitem-dropdown.ejs, and navtools.ejs. Check how each dropdown toggle sets its role and compare the rendered accessibility tree with the reported expected button role. Done when all three toggles expose the button role while retaining the expanded state; the issue gives a navbar configuration to render and verify.

Written by the indexing model from the issue text.

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

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...
Dominant language
JavaScript
Stars
6.1k
Forks
471
Avg merge
16h 57m
Merged PRs (30d)
102

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.