Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Default listing renders an empty, focusable thumbnail link for posts without an image

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,066 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@chanellebingham arbeitet bereits daran.

Seit 18.10.2026.

  • #15099 von @chanellebingham — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
72/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript, typescript
Bereich
accessibility, frontend

Rechercherichtung

Beginne mit der Vorlage item-default.ejs.md, in der das Vorschaubild immer in ein a-Tag eingeschlossen ist, und mit emptyDiv() in website-listing-read.ts, das den leeren Fall ausfüllt. Zum Reproduzieren eine Standardliste mit einem Beitrag ohne Bild rendern und die Ausgabe auf den unbenannten Link prüfen. Fertig ist es, wenn ein Beitrag ohne Bild keinen fokussierbaren Vorschaulink mehr erhält, oder einen, der aria-hidden ist und dessen tabindex auf -1 gesetzt ist, und axe link-name für ihn nicht mehr meldet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

In a default listing, a post with no preview image gets an empty thumbnail link.

item-default.ejs.md always wraps the thumbnail in <a href="...">.
When the post has no image and the listing sets no image-placeholder, emptyDiv() in website-listing-read.ts fills it with <div class="listing-item-img-placeholder">&nbsp;</div>.
The link has no accessible name, but it is still a Tab stop, so keyboard and screen reader users meet one unnamed link per post before its title link.
axe reports it as link-name (WCAG 2.4.4, 4.1.2).

The grid listing is not affected, as its whole card is one link with text.

This differs from #15038, where the thumbnail has an image without alt text, and from #7028, which asks for alt text on image-placeholder.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: "Listing"

index.qmd:

---
title: "Posts"
listing:
  contents: posts
  type: default
---

posts/one/index.qmd:

---
title: "Post one"
date: 2026-01-01
---

Text without an image.

Render the website and inspect _site/index.html, or run axe on it.

Actual behavior
<div class="thumbnail"><a href="./posts/one/index.html" class="no-external">

<div class="listing-item-img-placeholder card-img-top" >&nbsp;</div>

</a></div>

axe: link-name on the thumbnail link of each post; the link is reachable with Tab and announced with no name.

Expected behavior

A post with no image gets no thumbnail link, or a link hidden from assistive technology and taken out of the tab order (aria-hidden="true" and tabindex="-1"), since the title link next to it already goes to the same page.

Your environment
  • IDE: none, rendered from the command line.
  • OS: macOS 27.0.
Quarto check output
quarto check

Quarto 99.9.9

[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/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: 99.9.9
      commit: b86f98d382940bef6c65f37ea0bdfba844f19b6d
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

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

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

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

ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/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.13.11
      Path: /Users/mcanouil/Projects/q2-tests/.venv/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking Julia installation...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
471
Ø Merge
22 Std. 53 Min.
Gemergte PRs (30 T.)
87

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.