a11y: dashboard header nav landmark has no accessible name

オープン 初心者向け
#14,809 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
html

調査の方向性

src/resources/formats/dashboard/title-block.html から始め、nav と toggler の行を確認し、src/resources/projects/website/templates/navtoggle.ejs でローカライズされた label の使用方法と比較してください。提供された dashboard を lang: fr でレンダリングし、ナビゲーション landmark に accessible name があり、toggler label がローカライズされていることを確認してください。nav key を #14376 と調整してください。

索引モデルが issue の本文から書いたものです。

説明

accessibility bug dashboards

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).

主要言語
JavaScript
スター
6k
フォーク
458
平均マージ
1日 8時間
マージ済み PR(30日)
42

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。