[upload] Incorrect announcement of the item / button

[yuriy-fix]

What is the problem?

Tabbing through downloaded item buttons could lead to an incorrect announcement of the button/item.

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• VoiceOver on MacOS
• VoiceOver on iOS

[vursen]

I guess it might be something by design because, for example, the dialog role + [tabindex=0] seems to work the same way.

Let's have a look at a confirm-dialog with a couple of buttons. VoiceOver announces the dialog role only once, at the moment of opening the dialog. It doesn't announce the role after any button was focused, even if you tab back to the dialog element:

Screen.Recording.2021-12-26.at.19.29.34.mov

Now back to the upload, the problem is tied to the [tabindex=0] attribute on the upload-file. Because the file is not an interactive element itself, I guess screen readers don't know how to handle it with a zero tabindex.

For all that, I'm not sure if the tabindex is needed. If I drop the tabindex, I'm still able to navigate through the file list by VoiceOver with Ctrl+Option+ArrowLeft/Right which is possible because the file list follows the semantic HTML structure:

Screen.Recording.2021-12-26.at.20.56.15.mov

Perhaps, we should go without tabindex and rather focus on improving a11y announcements of the file list, making it easy for the user to use the screen readers' native list navigation. Also, I couldn't see tabindex in the solution recommended by Tetralogical in #91.