quarto-dev / quarto-dev/quarto-cli
a11y: dashboard header nav landmark has no accessible name
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Every dashboard emits a <nav class="navbar"> header, with no aria-label. The template includes it unconditionally (template.html#L31 → title-block.html#L2), even when the dashboard has no title. For multi-page dashboards this nav is the primary navigation: the page tabs are injected into it (format-dashboard-page.ts#L43).
Two problems:
- The nav has no accessible name. On a standalone dashboard this is a missing-name issue; when a dashboard page renders inside a website project, it can coexist with the website navbar and then fails axe
landmark-unique(#14376). - The navbar toggler has a hardcoded English label,
aria-label="Toggle navigation"(title-block.html#L4). The website equivalent uses the localizedtoggle-navigationlanguage key (navtoggle.ejs#L2).
Both are one-line template fixes: Pandoc templates can read localized strings with $quarto.language.<key>$ variables (docs). The mechanism applies to built-in templates too — verified by a render of this template with lang: fr, where $quarto.language.toggle-navigation$ resolves to "Basculer la navigation".
Repro:
---
title: "My Dashboard"
format: dashboard
---
# Page 1
Content
# Page 2
Content
The rendered header nav has no aria-label, and the toggler label stays English regardless of lang.
Fix sketch: in title-block.html, set the nav label with $quarto.language.<key>$ (reuse the nav label key that the fix for #14376 introduces) and replace the toggler string with $quarto.language.toggle-navigation$. Note: #14685 also touches dashboard markup, so coordinate.
Split from #14376. Part of #8706.
Investigation was AI-assisted, grounded in a local clone (per CONTRIBUTING.md).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/resources/formats/dashboard/title-block.html, checking the nav and toggler lines, and compare the localized label usage in src/resources/projects/website/templates/navtoggle.ejs. Render the provided dashboard with lang: fr and confirm the navigation landmark has an accessible name and the toggler label is localized; coordinate the nav key with #14376.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, internationalization
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100