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

オープン 初心者向け
  • 何か問題がありますか？
#15,235 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

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

評価

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

調査の方向性

issue で告知のマークアップとクリックハンドラーとして挙げられている src/resources/projects/website/templates/nav-before-body.ejs と src/resources/projects/website/navigation/quarto-nav.js から始めてください。提示されたウェブサイトの例をレンダリングし、生成された告知コントロールとキーボード操作時の動作を確認してください。コントロールに Tab キーで移動でき、アクセシブルな名前があり、Enter または Space で告知を閉じられれば完了です。

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

説明

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.

主要言語
JavaScript
スター
6.1k
フォーク
476
平均マージ
16時間 42分
マージ済み PR（30日）
115

環境構築

はじめの一歩

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

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

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

似ている issue

JavaScript の issue をもっと見る

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

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