feat(packages/sui-svg): add role presentation to decorative svgs #1933
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
lolarufino
requested review from
sui-bot,
kikoruiz,
andresz1,
nucliweb,
ferransimon and
andresin87
as code owners
jordevo
approved these changes
Jun 6, 2025
AgonisticKatai
approved these changes
Jun 6, 2025
tomasmax
approved these changes
Jun 6, 2025
andresin87
approved these changes
Jun 6, 2025
|
👏 |
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.
Description
This pull request adds role="presentation" to decorative svgs that already have aria-hidden="true" to improve accessibility compliance and ensure a consistent experience across assistive technologies.
While aria-hidden="true" removes an element and its children from the accessibility tree, effectively hiding it from screen readers, adding role="presentation" serves a complementary purpose:
💚
aria-hidden="true": Completely hides the element and its descendants from assistive technologies.💚
role="presentation": Removes the semantic meaning of the element but still exposes its content to assistive technologies. This is particularly useful for elements that are purely decorative and do not convey meaningful information.The SVG is hidden from screen readers (aria-hidden="true").
The SVG does not add any semantic meaning to the accessibility tree (role="presentation").