What is the proper behavior for pressing the enter key when file input has focus?

Question

I have a simple form. It contains an input of type "FILE" and a submit button. It is undergoing 508 compliance testing, and they have a problem.

If you tab to the FILE input and press the enter key, IE submits the form. It is my understanding that this is the correct behavior. I'm not doing any Javascript or anything to intentionally change the behavior of the keypress.

Our 508 testers disagree, and think that pressing enter in the FILE input should open the browse dialog. I haven't found anything conclusive, but I was hoping someone could clarify for me. Sample of the form is below.

<form id="upload_Form" METHOD="POST" ENCTYPE="multipart/form-data" action="" NAME="uploadForm">
<INPUT TYPE="FILE" NAME="filenames" id="filenames" title="Select File for Upload">
<input type="submit" value="Upload"/>
</form>

Answer 1

In the <input type="file"/> element, in modern browsers the focus goes to the button that invokes the file selection dialog. Hitting enter in that instance should invoke the dialog instead of submitting the form. IE, of course, does things their own way. I would be inclined to conform IE to standards rather than the other way around.

But more the point, why would you ever deliberately submit the form if that field hasn't been filled? It's a validation error at best.

Answer 2

Actually, it's the matter of consensus. I personally think that using the enter key instead of space to trigger a browse dialog is a correct behavior in terms of accessibility — more intuitive for a regular user, let's say. That's why WebKit is doing that, instead of submitting the form, when the upload input is focused.

A simple jQuery workaround as a fix for IE:

$(document).keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
         $('#upload-form').click();
      }
});

Demo Fiddle