[a11y]: File uploader status indicators need programmatic equivalent

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

No response

Package version

https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

After a user selects a file to upload from their operating system, the status of the upload is revealed through a series of images which provide no text equivalent.

To meet 4.1.3 Status Messages and 1.1.1 Non-text content

• the 2 states of the file upload mechanism should be given an equivalent status message

status message "uploading"

---

Status message "uploaded" OR possibly "[file name] uploaded"

Solution

Provide a text equivalent, either by making the images visible to assistive technology and providing them with ALT text OR by putting them into a live region and providing text updates to that region.
You could also potentially use a similiar technique to #11198 , using the filename as an ariadescribedby on the icon, so that the user heard 'uploaded, [filename]'

WCAG 2.1 Violation

No response

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader

Steps to reproduce

1. Visit https://react.carbondesignsystem.com/?path=/story/components-fileuploader--file-uploader
2. use the Add file button to choose a file from your system. Choose I file close to the size limit (i.e., just under 500kb).
3. The file name will appear on the page, with an icon for 'uploading' and 'uploaded' to the right (before it becomes the 'delete')

Code of Conduct

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

[mbgower]

@joshblack I think the information I've gathered in the Inline loading topic is relative to this.

[mbgower]

There is also some question about focus handling here, both while adding a file and when deleting a file that has been added for uploading.

• Focus could go to X of file added, (and X of preceding file, when deleted)
• Focus could go to the Add file button
• Focus could go to the file name (and focus doesn't HAVE to necessarily be visible)

There is also the question about conveying the status of the upload/delete, and the necessary/best way to surface it programmatically. Happy to discuss this consideration in detail. Some of this applies to both inline loading and loading, as well as to File uploader