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

Chiusa Adatta ai principianti
  • Qualcosa non va?
#15,235 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #15253 di @Xander-AJ — integrata

Valutazione

Difficoltà
1/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia da src/resources/projects/website/templates/nav-before-body.ejs e src/resources/projects/website/navigation/quarto-nav.js, che l’issue identifica come il markup dell’annuncio e il gestore del clic. Genera l’esempio di sito web fornito ed esamina il controllo dell’annuncio generato e il suo comportamento da tastiera. Il lavoro è completo quando è possibile raggiungere il controllo con Tab, ha un nome accessibile e chiude l’annuncio con Enter o Space.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
JavaScript
Stelle
6.1k
Fork
478
Merge medio
17h 26m
PR unite (30g)
126

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.