quarto-dev / quarto-dev/quarto-cli

a11y: dashboard header nav landmark has no accessible name

Open Beginner friendly
#14,809 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility bug dashboards
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#L31title-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:

  1. 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).
  2. The navbar toggler has a hardcoded English label, aria-label="Toggle navigation" (title-block.html#L4). The website equivalent uses the localized toggle-navigation language 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

Open the contributing guide

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.