[a11y]: File uploader item icon is tabbable & has incorrect role.

[Akshat55]

Package

@carbon/react

Browser

Chrome, Firefox

Operating System

Windows, MacOS

Package version

1.12.0

React version

17/18

Automated testing tool and ruleset

IBM equal access accessibility checker - Latest Deployment

Assistive technology

No response

Description

The tabbable element's role 'img, graphics-document' is not a widget role. The checkmark--filled icon is tabbable (tabindex="0") and the role assigned to the svg is img (role="img").

This accessibility issue can be observed via storybook. Set status to complete & open the canvas in a new tab (With only File uploader item story) & run IBM equal accessibility checker.

Permalink to icon in code.

Have ran the checker on firefox & chrome only.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/iframe.html?args=status:complete&id=components-fileuploader--file-uploader-item&viewMode=story

Steps to reproduce

• Set File uploader item status to complete
• Run checker

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[Akshat55]

I'm not even sure if the icon should be tabbable 🤔

[tw15egan]

It should probably only be tabbable if the status is set to edit, since that is the x button to delete the file