quarto-dev / quarto-dev/quarto-cli
Add an attribute to pass a frame title to `code-preview`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
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
The code-preview code block attribute adds an iframe that shows the rendered example. Quarto sets only src and the classes of the code block, so the iframe has no title. An author cannot supply one.
Screen readers announce an iframe by its title, so these frames have no accessible name. axe-core reports this as frame-title (serious, WCAG 2.0 A, SC 4.1.2).
The iframe is built in src/format/html/format-html.ts#L808-L825. data-code-preview is the only occurrence of the feature in src/, and it has no schema entry, so there is no way to set a title.
quarto-web uses code-preview 27 times: docs/presentations/revealjs/index.qmd (17), docs/presentations/revealjs/advanced.qmd (9), and docs/authoring/code-annotation.qmd (1). Every one produces an untitled frame.
Steps to reproduce
Two files in the same directory.
index.qmd:
---
title: "code-preview iframe"
format: html
---
```{.yaml code-preview="example.qmd"}
format:
revealjs:
smaller: true
```
example.qmd:
---
title: "Example"
format: revealjs
---
## A slide
Then render both files:
quarto render example.qmd
quarto render index.qmd
Actual behavior
index.html contains an iframe with no title attribute:
<iframe class="sourceCode yaml code-with-copy" src="example.html"></iframe>
axe-core reports frame-title on this page, and no other violation.
Expected behavior
A code-preview-title attribute sets the title of the iframe:
```{.yaml code-preview="example.qmd" code-preview-title="Example presentation with smaller text"}
format:
revealjs:
smaller: true
```
The title must come from the author, because no automatic source describes these previews:
- The preview targets carry no
title:metadata. - The file name is a topic slug.
examples/smaller.qmdgives "smaller". - The first heading can be the counter-example.
examples/smaller.qmdcompares a slide without the class to a slide with it, so it opens with the slide without.smaller.
Each frame holds a live Reveal.js deck that shows the result of the code block above it. A good title states that relationship, and stays unique on a page that has 17 previews (see the frame-title-unique rule).
Writing an accurate title for the 27 previews on quarto.org then becomes a PR on quarto-web.
Your environment
- IDE: Positron 1.124.0
- OS: macOS 26.5.2 (build 25F84)
Quarto check output
$ quarto check
Quarto 1.10.18
[✓] Checking environment information...
Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
[✓] 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.10.18
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...
An AI assistant helped investigate this issue, grounded in a local clone of quarto-cli (see "Using AI tools to investigate" in CONTRIBUTING.md).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read src/format/html/format-html.ts#L808-L825 and search src/ for data-code-preview, then render the two-file example with quarto render example.qmd and quarto render index.qmd. Done means the author-provided code-preview-title appears on the iframe and the rendered page no longer reports axe-core's frame-title violation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100