StatusIndicator.Icon: Screen readers always announce "image" when icons are used as decoration

[williamjstanton]

🐛 Bug Report

When icons are used in the Status Indicator component, screen readers are always exposing the svg icon when it may not be necessary to do so.

To Reproduce

Steps to reproduce the behavior:

1. Turn on VoiceOver and launch Safari
2. Navigate to Canvas Kit Design Site > Components > Indicators > Status Indicator
3. Using heading navigation to jump to the "Icon" heading: Ctrl + Opt + Cmd + H
4. Read text nodes on screen: Ctrl + Opt + ArrowRight
5. [Issue] Observe: redundant "unpublished image" and "unpublished" text
6. [SCENARIO 2] Continue reading through Overflow section: Ctrl + Opt + ArrowRight
7. [Issue] Observe: VoiceOver can read an unlabeled graphic, "image"

Expected Behavior

VoiceOver should not have announced any "image" on the status indicator.

Fix: can we conditionally add role="img" if the aria-label prop is set on the icon?

Actual Results

VoiceOver announces "image" when reading the Status Indicator with an icon. The ARIA role="img" attribute is always applied to the svg wrapper, regardless of whether it is actually needed.

Browser (if applicable)

All of them.

Link to repl or repo (highly encouraged)

Status Indicator Icon: https://canvas.workdaydesign.com/components/indicators/status-indicator/#tab=web&heading=icon Status Indicator Overflow: https://canvas.workdaydesign.com/components/indicators/status-indicator/#tab=web&heading=overflow

Include a screenshot of a visual bug