a11y: dashboard arrow-key page navigation does not update the URL or the page flow
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 85/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- bootstrap, javascript
- Área
- accessibility, frontend, testing
Línea de trabajo
Comienza en src/resources/formats/dashboard/quarto-dashboard.js, especialmente en el click listener alrededor de las líneas 125-142, y compáralo con los Bootstrap tab events descritos en el issue. Ejecuta tests/integration/playwright/tests/dashboard-hash-navigation.spec.ts, incluidas las regresiones para #14818 y #14819; se considera terminado cuando la navegación con las teclas de flecha actualiza la URL y el diseño del flujo de página igual que un clic del ratón.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
A dashboard navbar is a Bootstrap tablist, so a keyboard user moves between pages with the arrow keys, not with Tab. The arrow keys change the visible page, but none of the other work that a mouse click does happens.
Everything the navbar needs is in a click listener (quarto-dashboard.js#L125-L142). Bootstrap activates a tab from an arrow key without dispatching a click, so that listener never runs.
Two things are skipped:
- The URL is not updated.
setLocation()never runs, so the address bar still shows the page the reader arrived on. Bookmarking or sharing captures the wrong page, and Back and Forward do not step through page changes made with the keyboard. - The page flow is not updated.
updatePageFlow()never runs, so a page markedscrolling="true"keeps the fill layout of the previous page. This one is visible on screen.
A fix could move the work to shown.bs.tab, which fires for both paths. That hook looks safe: showPage() sets the active classes directly rather than through the Bootstrap tab API, so it emits no shown.bs.tab and a listener there will not re-enter on popstate. I verified this by calling QuartoDashboardUtils.showPage() with a listener attached; no event fired.
Please keep #14818 and #14819 passing when fixing this. Their regression tests are in tests/integration/playwright/tests/dashboard-hash-navigation.spec.ts.
Part of #8706.
Steps to reproduce
---
title: "Keyboard page navigation"
format: dashboard
---
# Page One
## Row
Content for page one
# Page Two {scrolling="true"}
## Row
Content for page two
- Render the document and open the HTML output.
- Press Tab until the "Page One" navbar tab has focus.
- Press the Right arrow key.
Actual behavior
The visible page changes to "Page Two", but the URL keeps its original hash and the scrolling layout is not applied.
Measured in Chromium on Quarto 1.10.18:
| arrow key | mouse click | |
|---|---|---|
click on the tab |
no | yes |
show.bs.tab / shown.bs.tab |
yes | yes |
| URL hash | "" |
"#page-two" |
body.dashboard-fill |
true (wrong) |
false |
.quarto-dashboard-content.dashboard-scrolling |
false (wrong) |
true |
Expected behavior
Arrow key navigation matches mouse navigation. The URL becomes #page-two, so the page can be bookmarked and shared and Back returns to the previous page. The scrolling layout is applied.
Your environment
- Positron 1.124.0
- macOS 26.5.2 (build 25F84)
Quarto check output
Quarto 1.10.18
[✓] Checking environment information...
Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] 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.10.18
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.5.2
Path: /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources
LibPaths:
- /Users/charlottewickham/Library/R/arm64/4.5/library
- /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
knitr: 1.51
rmarkdown: 2.30
[✓] 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...
Investigation was AI-assisted, grounded in a local clone (per CONTRIBUTING.md).
- Lenguaje dominante
- JavaScript
- Estrellas
- 6k
- Forks
- 458
- Merge medio
- 1 d 9 h
- PR fusionados (30 d)
- 41
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de quarto-dev/quarto-cli
-
binder bug
Dificultad 1/5 Menos de una hora Aptitud para principiantes 92/100
quarto-dev/quarto-cli#14907 · 3 comentarios ·
-
brand bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 85/100
quarto-dev/quarto-cli#14875 ·
-
Percent scripts: accept raw-string (r""") and '''-delimited markdown cells, as jupytext writes them Abiertoengines-jupyter enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
quarto-dev/quarto-cli#14850 · 2 comentarios ·
Todos los issues de quarto-dev/quarto-cli
Issues similares
-
enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
babalae/bettergi-scripts-list#3674 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
vadimdemedes/ink#1029 ·
-
code-quality refactoring
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
langchain-ai/deepagents#6450 ·
-
optimization optimization:agents-md-curator
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
githubnext/gh-aw-cao#13143 ·