Make enhancements to the File Upload component and prepare to ship in v5.9

[kellylee-gds]

Brief

By the end of the brief, we should have:

• reviewed progressively enhanced File upload component and tested this with browsers and AT
• prepared component to be shipped in v5.9, planned for the end of January

We should also consider publicly documenting our decision making rationale regarding these changes on the community backlog or GitHub discussions.

Issues we are trying to solve

Dragon cannot easily activate the File upload button alphagov/govuk-design-system#4031
The 'Choose file' input does not respond to any verbal command. The user must then use verbal keyboard commands such as 'Tab' to use the component. Proposed solution is to layer a new UI onto the component which can be customised (eg as a button), and shows a visual drop zone if a file is dragged over it.

While that is the main issue we want to fix, because we plan to rewrite the component in a way that will make it easier to customise, the following are sensible additions that will make the component also more usable and/or accessible:

• give the upload button a GOV.UK look
• provide a visible drag 'n' drop area (which would close Upload file component has no visual target area when dragging and dropping a file #3685)
• add the possibility to change the text on the button (e.g. "Choose file") and feedback (e.g. "No file chosen")

Epic lead

Anika

Driving role(s)

Patrick, Charlotte

Supporting roles

Romaric, Kelly

Tasks

Preview Give feedback

1. Design work for drag'n'drop state #5613
   accessibility design file upload +3
   
2. Review beeps' implementation and fix known issues #5620
   +0
   
3. Implement drag'n'drop design changes #5611
   +0
   
4. Decide where visible focus should go after selecting a file #5621
   +0
   
5. Fix duplicate file upload button for screen reader users #5612
   +0
   
6. Decide what and how to announce when a file is chosen #5622
   +0
   
7. Document differences between native element and our update, specifically the words used, and decide who this information should be shared with #5625
   accessibility file upload +2
8. Document our approach to improving the File upload component and share with the community #5624
   +0
   
9. Prepare to release iteration in v5.9 #5614
   +0
10. Make the FileUpload component use ConfigurableComponent #5615
    +0
    
11. Decide which attributes to copy from the <input> to the <button> #5617
    +0
    
12. Implement copy of attributes from <input> to the <button> #5616
    +0
    
13. Remove comments for ignoring linting/TypeScript errors #5618
    +0
14. Maintain association between the <button> and the field's <label> #5619
    +0
15. Process only drag'n'drop events containing files #5623
    +0
    
16. Add option to Nunjucks macro to activate the JavaScript enhancement #5644
    file upload +1