search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.13k stars 320 forks source link

File Upload Unexpected Focus Order With Mobile Screenreader #4965

Open RLavender98 opened 2 months ago

RLavender98 commented 2 months ago

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:

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

querkmachine commented 2 months ago

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 commented 2 months ago

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. https://github.com/alphagov/reported-bugs/issues/88

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

RLavender98 commented 2 months ago

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