Website announcement dismiss control cannot be reached or used with a keyboard

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,235 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@Xander-AJ đang làm issue này rồi.

Từ ngày 2/11/2026.

  • #15253 của @Xander-AJ — đang mở

Đánh giá

Độ khó
1/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
88/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ệ
javascript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu với src/resources/projects/website/templates/nav-before-body.ejs và src/resources/projects/website/navigation/quarto-nav.js, được issue xác định là markup của thông báo và trình xử lý nhấp chuột. Render ví dụ website được cung cấp và kiểm tra điều khiển thông báo được tạo ra cùng cách điều khiển này hoạt động với bàn phím. Hoàn thành khi có thể dùng Tab để chuyển đến điều khiển, điều khiển có tên truy cập được và đóng thông báo bằng Enter hoặc Space.

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

Mô tả

accessibility bug websites
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

Keyboard and screen reader users cannot dismiss a website announcement.
Quarto writes the dismiss control as an <i> element, with no role, no accessible name, and no tab stop:

https://github.com/quarto-dev/quarto-cli/blob/6f81421488bde28d87cee51c9988e666bc09f7be/src/resources/projects/website/templates/nav-before-body.ejs#L18

quarto-nav.js only listens for a mouse click on it:

https://github.com/quarto-dev/quarto-cli/blob/6f81421488bde28d87cee51c9988e666bc09f7be/src/resources/projects/website/navigation/quarto-nav.js#L31-L37

This fails WCAG 2.1.1 Keyboard and WCAG 4.1.2 Name, Role, Value, both Level A.

Related:

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: "Announcement"
  navbar:
    left:
      - href: index.qmd
        text: Home
  announcement:
    content: "This is an announcement."
    type: info
    dismissable: true
    position: above-navbar
format: html

index.qmd:

---
title: "Home"
---

Some text.
  1. Run quarto render.
  2. Open _site/index.html.
  3. Press Tab repeatedly.
Actual behavior

Focus never reaches the dismiss control, and its tabIndex is -1.
Only a mouse click closes the bar.
A screen reader does not expose the control at all.

Expected behavior

The control is a <button type="button"> with an accessible name, such as aria-label="Dismiss announcement".
Tab reaches it, and Enter or Space closes the bar.
If the button keeps the quarto-announcement-action class, the existing click handler in quarto-nav.js works unchanged, because a button fires click on Enter and Space.

Your environment
  • OS: macOS 27.0.1.
  • Browser: Chromium (Brave), driven by Playwright.
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 6f81421488bde28d87cee51c9988e666bc09f7be

The build comes from commit 6f81421, which is the v1.11.8 tag.

Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
476
Merge trung bình
16 giờ 42 phút
Pull request đã merge (30 ngày)
115

Chuẩn bị môi trường

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.