diff --git a/.changeset/fix-mermaid-aria-hidden.md b/.changeset/fix-mermaid-aria-hidden.md new file mode 100644 index 00000000..43b62241 --- /dev/null +++ b/.changeset/fix-mermaid-aria-hidden.md @@ -0,0 +1,13 @@ +--- +'streamdown': patch +--- + +fix(mermaid): add aria-hidden to decorative SVG icons in mermaid toolbar buttons + +Mermaid toolbar buttons (download, fullscreen, pan/zoom controls) already have +accessible titles/labels, but the inline SVG icons were exposed to the accessibility +tree causing "Content with images must be labeled" warnings. Added aria-hidden={true} +to all decorative icon elements in download-button, fullscreen-button, and pan-zoom +components. + +Fixes #485 diff --git a/packages/streamdown/lib/mermaid/download-button.tsx b/packages/streamdown/lib/mermaid/download-button.tsx index 7f287f2d..479c47cd 100644 --- a/packages/streamdown/lib/mermaid/download-button.tsx +++ b/packages/streamdown/lib/mermaid/download-button.tsx @@ -116,7 +116,7 @@ export const MermaidDownloadDropdown = ({ title={t.downloadDiagram} type="button" > - {children ?? } + {children ?? } {isOpen ? (
- + {isFullscreen @@ -115,7 +115,7 @@ export const MermaidFullscreenButton = ({ title={t.exitFullscreen} type="button" > - + {/* biome-ignore lint/a11y/noStaticElementInteractions: "div with role=presentation is used for event propagation control" */}
- +
) : null}