fix: comprehensive accessibility improvements for Mermaid toolbar icon buttons

.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

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(() => {

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
@@ -78,7 +79,7 @@ export const CodeBlockCopyButton = ({
       type="button"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? <Icon aria-hidden="true" size={14} />}
     </button>
   );
 };

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
@@ -116,7 +117,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
@@ -125,6 +126,7 @@ 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"
             )}
@@ -135,6 +137,7 @@ export const MermaidDownloadDropdown = ({
             {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"
             )}
@@ -145,6 +148,7 @@ export const MermaidDownloadDropdown = ({
             {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"
             )}

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 aria-hidden="true" size={14} />
       </button>
 
       {isFullscreen
@@ -108,14 +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"
               >
-                <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

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);
@@ -167,36 +169,39 @@ 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"
             )}
             disabled={zoom >= maxZoom}
             onClick={handleZoomIn}
-            title="Zoom in"
+            title={t.zoomIn}
             type="button"
           >
-            <ZoomInIcon size={16} />
+            <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"
             )}
             disabled={zoom <= minZoom}
             onClick={handleZoomOut}
-            title="Zoom out"
+            title={t.zoomOut}
             type="button"
           >
-            <ZoomOutIcon size={16} />
+            <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="Reset zoom and pan"
+            title={t.resetView}
             type="button"
           >
-            <RotateCcwIcon size={16} />
+            <RotateCcwIcon aria-hidden="true" size={16} />
           </button>
         </div>
       ) : null}

packages/streamdown/lib/translations-context.tsx

@@ -33,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 = {
@@ -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",