Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Back-to-top button is not reachable by keyboard

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

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

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

Direzione di ricerca

Inizia con il markup citato in src/project/types/website/website-navigation.ts#L631-L642 e il comportamento di visibilità in src/resources/projects/website/navigation/quarto-nav.js#L51-L82. Genera un sito web con back-to-top-navigation abilitato e usa la navigazione da tastiera per verificare che il pulsante possa ricevere il focus ed essere attivato con Enter. Il lavoro è completato quando gli utenti da tastiera possono raggiungere e attivare il pulsante e il focus torna in cima come descritto.

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

Descrizione

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

When back-to-top-navigation: true is set, keyboard users cannot reach or activate the "Back to top" button. This fails WCAG 2.1.1 Keyboard (Level A).

Quarto generates this markup (website-navigation.ts#L631-L642):

<a onclick="window.scrollTo(0, 0); return false;" role="button" id="quarto-back-to-top">
  <i class="bi bi-arrow-up"></i> Back to top</a>

The <a> element has no href and no tabindex, so it cannot take focus. role="button" does not make an element focusable.

Screen reader users are not blocked. VoiceOver reads the button, and VO+Space activates it, because VoiceOver sends a click. Keyboard users without a screen reader cannot reach it.

The button looks designed for mouse and touch users. The script shows it when the page scrolls up and hides it when the page scrolls down (quarto-nav.js#L51-L82). Keyboard users have other ways to go to the top, for example the Home key.

But 2.1.1 has no exception for this case. If a function is available with a mouse, it must also be available with a keyboard.

This was first reported in a comment on discussion #12644, tested with Chrome and NVDA.

Investigated with AI assistance, grounded in a local clone of quarto-cli.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  back-to-top-navigation: true

index.qmd:

---
title: Long page
---

{{< lipsum 20 >}}

[A link](https://example.com)
  1. Render the site and open _site/index.html.
  2. Press Tab through the page to the end.
  3. Press End to show the button. Then press Shift+Tab.

Actual behavior

  • Tab never puts focus on the button. Focus goes from the last link back to the browser.
  • After End, the button shows, but Shift+Tab goes to the last link in the content.
  • document.getElementById("quarto-back-to-top").focus() has no effect.

Tested in Chromium with Playwright and real key presses.

Expected behavior

A keyboard user can Tab to the button, activate it with Enter, and the next Tab starts at the top of the page.

Your environment

  • IDE: none (rendered with the CLI)
  • OS: macOS 27.0.1 (build 26A434)

Quarto check output

Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.6
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115

[✓] Checking basic markdown render....OK

[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...
Lingua principale
JavaScript
Stelle
6.1k
Fork
471
Merge medio
17h 35m
PR unite (30g)
107

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.