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

Dashboard: collapsed mobile navbar menu stays open after selecting a page

Đang mở Phù hợp với người mới
#14,689 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

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
86/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu trong src/resources/formats/dashboard/quarto-dashboard.js, khoảng các dòng 125-142, nơi Quarto gắn các trình xử lý nhấp chuột vào các liên kết trang của navbar. Tái hiện dashboard trong một viewport hẹp và xác minh rằng việc chọn một trang sẽ đóng collapse, xóa trạng thái hiển thị của nó và đặt giá trị aria-expanded của toggler thành false.

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

Mô tả

accessibility bug dashboards

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

In a multi-page format: dashboard at a narrow (mobile) viewport, selecting a page from the collapsed navbar menu switches the page but never closes the menu. This breaks the disclosure pattern users expect (and get from every Quarto website navbar): the open menu eats a large share of a small screen, and keyboard and screen-reader users must go back and dismiss a menu they have already used before reaching the content they selected.

In the default layout the open menu pushes content down; but if the header is pinned via custom CSS, the stuck-open menu overlays the page when scrolled and can leave a keyboard-focused element entirely hidden beneath it (WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum)).

Dashboard pages are Bootstrap tabs in the same document, so unlike a website navbar there is no page load to reset the menu — and neither Bootstrap nor Quarto closes it. Quarto already attaches a click handler to every navbar page link (quarto-dashboard.js#L125-L142); hiding the collapse there (bootstrap.Collapse.getOrCreateInstance(el, { toggle: false }).hide()) would keep the show class and ARIA state consistent.

An AI assistant helped investigate, grounded in a local clone of quarto-cli (per CONTRIBUTING.md).

Steps to reproduce

---
title: "Repro: mobile menu stays open"
format: dashboard
---

# Page One

## Row

Content of page one.

{{< lipsum 1 >}}

# Page Two

## Row

Content of page two.

{{< lipsum 1 >}}
  1. quarto render the document above and open the resulting HTML in a browser.
  2. Narrow the window until the navbar collapses behind the hamburger toggler (below 576 px, or use responsive/mobile emulation in devtools, e.g. 390×844).
  3. Click the toggler to open the menu.
  4. Click Page Two.

Actual behavior

The page switches, but the menu stays expanded above it: .navbar-collapse keeps the show class and the toggler keeps aria-expanded="true". The user must close the menu manually to reach the page they selected.

Expected behavior

Selecting a page closes the menu and returns the toggler to aria-expanded="false", as on a Quarto website navbar.

Your environment

  • IDE: n/a (rendered from the command line; behavior is browser-side)
  • OS: macOS 26.5.1 (build 25F80)
  • Browsers checked: Chrome 150 (headless + desktop)

Quarto check output

Quarto 1.10.12
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.7.14: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.10.12
      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
6k
Fork
458
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
54

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

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.