Bind both click and enter key for accessibility

Question

Given a form (please note the tabindex property)

<form id="settings-form">
    <input type="text" />
    <input type="submit" />
    <a href="#" class="cancel-save" tabindex="0">cancel</a>
</form>

Binding an action to the cancel button

$('#settings-form').find('.cancel-save').click(function(){ alert('CANCEL SAVE'); });

Now, when a user wants to cancel the changes, he will simply click the "cancel" button. But if he navigates with the TAB key and then hit enter the alert doesn't come up.

Is there a "master event" for this kind of actions, to handle both enter, clicks, spaces, etc., whatever accessibility features a user might have, without converting the <a> into a <button>?

Answer 1

What does the cancel button do? If it's purpose is to reset the values in the form, you should really use a HTML input type of reset instead, in order for this to work for non-JS users:

You can then bind to the form reset event and use prevent default if you want to give JS users a richer experience, but non-JS users still get expected behaviour. In general, an anchor that does nothing without JavaScript could probably be implemented better (or at least injected via JavaScript), especially if you're concerned with accessibility.

<form id="theForm">
    <input type="text" value=""/>
    <input type="submit" value=""/>
    <input type="reset" value="Cancel"/>
</form>

$("#theForm").bind("reset", function(e) {
    e.preventDefault();
    //Fancy reset handler
});

By default, this should include mouse, keyboard or touch interaction, as you're binding to the form event.