anchor as button with accesskey is behaving different from an actual button

Question

I have an anchor with an accesskey assigned. The anchor is used as a button, but it has to be an anchor since the page uses the jQuery UI theme styling.

In Chrome, everything is working fine, I can "click" the button using <alt> + accesskey.

However, in IE, the button is only "selected" when I use <alt> + accesskey. How can I make sure the button is "clicked" immediately (without having to press "enter" afterwards)?

See this fiddle for an example: http://jsfiddle.net/5yu6anpf/

HTML:

<a accesskey="a" href="#">anchor (a)</a>
<button accesskey="b">button (b)</button>
<span id="status">use alt + a/b</span>

Javascript:

$("a, button")
    .button()
    .click(function() {
        $("#status").text($(this).text())
    });

After pressing alt+accesskey, press enter in ie. use shift+alt for ff. It depends browser — Gibbs, Oct 16 '14 at 08:04
The enter key is indeed working, however actual buttons are "clicked" by just pressing alt+accesskey, as you can see in the fiddle. Is it possible to use bypass the enter key? — Peter van Kekem, Oct 16 '14 at 08:07

score 1 · Accepted Answer · answered Oct 16 '14 at 08:34

1

IE only gives focus with access-key, we can observe with focus event by triggering click

$("a, button")
    .button()
    .focus(function () {
        $(this).click()
     })
    .click(function () {
       $("#status").text($(this).text())
});

answered Oct 16 '14 at 08:34

Koti Panga

3,660
2
18
21

That is indeed working, however it also affects tabbing and other focus actions... – Peter van Kekem Oct 16 '14 at 09:17
Since there are no other answers/solutions, I've implemented this solution. – Peter van Kekem Oct 20 '14 at 14:36

anchor as button with accesskey is behaving different from an actual button

1 Answers1