As part of post-audit investigations, a spike into layering a new UI onto the File upload component that should be a bit more friendly to assistive technologies. alphagov/govuk-design-system#4031

Note: This hasn't actually been tested across browsers and ATs yet,

Changes

• Progressively enhances the file input of the File upload component with a custom button and file selection display.
  • This new UI localisable. This adds the potential for buttons to better describe what needs uploading.
  • As much as possible, this new UI behaves similarly to the browser's native controls (e.g. can click on the label or input text to activate the component; supports multiple, accepts and capture attributes; etc.)
• Adds a visual drop zone if a file is dragged over the input.

Thoughts

• There are some features that are not supported yet. For example, the button will still appear useable even if the underlying input has been disabled.
• The native file input is visually hidden but is still exposed to screen readers. I wasn't sure if I could (or should) hide it from them, as it may contain context that the 'enhanced' controls do not. Further testing needed.
• This has been developed to pretty closely resemble native file inputs as they appear in Chromium browsers. We may be interested in styling them more similarly to other form inputs (e.g. having a black border around it.)
• The visual drop zone currently only appears when dragging over the input itself. It may be preferable for it to appear if a file is dragged over anywhere on the page.