revealjs: screen readers hear a Mermaid diagram's CSS, and not an image's fig-alt #15033

• 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 revealjs presentations, what screen readers are told when a slide is entered (reveal.js's .aria-status live region) goes wrong for two of Quarto's own features:

1. A Mermaid diagram is announced with its CSS. Mermaid puts a <style> in the SVG it draws, and the bundled reveal.js reads it as text. Entering a slide with a three-node flowchart announces nearly 10,000 characters of CSS (#mermaid-1{font-family:"trebuchet ms",verdana,arial,sans-serif;…) before the node labels.
2. fig-alt is not announced. reveal.js 5.1.0, which Quarto bundles, reads no alt text, so entering a slide with an image announces only its caption.

Both come from getStatusText(), the function in the bundled reveal.js that builds these announcements. #15019 is about the same announcements, but these are separate problems with a separate fix, and #15020 does not change them. This is also not #3873, where fig-alt is not applied to a Mermaid diagram at all: here the image has its alt text, and the announcement leaves it out.

Steps to reproduce

---
title: "Diagrams"
format: revealjs
---

## Mermaid

```{mermaid}
flowchart LR
  A[Start] --> B[Middle] --> C[End]
```

## Graphviz

```{dot}
digraph G { Start -> End }
```

## Image

![A caption]({{< placeholder 200 100 >}}){fig-alt="A grey rectangle"}

Render it, open the presentation and step through it with →. To see the announcements without a screen reader, paste this into the browser console on the title slide first:

new MutationObserver( records => records.forEach( r => r.addedNodes.forEach( n => console.log( JSON.stringify( n.textContent ) ) ) ) )
  .observe( document.querySelector( '.reveal .aria-status' ), { childList: true } );

Actual behavior

Pressing → from the title slide:

Each is announced twice, as #15019 reports, so the Mermaid slide reads its CSS twice.

The Graphviz slide is there for comparison. Its SVG has no <style>, so no CSS is announced, but each node is announced twice, from its <title> and its label.

Expected behavior

• Mermaid: the slide title and the node labels, without the CSS.
• Image: the slide title, the alt text and the caption.

Your environment

• Quarto 1.10.19, and main at a57cc76
• Chromium 141 on Linux

Quarto check output

Not included: the problem is in the bundled reveal.js that runs in the browser, and it is the same on 1.10.19 and on main.

Fix

• The CSS is reported upstream with a fix in Screen reader announcements read the inside of role="img" elements and the CSS in an SVG's <style> hakimel/reveal.js#3948. The same change has reveal.js announce an element with role="img" by its name instead of the text inside it. Today maidr's charts, for example, are announced by their tick labels.
• The alt text is announced by reveal.js since 6.0.0.

With a build of reveal.js master (e240e175) that has the change from hakimel/reveal.js#3948, swapped into the rendered presentation:

Quarto bundles 5.1.0, so it gets these from a reveal.js release that has them, or by carrying them in the bundled 5.1.0, as #15020 proposes for #15019.

Graphviz is covered by neither. It gives every node and edge a <title>, and the upstream change leaves <title> alone: a <title> can be the only name a graphic has, and for an unlabelled Graphviz edge it is the only text.