fix: comprehensive accessibility improvements for Mermaid toolbar icon buttons

[aradhyacp]

Description

This PR provides a comprehensive fix for accessibility warnings in Mermaid toolbar components where decorative SVG icons were exposed to the accessibility tree without proper labeling, triggering WCAG violations.

Building upon the valuable work in #486 and #487, this PR extends the fix to cover all Mermaid-related icon buttons consistently, including edge cases that were previously missed.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Refactoring (no functional changes)

Related Issues

Fixes #485

Changes Made

Components Updated:

• mermaid/download-button.tsx - Added aria-label to all buttons and aria-hidden="true" to DownloadIcon
• mermaid/fullscreen-button.tsx - Added aria-label to trigger and close buttons, aria-hidden="true" to icons
• mermaid/pan-zoom.tsx - Added aria-label to all zoom control buttons, aria-hidden="true" to all icons, integrated translation context
• code-block/copy-button.tsx - Added aria-label and aria-hidden="true" to icon (used in Mermaid toolbar via components.tsx)

Translation Support:

• translations-context.tsx - Added zoomIn, zoomOut, and resetView translation keys with default English values

Key Improvements:

• ✅ All decorative SVG icons now have aria-hidden="true" to hide them from accessibility tree
• ✅ All icon-only buttons have proper aria-label attributes for screen reader users
• ✅ Full internationalization support for all toolbar actions
• ✅ Consistent implementation pattern across all Mermaid toolbar components

Testing

• All existing tests pass
• Added new tests for the changes
• Manually tested the changes

Test Coverage

• ✅ All existing Mermaid component tests passing
• ✅ No regressions introduced

Screenshots/Demos

Checklist

• My code follows the project's code style
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• I have created a changeset (pnpm changeset)

Changeset

• I have created a changeset for these changes

Additional Notes

Why this PR is comprehensive:

This PR ensures complete coverage by:

1. Including all Mermaid toolbar components - Previous attempts may have missed the copy button used in the Mermaid toolbar (rendered via components.tsx line 912)
2. Translation Support - Added missing translation keys for zoom controls (zoomIn, zoomOut, resetView) to maintain consistency with other toolbar buttons
3. Consistent implementation - Applied the same accessibility pattern across all components: aria-label on buttons, aria-hidden="true" on decorative icons

Acknowledgments:

Thank you to the contributors of #486 and #487 for identifying this issue and starting the fix. This PR builds on that foundation to provide a complete solution :)

[vercel]

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

A member of the Team first needs to authorize it.