Upload a file button gets no focus

[trevorsaint]

How would you expect it to work?

I would expect the button to receive tabbed focus and a yellow border appear like all other form elements. The enter key or space bar may open up the file selection dialog.

How does it work currently?

Skips tabbed focus completely.

Feel free to suggest a fix...

Use javascript to set a focussed class on the button wrapper when the hidden input has focus.
Because the input is using display: none we won't be able to get focus so perhaps using opacity: 0 may work, or text-indent: -999px. I have not tried any of these approaches yet.

Explain the steps to reproduce the bug

Tabbing through the DOM.

Tell us about your environment

• Version used:
  Latest version
• Browser Name and version:
  Firefox 48.0.1
• Operating System and version (desktop or mobile):
  Mac OSX El Captain
• Link to your project:
  http://tfl-prosecutor.herokuapp.com/send-data-files

[trevorsaint]

This is a really good solution
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

[NickColley]

Hey @trevorsaint, looks like these do have some problems with regards to accessibility and browser support, recommend using the default inputs until we have a fix for this :)

Thanks for raising!

[trevorsaint]

Hi back @NickColley I have it now working in my version and did not require that much work to be honest. Firefox has a little issue with focus but have a JS solution to add a focused class. It works well. Take a peak: http://tfl-prosecutor.herokuapp.com/send-data-files

[NickColley]

Hey @trevorsaint,

Looks better but there's still a few issues:

• The input is not functioning as expected with JavaScript turned off, while it will technically work there's not enough feedback to the user.
  
• In legacy browsers (for example IE8) the input does not function with the keyboard etc
• In other legacy browsers (e.g. IE7-6) the input does not function at all, so we should fallback to a native input here.
• I've not been able to properly test this in any assistive technology yet for example screenreaders

There could be more issues I'm not aware of at the current time, that's why I recommend using the native upload input until we can get something robust that is properly tested.

[trevorsaint]

Hi @NickColley Yes I know more needs doing :).

I think perhaps .js element would be good here so If no-js we would have an alternative being the standard file upload. I will spend some time looking into it also. Thanks Nick.

[trevorsaint]

@NickColley Improved :)
http://tfl-prosecutor.herokuapp.com/send-data-files

[NickColley]

Great, working well without JS! 🚀

Just to illustrate why older browser keyboard support is important here...

With your current revision IE8 works with a cursor but keyboard access is broken.

This is important when you consider the people using JAWs on IE8 (http://webaim.org/projects/screenreadersurvey6/#browsercombos)

So you could consider falling back like you have done without JavaScript under IE9, this would fix the issues for anyone using IE6-8 (including screenreader users)

If you'd like to contribute to govuk_elements feel free to do a pull request, no worries if not 😄

[trevorsaint]

Hi @NickColley I will do just that :).

[gavboulton]

We've done something similar on passports renewals for our photo upload. We visually hide the file input and style the label as a button and set role="button".

DAC (Digital Accessibility Centre) have tested it and it was mostly fine, apart from with older versions of Dragon Naturally Speaking that don't understand the button role. If memory serves, I think JAWS may read out two file inputs but this is partly to do with the way IE handles the input and filename in the first place.

We auto-submit the form once a file has been selected (so don't need to show the filename). This has tested well with our users.

It's working in IE8 and above, for older browsers we show show the defaults. Have a look at https://www.passport.service.gov.uk/photo/upload (you will get thrown back to the start of the journey but it's only about five pages in).

[gemmaleigh]

For now, we're going to revert what we have back to the native controls (as @NickColley mentioned above), until there's time to find a better custom solution.

Also thanks @trevorsaint for spotting this!