fix(z-icon): add aria-hidden to SVG for improved accessibility #575
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds aria-hidden='true' to the SVG element inside z-icon's shadow DOM to ensure decorative icons are properly hidden from all assistive technologies. While the Host element already has aria-hidden, adding it to the SVG provides defense-in-depth and ensures consistent screen reader behavior across different assistive technologies.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes WCAG 1.1.1 (Non-text Content) by adding
aria-hidden="true"to the SVG element insidez-icon's shadow DOM.Issue: Decorative icon images in buttons (such as the modal close button) are exposed to screen readers, even though the parent button has proper accessible text. This creates redundant and confusing information for screen reader users.
Solution: Added
aria-hidden="true"attribute to the SVG element within z-icon's shadow DOM. This provides defense-in-depth alongside the existingaria-hidden="true"on the Host element, ensuring consistent behavior across all assistive technologies.Impact
This fix applies to all z-icon instances throughout the design system, ensuring decorative icons are properly hidden from assistive technologies. The button's existing accessible label ("chiudi modale") remains visible to screen readers.
Test Plan
Evidence
View full audit details: https://app.workback.ai/dashboard/issue/93/
WCAG Reference: 1.1.1 Non-text Content (Level A)