a11y: dashboard header nav landmark has no accessible name

Đang mở Phù hợp với người mới
#14,809 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

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
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
html
Lĩnh vực
accessibility, internationalization

Hướng nghiên cứu

Bắt đầu trong src/resources/formats/dashboard/title-block.html, kiểm tra các dòng nav và toggler, rồi so sánh cách sử dụng nhãn đã bản địa hóa trong src/resources/projects/website/templates/navtoggle.ejs. Render dashboard được cung cấp với lang: fr và xác nhận rằng landmark điều hướng có tên có thể truy cập, đồng thời nhãn toggler đã được bản địa hóa; phối hợp khóa nav với #14376.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

accessibility bug dashboards

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:

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

Ngôn ngữ chính
JavaScript
Star
6k
Fork
458
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
42

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.