Add code-preview-title to name code-preview iframes

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
 

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);
       }
     }

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
+```