Skip to content

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

Description

@cwickham

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...

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions