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

Aberta Para iniciantes
  • Algo errado?
#15,235 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
1/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
88/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
javascript
Domínio
accessibility, frontend

Direção de pesquisa

Comece por src/resources/projects/website/templates/nav-before-body.ejs e src/resources/projects/website/navigation/quarto-nav.js, que a issue identifica como a marcação do anúncio e o manipulador de clique. Renderize o exemplo de site fornecido e inspecione o controle de anúncio gerado e seu comportamento com o teclado. A tarefa estará concluída quando for possível alcançar o controle com Tab, ele tiver um nome acessível e dispensar o anúncio com Enter ou Space.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
JavaScript
Estrelas
6.1k
Forks
476
Merge médio
16h 42min
PRs com merge (30d)
115

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.