Dashboard: collapsed mobile navbar menu stays open after selecting a page
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ả
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 >}}
quarto renderthe document above and open the resulting HTML in a browser.- 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).
- Click the toggler to open the menu.
- 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
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của quarto-dev/quarto-cli
-
accessibility bug typst
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
quarto-dev/quarto-cli#14947 · 2 bình luận ·
-
accessibility documentation
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
quarto-dev/quarto-cli#14944 ·
-
maintenance ojs-engine
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 65/100
quarto-dev/quarto-cli#14934 ·
-
accessibility bug html themes
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 75/100
quarto-dev/quarto-cli#14932 ·
-
documentation
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 86/100
quarto-dev/quarto-cli#14915 ·
Tất cả issue của quarto-dev/quarto-cli
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
-
area-deployment area-integrations triage:bot-seen
Độ khó 2/5 Nửa ngày Mức phù hợp với người mới 86/100
-
Issue-Bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
sugarlabs/musicblocks#8924 ·
-
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
ArduPilot/ardupilot_wiki#8088 ·
-
[BUG] createTool tools cannot be registered with Mastra when exactOptionalPropertyTypes is enabled Đang mởcustomer-eng status: needs triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100