From b09df0a6c8a3aeef71475550f4534ab7ad4b8464 Mon Sep 17 00:00:00 2001
From: Dmitrii Troitskii <jsleitor@gmail.com>
Date: Mon, 30 Mar 2026 10:39:35 +0000
Subject: [PATCH] fix(mermaid): add aria-hidden to decorative SVG icons in
 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, triggering "Content with images must be labeled"
warnings in Firefox Accessibility Inspector and axe DevTools.

Added aria-hidden={true} to all decorative icon elements:
- MermaidDownloadDropdown: DownloadIcon
- MermaidFullscreenButton: Maximize2Icon, XIcon
- MermaidPanZoom: ZoomInIcon, ZoomOutIcon, RotateCcwIcon

Fixes #485
---
 .changeset/fix-mermaid-aria-hidden.md               | 13 +++++++++++++
 packages/streamdown/lib/mermaid/download-button.tsx |  2 +-
 .../streamdown/lib/mermaid/fullscreen-button.tsx    |  4 ++--
 packages/streamdown/lib/mermaid/pan-zoom.tsx        |  6 +++---
 4 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fix-mermaid-aria-hidden.md

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 ?? <icons.DownloadIcon size={14} />}
+        {children ?? <icons.DownloadIcon aria-hidden={true} size={14} />}
       </button>
       {isOpen ? (
         <div
diff --git a/packages/streamdown/lib/mermaid/fullscreen-button.tsx b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
index 316095da..c0afa81d 100644
--- a/packages/streamdown/lib/mermaid/fullscreen-button.tsx
+++ b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
@@ -88,7 +88,7 @@ export const MermaidFullscreenButton = ({
         type="button"
         {...props}
       >
-        <Maximize2Icon size={14} />
+        <Maximize2Icon aria-hidden={true} size={14} />
       </button>
 
       {isFullscreen
@@ -115,7 +115,7 @@ export const MermaidFullscreenButton = ({
                 title={t.exitFullscreen}
                 type="button"
               >
-                <XIcon size={20} />
+                <XIcon aria-hidden={true} size={20} />
               </button>
               {/* biome-ignore lint/a11y/noStaticElementInteractions: "div with role=presentation is used for event propagation control" */}
               <div
diff --git a/packages/streamdown/lib/mermaid/pan-zoom.tsx b/packages/streamdown/lib/mermaid/pan-zoom.tsx
index c618f77b..909f0ec1 100644
--- a/packages/streamdown/lib/mermaid/pan-zoom.tsx
+++ b/packages/streamdown/lib/mermaid/pan-zoom.tsx
@@ -175,7 +175,7 @@ export const PanZoom = ({
             title="Zoom in"
             type="button"
           >
-            <ZoomInIcon size={16} />
+            <ZoomInIcon aria-hidden={true} size={16} />
           </button>
           <button
             className={cn(
@@ -186,7 +186,7 @@ export const PanZoom = ({
             title="Zoom out"
             type="button"
           >
-            <ZoomOutIcon size={16} />
+            <ZoomOutIcon aria-hidden={true} size={16} />
           </button>
           <button
             className={cn(
@@ -196,7 +196,7 @@ export const PanZoom = ({
             title="Reset zoom and pan"
             type="button"
           >
-            <RotateCcwIcon size={16} />
+            <RotateCcwIcon aria-hidden={true} size={16} />
           </button>
         </div>
       ) : null}