fix(z-breadcrumb): add aria-hidden to separator icons #576
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
Mark breadcrumb separator icons as decorative by adding aria-hidden="true". This ensures screen readers do not announce the visual separators, as the breadcrumb relationship is already conveyed through semantic HTML structure (nav, ol, li elements). Fixes WCAG 1.3.1 (Info and Relationships) violation where separators were being announced without providing meaningful information about relationships.
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.3.1 (Info and Relationships) by adding
aria-hidden="true"to breadcrumb separator icons.Issue: Breadcrumb navigation uses
<z-icon>elements as visual separators between breadcrumb items. These icons render as<img>elements without proper ARIA attributes, causing screen readers to announce them as images without conveying their purpose as decorative separators.Solution: Add
aria-hidden="true"attribute to all three breadcrumb separator icons in thez-breadcrumbcomponent. This marks them as decorative elements that should be ignored by assistive technologies. The breadcrumb relationships are already properly conveyed through semantic HTML structure (<nav aria-label="Breadcrumb">,<ol>,<li>elements).Changes
aria-hidden="true"to homepage node separator (line 230)aria-hidden="true"to overflow menu separator (line 331)aria-hidden="true"to path list item separators (line 409)Test Plan
aria-hidden="true"added to all separator instancesnav,ol,li)Evidence
View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/115/
WCAG Reference:
1.3.1 Info and Relationships