File Upload Unexpected Focus Order With Mobile Screenreader

[RLavender98]

Description of the issue

When navigating with Android TalkBack enabled, focus intermittently jumps to an unexpected place on the page after selecting a file through the File Upload component.

Steps to reproduce the issue

1. Navigate to https://design-system.service.gov.uk/components/file-upload/ or other page using the file upload component on a mobile device
2. Enable screenreader
3. Move focus to the file input.
4. Select a file.

Issue is intermittent, have not been able to narrow down any differences in steps between when focus jumps and when it doesn't.

Actual vs expected behaviour

Actual behaviour: Intermittently, after completing the steps to reproduce, the screenreader loses it's focus position, jumping to the top of the browser. We have also observed it move focus to a different element on the page a couple of times.

Expected behaviour: Screenreader focus remains on the file upload component.

Environment (where applicable)

Originally observed on:

• iPhone 8 - iOS 16.5 - Safari 16 with iOS VoiceOver as the screenreader.
• Google Pixel 4a - Android 13 - Chrome 121 with Android TalkBack as the screenreader.

Also been reproduced on a Google Pixel 6 with Android TalkBack enabled.

[querkmachine]

Hi, thanks for raising this.

I've managed to reproduce this (and its intermittent nature) on iOS 17.4.1 using VoiceOver in Safari. Unfortunately, I don't have a modern Android device with TalkBack on hand to test with.

As the form control here is a native element and we don't attach any custom behaviour to it, this is quite likely to be an issue with VoiceOver and TalkBack themselves, rather than an issue unique to GOV.UK Frontend. I was also able to reproduce this on a non-GOV.UK website, which would seem to corroborate that.

We'll do some more digging and see what we can come up with. Thanks again!

[querkmachine]

I've reported this on the WebKit bug tracker. Be aware that it may get moved to Apple's internal tracker if the issue is determined to be with VoiceOver rather than WebKit. alphagov/reported-bugs#88

I haven't reported the issue for Android TalkBack as I don't have the means to reproduce it.

[RLavender98]

@querkmachine Thank you for looking into it and raising the further ticket, really appreciate it!