fix(mermaid): add aria-hidden to decorative SVG icons in toolbar buttons#487
fix(mermaid): add aria-hidden to decorative SVG icons in toolbar buttons#487sleitor wants to merge 1 commit intovercel:mainfrom
Conversation
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
|
@sleitor is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
|
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 ( 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 :) |
|
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. |
Summary
Mermaid toolbar buttons (download, fullscreen, and pan/zoom controls) already have accessible names via
titleattributes 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:DownloadIconMermaidFullscreenButton:Maximize2Icon,XIconMermaidPanZoom:ZoomInIcon,ZoomOutIcon,RotateCcwIconSince all buttons already have
titleattributes 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