Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tree Item - Use aria-hidden for SVGs - (2036570418) #5616

Closed
Tracked by #4599
dqateam opened this issue Oct 25, 2022 · 2 comments
Closed
Tracked by #4599

Tree Item - Use aria-hidden for SVGs - (2036570418) #5616

dqateam opened this issue Oct 25, 2022 · 2 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests.
Milestone
2023 January Prio...

Comments

@dqateam
Copy link
Collaborator

dqateam commented Oct 25, 2022 •
edited by geospatialem

Module:

38 Tree and Tree Item

Violation:

Hide SVGs from assistive technologies using the aria-hidden prop.

image

WCAG Reference:

Instance ID:

2036570418

Severity:

10

Description:

[Issue]
There are SVG images that serve a decorative purpose but are exposed to screen readers.

[User Impact]
Screen readers may announce elements with no alt attribute by their filename and SVGs with no accessible name as "group." This gives screen reader users irrelevant and confusing information.

[Code Reference]

<svg class="check-svg" viewbox="0 0 16 16"><path d=""></path></svg>

Note:

[Suggestion]
Provide alternative text for images. Non-meaningful images must be marked as decorative, which causes screen readers to ignore them. To mark an <svg> element as decorative, add aria-hidden="true" to the element.

[Compliant Code Example]

<svg aria-hidden="true" class="check-svg" viewbox="0 0 16 16"><path d=""></path></svg>

Media Type:

Images

Additional Resources:

  • Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.
@dqateam dqateam added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Oct 25, 2022
@geospatialem geospatialem mentioned this issue Oct 25, 2022
Open
89 tasks
@geospatialem geospatialem changed the title Tree and Tree Item - Provide alternative text for images - (2036570418) Tree Item - Use aria-hidden for SVG when in a selected state - (2036570418) Nov 17, 2022
@geospatialem geospatialem changed the title Tree Item - Use aria-hidden for SVG when in a selected state - (2036570418) Tree Item - Use aria-hidden for SVGs - (2036570418) Nov 17, 2022
@geospatialem geospatialem added this to the 2023 January Priorities milestone Nov 23, 2022
@geospatialem geospatialem added the estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests. label Nov 28, 2022
@driskull driskull self-assigned this Dec 16, 2022
driskull added a commit that referenced this issue Dec 16, 2022
@driskull
fix(icon, graphic, loader): Set aria-hidden on internal svg elements. #…
5c93603 
…5616
@driskull driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Dec 16, 2022
@driskull driskull mentioned this issue Dec 16, 2022
Merged
driskull added a commit that referenced this issue Dec 16, 2022
@driskull
fix(icon, graphic, loader): Set aria-hidden on internal svg elements (#…
4ed3ca0 
…6069)

**Related Issue:** #5616

## Summary

fix(icon, graphic, loader): Set aria-hidden on internal svg elements
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Dec 16, 2022
@github-actions github-actions bot assigned geospatialem and unassigned driskull Dec 16, 2022
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. needs triage Planning workflow - pending design/dev review. labels Dec 16, 2022
@geospatialem
Copy link
Member

Verified in next.698.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 1 Very small fix or change (potentially a single line), doesn't require updates to tests.
Projects
None yet
Milestone
2023 January Priorities
Development

No branches or pull requests
3 participants
@driskull @geospatialem @dqateam