website: make content headings keyboard-focusable so Tab moves through the page

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

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

@nightcityblade がすでに取り組んでいます。

2026年10月8日 から。

  • #26588 @nightcityblade による — オープン
  • #26639 @fatmagnd による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
html
領域
accessibility

調査の方向性

website/layouts/_default/_markup/render-heading.htmlを読み、その出力を、すでに一部の見出しをフォーカス可能にしているwebsite/layouts/partials/heading.htmlと比較してください。Webサイトでレンダリングされたドキュメントと、ライトモードおよびダークモードでのキーボード操作を確認してください。Markdownコンテンツの見出しにTabキーで移動でき、フォーカスが見える状態になれば完了です。無関係なナビバーの動作は対象外です。

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

説明

domain:website good first issue
A note for the community
  • Please vote on this issue by adding a 👍 reaction to the original issue to help the community and maintainers prioritize this request
  • If you are interested in working on this issue or have submitted a pull request, please leave a comment
Use Cases

Keyboard users read a docs page with the Tab key. Each Tab moves focus to the next focusable element, and the browser scrolls the page to that element.

On vector.dev, headings in the page content are not focus stops. Only links, buttons, and code blocks get focus. On a page with long sections and few links, one Tab can jump past one or more full sections. The user cannot move through the document section by section.

Example on https://vector.dev/docs/setup/quickstart/: after the breadcrumbs, the Tab sequence in the content is:

button "Script"
button "Docker"
pre    "curl --proto '=https' ..."
a      "installation methods"
pre    "vector --version"
a      "configuration file"
...

No heading in the page gets focus.

The Datadog docs do this correctly. On https://docs.datadoghq.com/getting_started/, each heading is a focus stop, for example:

<h2 id="what-is-datadog"><a href="#what-is-datadog">What is Datadog?</a></h2>

Tab moves from the breadcrumbs to "What is Datadog?", then to the links in that section, then to the next heading.

Attempted Solutions

NA

Current behavior in the website source:

  • website/layouts/_default/_markup/render-heading.html renders all Markdown headings. The heading text is plain text. The only link is the # icon, and it has x-show="show". That icon shows only on mouseover, so it has display: none for keyboard users and is not focusable.
  • website/layouts/partials/heading.html wraps the heading text in <a href="#id"> when anchor is true (for example, the component reference pages in website/layouts/partials/data.html). These headings are already focus stops. Thus, the site is not consistent: Markdown headings are not focusable, and some template headings are.
Proposal

Keyboard users must be able to move through a docs page section by section with the Tab key, the same as on the Datadog docs. The focused element must be visible in light mode and dark mode.

One possible fix is to wrap the heading text in render-heading.html in an <a href="#..."> link, similar to heading.html with anchor: true and the Datadog docs. We did not test this, and other approaches are welcome.

Related: the first Tab on every page focuses the full <nav> element (tabindex="0" in website/layouts/partials/navbar.html), and the navbar itself is not interactive.

A larger follow-up can compare other keyboard features with the Datadog docs (for example, a "skip to content" link), but that is not necessary for this issue.

References
  • #26572: adds copy buttons to code blocks. During review, we found this problem. Out of scope for that PR.
Version

NA (website)

主要言語
Rust
スター
22.8k
フォーク
2.4k
平均マージ
1日 13時間
マージ済み PR（30日）
273

環境構築

はじめの一歩

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

vectordotdev/vector のほかの issue

vectordotdev/vector の issue をすべて見る

似ている issue

Rust の issue をもっと見る

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

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