Skip to content

Add an attribute to pass a frame title to code-preview #14770

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

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.qmd gives "smaller".
  • The first heading can be the counter-example. examples/smaller.qmd compares 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityhtmlIssues with HTML and related web technology (html/css/scss/js)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions