Mermaid fullscreen overlay missing data-streamdown attribute and accessibility attributes

[mkbctrl]

Summary

The mermaid fullscreen overlay (rendered via createPortal to document.body) is missing the data-streamdown attribute, aria-modal, and uses role="button" instead of role="dialog". The table fullscreen overlay correctly has all three.

Current behavior (v2.4.0 / v2.5.0)

Table fullscreen overlay (correct):

createPortal(jsx("div", {
  "aria-label": d.viewFullscreen,
  "aria-modal": "true",
  className: "fixed inset-0 z-50 flex flex-col bg-background",
  "data-streamdown": "table-fullscreen",
  role: "dialog",
  // ...
}), document.body)

Mermaid fullscreen overlay (missing attributes):

createPortal(jsxs("div", {
  className: "fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm",
  role: "button",  // should be "dialog"
  tabIndex: 0,
  // missing: data-streamdown, aria-modal
}), document.body)

Why this matters

1. CSS targeting: Without data-streamdown, consumers cannot target the mermaid fullscreen overlay with stable CSS selectors. The only option is fragile class-based selectors like .bg-background\/95.fixed.inset-0 which break on any class rename.

2. Accessibility: The overlay is a modal dialog (full-viewport, traps focus, closes on Escape) but uses role="button" and lacks aria-modal="true". Screen readers cannot identify it as a modal.

3. Inconsistency: Table fullscreen has data-streamdown="table-fullscreen", aria-modal="true", and role="dialog". The mermaid fullscreen should follow the same pattern.

Discovered via

We hit this while fixing a z-index layering issue — our chat drawer uses z-index: 200, and the mermaid fullscreen overlay at z-50 was hidden behind it on mobile. Without data-streamdown, we had to use fragile class selectors to elevate the z-index. We're currently working around this with a pnpm patch.

Proposed fix

Add to the mermaid fullscreen overlay element:

• "data-streamdown": "mermaid-fullscreen"
• "aria-modal": "true"
• role: "dialog" (instead of role: "button")

This matches the existing table fullscreen pattern and enables stable CSS targeting + correct accessibility semantics.