Skip to content

fix(icons): add aria-hidden attribute to all icon components for accessibility(#485)#486

Open
simon5057 wants to merge 1 commit intovercel:mainfrom
simon5057:main
Open

fix(icons): add aria-hidden attribute to all icon components for accessibility(#485)#486
simon5057 wants to merge 1 commit intovercel:mainfrom
simon5057:main

Conversation

@simon5057
Copy link
Copy Markdown

fix(icons): add aria-hidden to decorative SVG icons for accessibility

Problem

Toolbar buttons in the Mermaid integration (and other components) contain inline SVG icons that are exposed to the accessibility tree, triggering the warning: "Content with images must be labeled" in accessibility audits (Firefox Accessibility Inspector, axe DevTools). While the parent buttons have title attributes providing accessible names, the SVGs themselves lacked proper aria-hidden attributes to mark them as decorative.

Solution

Added aria-hidden="true" to all 10 SVG icon components in packages/streamdown/lib/icons.tsx:

  • CheckIcon
  • CopyIcon
  • DownloadIcon
  • Loader2Icon
  • Maximize2Icon
  • RotateCcwIcon
  • XIcon
  • ExternalLinkIcon
  • ZoomInIcon
  • ZoomOutIcon

This hides the decorative SVGs from the accessibility tree. Screen readers will rely on the parent button title attributes instead, which already provide meaningful labels (e.g., "Zoom in", "Copy Code", "Download").

Testing

  • Verified with accessibility audit tools that the "Content with images must be labeled" warning is resolved.

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.

1 participant