Back-to-top button is not reachable by keyboard
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 75/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- html, javascript
調査の方向性
src/project/types/website/website-navigation.ts#L631-L642にある引用されたマークアップと、src/resources/projects/website/navigation/quarto-nav.js#L51-L82にある表示動作から始めます。back-to-top-navigationを有効にしたWebサイトをレンダリングし、キーボード操作でボタンにフォーカスしてEnterで有効化できることを確認します。キーボードユーザーがボタンにたどり着いて有効化でき、説明どおりフォーカスがページ上部に戻れば完了です。
索引モデルが issue の本文から書いたものです。
説明
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)
- Render the site and open
_site/index.html. - Press Tab through the page to the end.
- 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...
- 主要言語
- JavaScript
- スター
- 6.1k
- フォーク
- 471
- 平均マージ
- 17時間 35分
- マージ済み PR（30日）
- 107
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
quarto-dev/quarto-cli のほかの issue
-
enhancement themes websites
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
quarto-dev/quarto-cli#15179 ·
メンテナーはふだん 1 日以内に返信
-
about-page bug layout websites
難易度 1/5 1〜3時間 初心者へのやさしさ 82/100
quarto-dev/quarto-cli#15178 ·
メンテナーはふだん 1 日以内に返信
-
bug websites
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
quarto-dev/quarto-cli#15176 ·
メンテナーはふだん 1 日以内に返信
-
a11y: prev/next page links and title breadcrumbs use `$text-muted` and fail contrast on dark themesオープンaccessibility bug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
quarto-dev/quarto-cli#15175 ·
メンテナーはふだん 1 日以内に返信
-
accessibility bug code-blocks
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
quarto-dev/quarto-cli#15174 ·
メンテナーはふだん 1 日以内に返信
quarto-dev/quarto-cli の issue をすべて見る
似ている issue
-
frontend
難易度 2/5 1〜3時間 初心者へのやさしさ 69/100
uoftblueprint/canada-basketball#79 ·
メンテナーはふだん 1 日以内に返信
-
New App Request
難易度 1/5 1時間未満 初心者へのやさしさ 76/100
ThatGuySam/doesitarm#1126 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
lyswhut/lx-music-desktop#3026 ·
-
good first issue server
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 67/100
openstreetmap/iD#13054 ·
メンテナーはふだん 1 日以内に返信