[a11y]: File uploader error message not announced or exposed on button focus

[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

JAWS

Description

When a user uploads too large a file, a message "File size exceeds limit" is displayed, along with a warning symbol. If this implementation is going to be accessible the message:

1. needs to be exposed when it appears
2. needs to be announced when focus lands on the associated delete button.

Problems captured in issues with JAWS in video.

I'll mention that I suspect this 'file' is not even equivalent to the regular file that appears after uploading (since the file has not uploaded, right). It is probably better to just expose this error message as a modal. It would never appear in the list because it wasn't uploaded. That would involve design, but is the recommended approach.

Barring that, putting both the error and the message into an alert region and making it an aria-describedby of the delete button would accomplish it, I think.

File size exceeds limit
500kb max file size. Select a new file and try again.

WCAG 2.1 Violation

WCAG 3.3.1 Error Identification, etc.

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application

Steps to reproduce

To replicate

1. Start JAWS
2. choose a file that is larger than 500kb for upload. The focus seems to move to the new file and it will be outlined in red. However, focus is not actually there, and the text will not be announced
3. Tab to the 'file' in error. The text will not be announced.

Code of Conduct

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

[mbgower]

@sstrubberg yeah, I'd keep this as a sev 2. It affects a user's ability to be aware of the error.