From 1bd330a24d58f1a4fe4e971bd6e56cf6d1803ce8 Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:05:30 +0530
Subject: [PATCH 01/11] fix(pan-zoom): add aria-labels and improve
 accessibility for zoom buttons

---
 packages/streamdown/lib/mermaid/pan-zoom.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/streamdown/lib/mermaid/pan-zoom.tsx b/packages/streamdown/lib/mermaid/pan-zoom.tsx
index c618f77b..957c724b 100644
--- a/packages/streamdown/lib/mermaid/pan-zoom.tsx
+++ b/packages/streamdown/lib/mermaid/pan-zoom.tsx
@@ -174,8 +174,9 @@ export const PanZoom = ({
             onClick={handleZoomIn}
             title="Zoom in"
             type="button"
+            aria-label="Zoom in"
           >
-            <ZoomInIcon size={16} />
+            <ZoomInIcon size={16} aria-hidden="true" />
           </button>
           <button
             className={cn(
@@ -185,8 +186,9 @@ export const PanZoom = ({
             onClick={handleZoomOut}
             title="Zoom out"
             type="button"
+            aria-label="Zoom out"
           >
-            <ZoomOutIcon size={16} />
+            <ZoomOutIcon size={16} aria-hidden="true"/>
           </button>
           <button
             className={cn(
@@ -195,8 +197,9 @@ export const PanZoom = ({
             onClick={handleReset}
             title="Reset zoom and pan"
             type="button"
+            aria-label="Reset zoom and pan"
           >
-            <RotateCcwIcon size={16} />
+            <RotateCcwIcon size={16} aria-hidden="true"/>
           </button>
         </div>
       ) : null}

From 980aaa3e279b7b7d2118b25d305c9faf1f40c36c Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:05:43 +0530
Subject: [PATCH 02/11] fix(fullscreen-button): add aria-labels for
 accessibility on fullscreen toggle buttons

---
 packages/streamdown/lib/mermaid/fullscreen-button.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/streamdown/lib/mermaid/fullscreen-button.tsx b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
index 316095da..3601c9bc 100644
--- a/packages/streamdown/lib/mermaid/fullscreen-button.tsx
+++ b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
@@ -87,8 +87,9 @@ export const MermaidFullscreenButton = ({
         title={t.viewFullscreen}
         type="button"
         {...props}
+        aria-label={t.viewFullscreen}
       >
-        <Maximize2Icon size={14} />
+        <Maximize2Icon size={14} aria-hidden="true"/>
       </button>
 
       {isFullscreen
@@ -114,8 +115,9 @@ export const MermaidFullscreenButton = ({
                 onClick={handleToggle}
                 title={t.exitFullscreen}
                 type="button"
+                aria-label={t.exitFullscreen}
               >
-                <XIcon size={20} />
+                <XIcon size={20} aria-hidden="true" />
               </button>
               {/* biome-ignore lint/a11y/noStaticElementInteractions: "div with role=presentation is used for event propagation control" */}
               <div

From 71eaa356403752bcbae159c8049ccb8b204b163a Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:05:57 +0530
Subject: [PATCH 03/11] fix(download-button): add aria-labels for accessibility
 on download buttons

---
 packages/streamdown/lib/mermaid/download-button.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/streamdown/lib/mermaid/download-button.tsx b/packages/streamdown/lib/mermaid/download-button.tsx
index 7f287f2d..2de16911 100644
--- a/packages/streamdown/lib/mermaid/download-button.tsx
+++ b/packages/streamdown/lib/mermaid/download-button.tsx
@@ -115,8 +115,9 @@ export const MermaidDownloadDropdown = ({
         onClick={() => setIsOpen(!isOpen)}
         title={t.downloadDiagram}
         type="button"
+        aria-label={t.downloadDiagram}
       >
-        {children ?? <icons.DownloadIcon size={14} />}
+        {children ?? <icons.DownloadIcon size={14} aria-hidden="true"/>}
       </button>
       {isOpen ? (
         <div
@@ -131,6 +132,7 @@ export const MermaidDownloadDropdown = ({
             onClick={() => downloadMermaid("svg")}
             title={t.downloadDiagramAsSvg}
             type="button"
+            aria-label={t.downloadDiagramAsSvg}
           >
             {t.mermaidFormatSvg}
           </button>
@@ -141,6 +143,7 @@ export const MermaidDownloadDropdown = ({
             onClick={() => downloadMermaid("png")}
             title={t.downloadDiagramAsPng}
             type="button"
+            aria-label={t.downloadDiagramAsPng}
           >
             {t.mermaidFormatPng}
           </button>
@@ -151,6 +154,7 @@ export const MermaidDownloadDropdown = ({
             onClick={() => downloadMermaid("mmd")}
             title={t.downloadDiagramAsMmd}
             type="button"
+            aria-label={t.downloadDiagramAsMmd}
           >
             {t.mermaidFormatMmd}
           </button>

From 7374b985571b3382ba52530c65f86cd61db13eca Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:06:07 +0530
Subject: [PATCH 04/11] fix(copy-button): add aria-label for accessibility and
 improve icon accessibility

---
 packages/streamdown/lib/code-block/copy-button.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/streamdown/lib/code-block/copy-button.tsx b/packages/streamdown/lib/code-block/copy-button.tsx
index b254cb05..e5f4d4f4 100644
--- a/packages/streamdown/lib/code-block/copy-button.tsx
+++ b/packages/streamdown/lib/code-block/copy-button.tsx
@@ -75,10 +75,11 @@ export const CodeBlockCopyButton = ({
       disabled={isAnimating}
       onClick={copyToClipboard}
       title={t.copyCode}
+      aria-label={t.copyCode}
       type="button"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? <Icon size={14} aria-hidden="true"/>}
     </button>
   );
 };

From f14b72243c810b9d253ad4ce75b155fbe130665e Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:19:48 +0530
Subject: [PATCH 05/11] fix(translations): add translations for zoom and reset
 view actions

---
 packages/streamdown/lib/translations-context.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/streamdown/lib/translations-context.tsx b/packages/streamdown/lib/translations-context.tsx
index fe11bc2d..aa429028 100644
--- a/packages/streamdown/lib/translations-context.tsx
+++ b/packages/streamdown/lib/translations-context.tsx
@@ -20,6 +20,9 @@ export interface StreamdownTranslations {
   downloadDiagramAsPng: string;
   downloadDiagramAsSvg: string;
   downloadFile: string;
+  zoomIn: string;
+  zoomOut: string;
+  resetView: string;
   // Image
   downloadImage: string;
   downloadTable: string;
@@ -53,6 +56,9 @@ export const defaultTranslations: StreamdownTranslations = {
   mermaidFormatSvg: "SVG",
   mermaidFormatPng: "PNG",
   mermaidFormatMmd: "MMD",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  resetView: "Reset zoom and pan",
   // Table
   copyTable: "Copy table",
   copyTableAsMarkdown: "Copy table as Markdown",

From feb59c176909b891347434499e08c39a2fa405c9 Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:20:02 +0530
Subject: [PATCH 06/11] fix(pan-zoom): add translations for zoom and reset view
 button actions

---
 packages/streamdown/lib/mermaid/pan-zoom.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/streamdown/lib/mermaid/pan-zoom.tsx b/packages/streamdown/lib/mermaid/pan-zoom.tsx
index 957c724b..44a6850c 100644
--- a/packages/streamdown/lib/mermaid/pan-zoom.tsx
+++ b/packages/streamdown/lib/mermaid/pan-zoom.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useIcons } from "../icon-context";
 import { useCn } from "../prefix-context";
+import { useTranslations } from "../translations-context";
 
 interface PanZoomProps {
   children: ReactNode;
@@ -26,6 +27,7 @@ export const PanZoom = ({
 }: PanZoomProps) => {
   const { RotateCcwIcon, ZoomInIcon, ZoomOutIcon } = useIcons();
   const cn = useCn();
+  const t = useTranslations();
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [zoom, setZoom] = useState(initialZoom);
@@ -172,9 +174,9 @@ export const PanZoom = ({
             )}
             disabled={zoom >= maxZoom}
             onClick={handleZoomIn}
-            title="Zoom in"
+            title={t.zoomIn}
             type="button"
-            aria-label="Zoom in"
+            aria-label={t.zoomIn}
           >
             <ZoomInIcon size={16} aria-hidden="true" />
           </button>
@@ -184,22 +186,22 @@ export const PanZoom = ({
             )}
             disabled={zoom <= minZoom}
             onClick={handleZoomOut}
-            title="Zoom out"
+            title={t.zoomOut}
             type="button"
-            aria-label="Zoom out"
+            aria-label={t.zoomOut}
           >
-            <ZoomOutIcon size={16} aria-hidden="true"/>
+            <ZoomOutIcon size={16} aria-hidden="true" />
           </button>
           <button
             className={cn(
               "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             )}
             onClick={handleReset}
-            title="Reset zoom and pan"
+            title={t.resetView}
             type="button"
-            aria-label="Reset zoom and pan"
+            aria-label={t.resetView}
           >
-            <RotateCcwIcon size={16} aria-hidden="true"/>
+            <RotateCcwIcon size={16} aria-hidden="true" />
           </button>
         </div>
       ) : null}

From 17d4897be7def0932ea4caa5c735f4ca753d272f Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 18:20:11 +0530
Subject: [PATCH 07/11] fix(buttons): add space after self-closing tags for
 consistency

---
 packages/streamdown/lib/code-block/copy-button.tsx    | 2 +-
 packages/streamdown/lib/mermaid/download-button.tsx   | 2 +-
 packages/streamdown/lib/mermaid/fullscreen-button.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/streamdown/lib/code-block/copy-button.tsx b/packages/streamdown/lib/code-block/copy-button.tsx
index e5f4d4f4..a6e6176c 100644
--- a/packages/streamdown/lib/code-block/copy-button.tsx
+++ b/packages/streamdown/lib/code-block/copy-button.tsx
@@ -79,7 +79,7 @@ export const CodeBlockCopyButton = ({
       type="button"
       {...props}
     >
-      {children ?? <Icon size={14} aria-hidden="true"/>}
+      {children ?? <Icon size={14} aria-hidden="true" />}
     </button>
   );
 };
diff --git a/packages/streamdown/lib/mermaid/download-button.tsx b/packages/streamdown/lib/mermaid/download-button.tsx
index 2de16911..458f8eb1 100644
--- a/packages/streamdown/lib/mermaid/download-button.tsx
+++ b/packages/streamdown/lib/mermaid/download-button.tsx
@@ -117,7 +117,7 @@ export const MermaidDownloadDropdown = ({
         type="button"
         aria-label={t.downloadDiagram}
       >
-        {children ?? <icons.DownloadIcon size={14} aria-hidden="true"/>}
+        {children ?? <icons.DownloadIcon size={14} aria-hidden="true" />}
       </button>
       {isOpen ? (
         <div
diff --git a/packages/streamdown/lib/mermaid/fullscreen-button.tsx b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
index 3601c9bc..e2a95b88 100644
--- a/packages/streamdown/lib/mermaid/fullscreen-button.tsx
+++ b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
@@ -89,7 +89,7 @@ export const MermaidFullscreenButton = ({
         {...props}
         aria-label={t.viewFullscreen}
       >
-        <Maximize2Icon size={14} aria-hidden="true"/>
+        <Maximize2Icon size={14} aria-hidden="true" />
       </button>
 
       {isFullscreen

From bf04edb538bacea16437bf1d54556d2b78789029 Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 19:01:56 +0530
Subject: [PATCH 08/11] add changeset: for Ensure all Mermaid toolbar SVG icons
 are properly hidden from accessibility tree

---
 .changeset/light-moose-travel.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/light-moose-travel.md

diff --git a/.changeset/light-moose-travel.md b/.changeset/light-moose-travel.md
new file mode 100644
index 00000000..fbae4833
--- /dev/null
+++ b/.changeset/light-moose-travel.md
@@ -0,0 +1,9 @@
+---
+"streamdown": patch
+---
+
+Fix accessibility warnings for Mermaid toolbar icon buttons:
+
+- Add `aria-hidden="true"` to all decorative SVG icons to hide them from screen readers
+- Add `aria-label` attributes to all icon-only buttons for proper screen reader announcements
+- Add translation keys (`zoomIn`, `zoomOut`, `resetView`) for zoom controls

From d98dc6d2dfd98defcd9fd809715a12c17cae1aeb Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 19:19:07 +0530
Subject: [PATCH 09/11] fix(tests): update button accessibility labels for
 diagram downloads

---
 packages/streamdown/__tests__/mermaid.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/streamdown/__tests__/mermaid.test.tsx b/packages/streamdown/__tests__/mermaid.test.tsx
index 7af696fd..f7b4a1a9 100644
--- a/packages/streamdown/__tests__/mermaid.test.tsx
+++ b/packages/streamdown/__tests__/mermaid.test.tsx
@@ -511,7 +511,7 @@ describe("Mermaid", () => {
       });
 
       const mmdButton = await waitFor(() =>
-        getByRole("button", { name: "MMD" })
+        getByRole("button", { name: "Download diagram as MMD" })
       );
 
       await act(() => {
@@ -553,7 +553,7 @@ describe("Mermaid", () => {
       });
 
       const svgButton = await waitFor(() =>
-        getByRole("button", { name: "SVG" })
+        getByRole("button", { name: "Download diagram as SVG" })
       );
 
       await act(() => {
@@ -624,7 +624,7 @@ describe("Mermaid", () => {
         });
 
         const pngButton = await waitFor(() =>
-          getByRole("button", { name: "PNG" })
+          getByRole("button", { name: "Download diagram as PNG" })
         );
 
         await act(() => {
@@ -665,7 +665,7 @@ describe("Mermaid", () => {
       });
 
       const svgButton = await waitFor(() =>
-        getByRole("button", { name: "SVG" })
+        getByRole("button", { name: "Download diagram as SVG" })
       );
 
       await act(() => {

From 7f9e2e80b13b4d28b3194d0654c8fd511cc06e55 Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 19:28:15 +0530
Subject: [PATCH 10/11] fix(accessibility): add aria-labels for buttons in
 Mermaid components

---
 packages/streamdown/lib/code-block/copy-button.tsx   |  4 ++--
 packages/streamdown/lib/mermaid/download-button.tsx  | 10 +++++-----
 .../streamdown/lib/mermaid/fullscreen-button.tsx     |  6 +++---
 packages/streamdown/lib/mermaid/pan-zoom.tsx         | 12 ++++++------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/streamdown/lib/code-block/copy-button.tsx b/packages/streamdown/lib/code-block/copy-button.tsx
index a6e6176c..66832413 100644
--- a/packages/streamdown/lib/code-block/copy-button.tsx
+++ b/packages/streamdown/lib/code-block/copy-button.tsx
@@ -67,6 +67,7 @@ export const CodeBlockCopyButton = ({
 
   return (
     <button
+      aria-label={t.copyCode}
       className={cn(
         "cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
@@ -75,11 +76,10 @@ export const CodeBlockCopyButton = ({
       disabled={isAnimating}
       onClick={copyToClipboard}
       title={t.copyCode}
-      aria-label={t.copyCode}
       type="button"
       {...props}
     >
-      {children ?? <Icon size={14} aria-hidden="true" />}
+      {children ?? <Icon aria-hidden="true" size={14} />}
     </button>
   );
 };
diff --git a/packages/streamdown/lib/mermaid/download-button.tsx b/packages/streamdown/lib/mermaid/download-button.tsx
index 458f8eb1..b77541bc 100644
--- a/packages/streamdown/lib/mermaid/download-button.tsx
+++ b/packages/streamdown/lib/mermaid/download-button.tsx
@@ -107,6 +107,7 @@ export const MermaidDownloadDropdown = ({
   return (
     <div className={cn("relative")} ref={dropdownRef}>
       <button
+        aria-label={t.downloadDiagram}
         className={cn(
           "cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className
@@ -115,9 +116,8 @@ export const MermaidDownloadDropdown = ({
         onClick={() => setIsOpen(!isOpen)}
         title={t.downloadDiagram}
         type="button"
-        aria-label={t.downloadDiagram}
       >
-        {children ?? <icons.DownloadIcon size={14} aria-hidden="true" />}
+        {children ?? <icons.DownloadIcon aria-hidden="true" size={14} />}
       </button>
       {isOpen ? (
         <div
@@ -126,35 +126,35 @@ export const MermaidDownloadDropdown = ({
           )}
         >
           <button
+            aria-label={t.downloadDiagramAsSvg}
             className={cn(
               "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40"
             )}
             onClick={() => downloadMermaid("svg")}
             title={t.downloadDiagramAsSvg}
             type="button"
-            aria-label={t.downloadDiagramAsSvg}
           >
             {t.mermaidFormatSvg}
           </button>
           <button
+            aria-label={t.downloadDiagramAsPng}
             className={cn(
               "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40"
             )}
             onClick={() => downloadMermaid("png")}
             title={t.downloadDiagramAsPng}
             type="button"
-            aria-label={t.downloadDiagramAsPng}
           >
             {t.mermaidFormatPng}
           </button>
           <button
+            aria-label={t.downloadDiagramAsMmd}
             className={cn(
               "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40"
             )}
             onClick={() => downloadMermaid("mmd")}
             title={t.downloadDiagramAsMmd}
             type="button"
-            aria-label={t.downloadDiagramAsMmd}
           >
             {t.mermaidFormatMmd}
           </button>
diff --git a/packages/streamdown/lib/mermaid/fullscreen-button.tsx b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
index e2a95b88..613e7aa6 100644
--- a/packages/streamdown/lib/mermaid/fullscreen-button.tsx
+++ b/packages/streamdown/lib/mermaid/fullscreen-button.tsx
@@ -89,7 +89,7 @@ export const MermaidFullscreenButton = ({
         {...props}
         aria-label={t.viewFullscreen}
       >
-        <Maximize2Icon size={14} aria-hidden="true" />
+        <Maximize2Icon aria-hidden="true" size={14} />
       </button>
 
       {isFullscreen
@@ -109,15 +109,15 @@ export const MermaidFullscreenButton = ({
               tabIndex={0}
             >
               <button
+                aria-label={t.exitFullscreen}
                 className={cn(
                   "absolute top-4 right-4 z-10 rounded-md p-2 text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
                 )}
                 onClick={handleToggle}
                 title={t.exitFullscreen}
                 type="button"
-                aria-label={t.exitFullscreen}
               >
-                <XIcon size={20} aria-hidden="true" />
+                <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 44a6850c..71d0cee3 100644
--- a/packages/streamdown/lib/mermaid/pan-zoom.tsx
+++ b/packages/streamdown/lib/mermaid/pan-zoom.tsx
@@ -169,6 +169,7 @@ export const PanZoom = ({
           )}
         >
           <button
+            aria-label={t.zoomIn}
             className={cn(
               "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
             )}
@@ -176,11 +177,11 @@ export const PanZoom = ({
             onClick={handleZoomIn}
             title={t.zoomIn}
             type="button"
-            aria-label={t.zoomIn}
           >
-            <ZoomInIcon size={16} aria-hidden="true" />
+            <ZoomInIcon aria-hidden="true" size={16} />
           </button>
           <button
+            aria-label={t.zoomOut}
             className={cn(
               "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
             )}
@@ -188,20 +189,19 @@ export const PanZoom = ({
             onClick={handleZoomOut}
             title={t.zoomOut}
             type="button"
-            aria-label={t.zoomOut}
           >
-            <ZoomOutIcon size={16} aria-hidden="true" />
+            <ZoomOutIcon aria-hidden="true" size={16} />
           </button>
           <button
+            aria-label={t.resetView}
             className={cn(
               "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             )}
             onClick={handleReset}
             title={t.resetView}
             type="button"
-            aria-label={t.resetView}
           >
-            <RotateCcwIcon size={16} aria-hidden="true" />
+            <RotateCcwIcon aria-hidden="true" size={16} />
           </button>
         </div>
       ) : null}

From 12e5b6c1b53912e144ca3b643512e75aca604f62 Mon Sep 17 00:00:00 2001
From: aradhyacp <cparadhya@proton.me>
Date: Mon, 30 Mar 2026 19:28:20 +0530
Subject: [PATCH 11/11] fix(translations): reorder zoom and reset view
 properties in StreamdownTranslations interface

---
 packages/streamdown/lib/translations-context.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/streamdown/lib/translations-context.tsx b/packages/streamdown/lib/translations-context.tsx
index aa429028..ef857911 100644
--- a/packages/streamdown/lib/translations-context.tsx
+++ b/packages/streamdown/lib/translations-context.tsx
@@ -20,9 +20,6 @@ export interface StreamdownTranslations {
   downloadDiagramAsPng: string;
   downloadDiagramAsSvg: string;
   downloadFile: string;
-  zoomIn: string;
-  zoomOut: string;
-  resetView: string;
   // Image
   downloadImage: string;
   downloadTable: string;
@@ -36,10 +33,13 @@ export interface StreamdownTranslations {
   mermaidFormatSvg: string;
   openExternalLink: string;
   openLink: string;
+  resetView: string;
   tableFormatCsv: string;
   tableFormatMarkdown: string;
   tableFormatTsv: string;
   viewFullscreen: string;
+  zoomIn: string;
+  zoomOut: string;
 }
 
 export const defaultTranslations: StreamdownTranslations = {