Skip to content

fix(mermaid): add aria-hidden to decorative SVG icons in toolbar buttons#487

Open
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:fix-485
Open

fix(mermaid): add aria-hidden to decorative SVG icons in toolbar buttons#487
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:fix-485

Conversation

@sleitor
Copy link
Copy Markdown
Contributor

@sleitor sleitor commented Mar 30, 2026

Summary

Mermaid toolbar buttons (download, fullscreen, and pan/zoom controls) already have accessible names via title attributes and button 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.

Changes

Added aria-hidden={true} to all decorative icon elements in the mermaid toolbar:

  • MermaidDownloadDropdown: DownloadIcon
  • MermaidFullscreenButton: Maximize2Icon, XIcon
  • MermaidPanZoom: ZoomInIcon, ZoomOutIcon, RotateCcwIcon

Since all buttons already have title attributes for screen reader users, the SVGs are purely decorative and should be hidden from the accessibility tree.

Testing

All 982 existing tests pass (pnpm test).

Fixes #485

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 vercel#485
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Mar 30, 2026

@sleitor is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

@aradhyacp
Copy link
Copy Markdown
Contributor

Thanks for putting this together. The accessibility fixes for the Mermaid toolbar icons are well implemented.

One thing I noticed is that translation support for the zoom controls (zoomIn, zoomOut, resetView) isn’t included, which could help maintain consistency across all toolbar buttons.

I opened a PR that builds on this work and adds full translation support while ensuring consistent accessibility handling across all Mermaid toolbar components

Happy to discuss any improvements :)

@sleitor
Copy link
Copy Markdown
Contributor Author

sleitor commented Mar 30, 2026

Thanks for the kind words, @aradhyacp! 🙏

You're right that translation support for the zoom controls would be a great addition for full consistency. This PR was intentionally scoped to just the minimal aria-hidden fix for the decorative SVG icons (addressing the WCAG 2.4.6 violation without touching the i18n layer), which is why I kept it focused.

Your PR #488 looks like a great complementary improvement — it builds on both #486 and #487 and adds the i18n layer properly. Happy to see the maintainers consider which approach they want to go with or if they'd like to combine the two.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

streamdown-mermaid: toolbar icon button contains unlabeled SVG and triggers accessibility warning

2 participants