Make [ENTER] default to submit the form #84
Conversation
| @@ -8,8 +8,8 @@ var HydraEditor = (function($) { | |||
| this.options = options; | |||
|
|
|||
| this.controls = $("<span class=\"input-group-btn field-controls\">"); | |||
| this.remover = $("<button class=\"btn btn-danger remove\"><i class=\"icon-white glyphicon-minus\"></i><span>Remove</span></button>"); | |||
| this.adder = $("<button class=\"btn btn-success add\"><i class=\"icon-white glyphicon-plus\"></i><span>Add</span></button>"); | |||
| this.remover = $("<button type=\"button\" class=\"btn btn-danger remove\"><i class=\"icon-white glyphicon-minus\"></i><span>Remove</span></button>"); | |||
There was a problem hiding this comment.
Why would you need to give a button a type of button?
There was a problem hiding this comment.
Type is a valid attribute of button in HTML 5 but "The button has no default behavior." If scripting is the only way this button is useful, we could be preventing people who use assistive devices from using the form.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
There was a problem hiding this comment.
I'm not sure about the why - that just happened to be the recommended fix for browsers to know what to do on hitting [ENTER] when a form had lots of buttons.
There was a problem hiding this comment.
Also on the page @mtribone mentioned:
The type of the button. Possible values are: submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
So we probably should set it to type=button 👍
There was a problem hiding this comment.
Ah, haha, I should have read that :)
|
This seems like a rather drastic change. I'd like to have someone from the Sufia camp review this. |
|
I think this should follow what the useability standards are, which I would think would be to submit the form. @mtribone knows a bit more about this. Maybe he and weigh in too. |
|
I've been puzzled myself on the current behavior of our forms when hitting ENTER. I like the idea of using the default browser behavior (submit) but definitively would like to hear @mtribone's thoughts. |
| } | ||
| }); | ||
| }); | ||
|
|
There was a problem hiding this comment.
Yeah our forms need a good looking into for usability/accessibility. So this code removes the default ability to add and remove metadata by hitting the enter key and gives it only to the button that submits the form. Does this mean that I have to use my mouse throughout the form to add and remove metadata or select items from a dropdown? And then get to use the enter key only to submit the form? If I'm following along, I think that there might be a better way to approach submitting the form using only a keyboard.
There was a problem hiding this comment.
It looks like the spacebar also works to activate controls. So if we bind the enter key to submit the form, this might be alright. I'm going to ping our local accessibility people and see how they navigate forms and activate controls.
There was a problem hiding this comment.
FYI, I have been tabbing to the button and hitting enter, as opposed to using the mouse. The button is always one tab away from the input field, so it's pretty easy to get to. The submit button was the tough one to navigate to since our forms are currently very big (and most fields are optional).
I'm not a keyboard-only user, mind you, I just happen to avoid the mouse as much as I can due to wrist issues. Leaving the hands in one spot is just easier.
There was a problem hiding this comment.
Agreed. If you can keep your hands on the keys, why wouldn't you want to keep them there. And holy crow our forms are long! We might be able to alleviate that a little bit by adding tabindex values to jump over optional fields, but that might create additional problems. Or just redesign the forms. :-)
Let me double check on the spacebar/enter key usage and then I think we're good to go.
There was a problem hiding this comment.
I'm getting mixed results on the enter key and spacebar issue. I'd say "go for it" since it possibly alleviates accidentally deleting metadata depending on where the focus happens to be in the form.
There was a problem hiding this comment.
I'm wondering what the preferred way would be to submit the form if ENTER were to default to the buttons. I'd think they would want some kind of option to submit in a single keystroke, but maybe I'm just nuts here. Or maybe there are assistive tools that render it a non-issue...? As a mostly-but-not-100%-keyboard user, I can only comment on people like me who prefer the keyboard, but aren't forced to use it exclusively.
There was a problem hiding this comment.
They have to tab through everything to focus on it, so they can hear what it is before they use it. However, we can create access keys to get people directly to the submit button rather than tabbing through the whole thing. We also need to inform people ahead of time that we have some controls mapped to certain things
http://webaim.org/techniques/keyboard/accesskey#spec
So if we bind enter to the submit button, we should instruct folks at the top of the form to use the spacebar for the add/remove buttons, a defined access key, and enter to submit the form.
There was a problem hiding this comment.
Okay, so it sounds like there's more accessibility work to be done. Did you want me to put that stuff together in this PR? Or can this be merged and a new PR be made for addressing the other issues?
It sounds like everybody agrees that "enter submits form" is better than "enter clicks nearest button", at least.
There was a problem hiding this comment.
I'd say let's put the accessibility work into another PR.
|
👍 |
|
Any further thoughts, @jcoyne @mtribone @awead @hectorcorrea? I'm 👍 to merging, methinks. |
|
@mjgiarlo I would have already pushed the button if I had wizard class permissions. |
Make [ENTER] default to submit the form
Closes #82