Upload file component has no visual target area when dragging and dropping a file

[CharlotteDowns]

This issue is from May 2023 external accessibility audit report.

Usability issue

Issue ID:
DAC_Usability_Upload_File_01

URLs:
https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/upload-your-photo-success

Screen shots

There is no indication provided for users to know that they can drag and drop files onto the page, as well as when doing so, any indication of where they can drop the file, possibly resulting in the file being dropped in an incorrect location and not being successfully added for uploading.

Current code ref(s)

#photo

Cognitive user comments

“Drag and drop works for photo upload. However, there is no text information or box that appears to tell me where to drop it while I am in the process of dragging a photo on the page. I would normally expect that, as this is what usually tells me that a photo can be uploaded in this way. Without it, this functionality would go overlooked by myself and other users unless it had something to tell me this functionality was present”

Solution

Some users rely on visual indication to convey functionality of components to aid them in understanding what is available to them presently on the page. Consider providing some kind of indication on the page that the drag and drop feature is available, and when doing so that there is also an indication of where to drop the file.

[querkmachine]

This is the user agent's native form control. Pretty much all UA's support dragging and dropping of files into inputs, though I'm not aware of any that provide a visual affordance when doing so.

We could try rolling our own version of a file upload, but that's not a small ask as we'd likely want to reproduce a fair amount of the native functionality—a visual button, drag and drop, showing the name of the selected file, the option to select multiple files simultaneously, and potentially the accept and capture attributes.

We would be investing time and resources into producing something that will, optimistically, equal the functionality of what already exists, and has the potential to be worse. Although I've made a very basic spike to provide a visual affordance on top of the native input, I don't think there's that much value in changing the current component.

[querkmachine]

Comment from @davidc-gds on Slack, copied here for posterity:

I feel like this one is more of a “add evidence to our backlog item on file upload, and consider making a better file uploader in the future”?

[querkmachine]

It doesn't seem like there's much appetite for us to do anything here at this time. As such, I'm going to close this issue.

The usability issue raised has already been noted in the backlog issue. Discussions about drag and drop functionality, as well as multiple examples of them in use, can be found there: alphagov/govuk-design-system-backlog#49

[querkmachine]

The lack of native drag and drop affordance has been noted on the component's page.
alphagov/govuk-design-system#2996