From 81e57e29a4c7f4f0dfeadeeaf83e9b3cc1b1f028 Mon Sep 17 00:00:00 2001
From: Charlotte Wickham <cwickham@gmail.com>
Date: Tue, 22 Sep 2026 13:59:42 -0700
Subject: [PATCH] Add code-preview-title to name code-preview iframes

The iframe that code-preview inserts had no title, so it had no
accessible name (axe-core frame-title). The new code-preview-title
code block attribute sets it.

Fixes #14770
---
 news/changelog-1.11.md                        |  1 +
 src/format/html/format-html.ts                |  8 ++++++
 .../09/22/issue-14770/code-preview-title.qmd  | 26 +++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 tests/docs/smoke-all/2026/09/22/issue-14770/code-preview-title.qmd

diff --git a/news/changelog-1.11.md b/news/changelog-1.11.md
index e2a79b3b1e1..738ec09c096 100644
--- a/news/changelog-1.11.md
+++ b/news/changelog-1.11.md
@@ -15,6 +15,7 @@ All changes included in 1.11:
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Add a distinct, localizable `aria-label` to each navigation landmark of websites and books: the navbar (`Site`), the sidebar (`Section`, or `Site` when there is no navbar), the narrow-viewport toolbar (`Toolbar`), the previous/next page navigation (`Page`), and the breadcrumbs (`Breadcrumbs`) (previously hardcoded English `breadcrumb`). The new `navigation-*-label` language keys can be overridden with `language:` metadata.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Translate the new `navigation-*-label` keys in all 33 built-in language files. The values are drawn from existing human-translated interface strings (LibreOffice, GNOME, Wikidata) and each one carries a comment naming its source; values that were adapted rather than used verbatim are marked `needs review`.
 - ([#14376](https://github.com/quarto-dev/quarto-cli/issues/14376)): Label the table of contents `<nav>` with its localized title (`aria-labelledby`), in `html` and `revealjs` output, so assistive technology can tell it apart from other navigation landmarks.
+- ([#14770](https://github.com/quarto-dev/quarto-cli/issues/14770)): Add a `code-preview-title` code block attribute that sets the `title` of the iframe created by `code-preview`, so the frame has an accessible name.
 
 ## Formats
 
diff --git a/src/format/html/format-html.ts b/src/format/html/format-html.ts
index cc70784bf12..dade80a981e 100644
--- a/src/format/html/format-html.ts
+++ b/src/format/html/format-html.ts
@@ -821,6 +821,14 @@ function htmlFormatPostprocessor(
         code.parentElement.removeAttribute(
           "data-code-preview",
         );
+        // the iframe's accessible name (#14770)
+        const codeExampleTitle = code.parentElement.getAttribute(
+          "data-code-preview-title",
+        );
+        if (codeExampleTitle) {
+          codeExample.setAttribute("title", codeExampleTitle);
+        }
+        code.parentElement.removeAttribute("data-code-preview-title");
         code.parentElement.appendChild(codeExample);
       }
     }
diff --git a/tests/docs/smoke-all/2026/09/22/issue-14770/code-preview-title.qmd b/tests/docs/smoke-all/2026/09/22/issue-14770/code-preview-title.qmd
new file mode 100644
index 00000000000..2f198b8fa05
--- /dev/null
+++ b/tests/docs/smoke-all/2026/09/22/issue-14770/code-preview-title.qmd
@@ -0,0 +1,26 @@
+---
+title: "code-preview-title sets the iframe title"
+format: html
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'div.sourceCode > iframe[src="with-title.html"][title="Example presentation with smaller text"]'
+          - 'div.sourceCode > iframe[src="without-title.html"]:not([title])'
+        -
+          - '[data-code-preview]'
+          - '[data-code-preview-title]'
+---
+
+```{.yaml code-preview="with-title.qmd" code-preview-title="Example presentation with smaller text"}
+format:
+  revealjs:
+    smaller: true
+```
+
+```{.yaml code-preview="without-title.qmd"}
+format:
+  revealjs:
+    smaller: true
+```