Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Dashboard: inactive light/dark navbar logo remains an empty focusable link

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

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

まだ誰も着手していません。

評価

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

調査の方向性

まず src/resources/formats/dashboard/_nav-container.html と src/resources/formats/html/_quarto-rules.scss から始め、提供されたダッシュボードの再現を axe の出力とともにレンダリングします。非アクティブなテーマバリアントがロゴリンク全体を非表示にし、どちらのテーマ状態でも、フォーカス可能で名前の付いたロゴリンクを1つだけ残し、axe のリンク名違反が発生しないようにします。

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

説明

accessibility bug dashboards

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

A format: dashboard navbar logo is always rendered twice — a light-theme and a dark-theme copy, even when the author supplies a single logo: path (_nav-container.html#L3-L4). The theme CSS then hides the inactive copy — but the light-content/dark-content class sits on the <img>, not the wrapping <a>, and the hiding rules only match the image (_quarto-rules.scss#L765-L774).

So in every theme state the inactive logo's <a href="#"> remains rendered at 0×0: still in the keyboard tab order, exposed to assistive technology as a link with an empty accessible name (its only content is display: none, so it contributes nothing to name computation), and flagged by axe-core link-name (serious → WCAG 2.2 SC 2.4.4 Link Purpose (In Context)) — even when the author sets logo alt text. Keyboard and screen-reader users hit two consecutive logo links on every dashboard page, one of them invisible and unnamed.

The fix direction: put the visibility class on the <a> (or render the anchor conditionally), so hiding the theme variant removes the whole link from the tab order and accessibility tree. Authors can approximate this today with body.quarto-light .navbar-brand-container a:has(> .navbar-logo.dark-content) { display: none !important; } (and the quarto-dark/light-content mirror) — verified to leave one named logo tab stop and zero axe violations — but that shouldn't be required.

An AI assistant helped investigate, grounded in a local clone of quarto-cli (source pinned to 8577ed1c6), per CONTRIBUTING.md.

Steps to reproduce

---
title: "Logo repro"
format:
  dashboard:
    axe:
      output: document
    logo:
      path: logo.png
      alt: "Washington County, Oregon"
---

# Page one

## Row

Content.
  1. quarto render with any small logo.png alongside, and open the result in a browser.
  2. Press Tab from the top of the page, or run axe DevTools.

Actual behavior

Rendered navbar (both links always present):

<a href="#"><img src="logo.png" alt="Washington County, Oregon" class="navbar-logo light-content d-inline-block"></a>
<a href="#"><img src="logo.png" alt="Washington County, Oregon" class="navbar-logo dark-content d-inline-block"></a>

With body.quarto-light, the second link's <img> is display: none but the <a> computes to display: block at 0×0. Verified via CDP (Chrome 150) in both body.quarto-light and body.quarto-dark, with a single logo and with an explicit light:/dark: pair:

  • Tab order: navbar-toggler → logo link (light) → logo link (dark) → … — two logo stops, one invisible.
  • Accessibility tree: visible link name="Washington County, Oregon"; inactive link exposed as link, name="".

Axe-core:

Serious · WCAG 2.0 A (2.4.4, 4.1.2): Ensure links have discernible text
Links must have discernible text
a[href="#"]:nth-child(2)

Expected behavior

Only the active theme's logo link is focusable and exposed to assistive technology — one logo tab stop, no link-name violation. E.g. the light-content/dark-content class on the <a> so the existing hiding rules remove the whole link.

Your environment

  • IDE: n/a (rendered from the command line; behavior is browser-side)
  • OS: macOS 26.5.1 (build 25F80)
  • Browsers checked: Chrome 150 (headless, CDP accessibility tree + simulated Tab)

Quarto check output

Quarto 1.10.12
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.7.14: OK
      Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.10.12
      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
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
      Version: 3.12.2
[✓] Checking Jupyter engine render....OK
[✓] Checking Julia installation...
主要言語
JavaScript
スター
6.1k
フォーク
463
平均マージ
21時間 14分
マージ済み PR（30日）
60

環境構築

はじめの一歩

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

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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